Frontend

Function declarative function sayHello ( name ) { console . log (` My name is ${ name } `) } sayHello ( ' Ahmad ' ) Bisa diubah menjadi satu baru function const sayHello = ( name ) => console . log (` ${ name } `)  sayHello ( ' Ahmad ' ) Function ditandai dengan () akan tetap case disini bisa juga tanpa menuliskan parameter () const sayHello = name => console . log (` ${ name } `)  sayHello ( ' Ahmad ' )

Parameter dari fungsi bisa berupa tipe data apapun mulai dari string, number, boolean, array, object ataupun tipe data lainnya bahkan fungsi. function sum ( ... numbers ) { let result = 0 for ( const number of numbers) { result += number } return result } console . log ( sum ( 1 , 3 , 4 , 2 , 5 )) Jika parameter dari sebuah fungsi sebuah object kita manfaatkan destructuring object untuk mendapat nilainya. const user = { id: 24 , displayName: ' Ahmad ' , address: ' Brebes ' } function myName ( { displayName , address } ) { console . log (` ${ displayName } in ${ address } `) } myName (user) Ketika kita memasukan parameter pada fungsi maka wajib baginya ketika mereturn sesuai dengan parameter yang ada. jika tidak maka akan undefined. solusinya kita bisa menambahkan nilai parameter default function exponentsFormula ( baseNumber , exponent = 4 ) { // default value let result = baseNumber ** exponent; console . log (` ${ ba...

Tambahkan di main.ts import axios from ' axios ' const pinia = createPinia () const app = createApp (App) . use (IonicVue) . use (router) . use (pinia); const axiosInstance = axios . create ({ withCredentials: true , }) router . isReady () . then ( () => { app . component ( ' Loading ' , Loading) app . config . globalProperties . $axios = { ... axiosInstance } app . mount ( ' #app ' ); }) Tinggal pake di component  async mounted () { await this . $axios . get ( ' //jsonplaceholder.typicode.com/users ' ) }, Sebagai catatan: keyword this gak jalan di setup dan jangan taruh di dalam defineComponent gunakan export default { } biasa

 Ada 3 pembahasan dalam reusability pada vue js Composable Pada vue application "composable" itu function yang di manfaatkan oleh composition api untuk merangkum dan mengulang kembali stateful logic. Yang biasanya gini  < script setup > import { ref, onMounted, onUnmounted } from " vue " ; const y = ref ( 0 ); const x = ref ( 0 ); function update ( event ) { x . value = event . pageX ; y . value = event . pageY ; } onMounted ( () => window . addEventListener ( " mousemove " , update)); onUnmounted ( () => window . addEventListener ( " mousemove " , update)); </ script > < template > Mouse position {{ x }} , {{ y }}</ template > Ada perubahan di dalam <script> <!-- template/ component --> < script setup > import { useMouse } from " ../composable/mouse " ; const { x , y } = useMouse (); </ script > < template > Mouse position {{ x }} , {{ y }}...

Includes()  Method ini menghasilkan nilai boolean true and false. Basic syntax  arr.includes(valueToFind, [fromIndex]) const kelas = [ " satu " , 80 , " 4 panjang " , " lingkaran " ]; const result = kelas . includes ( " satu " );   document . getElementById ( " demo " ). innerHTML = result;   Find() Beda dengan includes() alligator.find((el, idx) => typeof el === "string" && idx === 2)   const kelas = [ " satu " , 80 , " 4 panjang " , " lingkaran " ]; kelas . find ((el) => el .length < 12 ); indexOf() Resultnya index const kelas = [ " satu " , 80 , " 4 panjang " , " lingkaran " ];   kelas . indexOf ( " lingkaran " ); kelas . lastIndexOf ( 80 ); // returns 4 kelas . indexOf ( 80 , 2 ); // returns 4 kelas . lastIndexOf ( 80 , 4 ); // returns 4 kelas . lastIndexOf ( 80 , 3 ); // returns 1   Filter() const kela...

  load () { this . $overlay ( true ) const get = ( type ) => { return this . $axios . get ( ` endpoint/ ${ type } ` ) . then ( ( response ) => { this . count [type] = response . data . data . count }) . catch ( ( err ) => { console . error (err) }) . then ( () => { return Promise . resolve () }) } Promise . all ([ get ( ' register ' ), get ( ' draft ' ), get ( ' verified ' ), get ( ' rejected ' ), ]) . then ( () => { this . $overlay ( false ) }) },

 Jika anda bingung ketika switch node version ini solusinya.  Contoh kasus project lama masih menggunakan versi 10 sedangkan ada project baru yg node versinya 16. awalnya ane pake virtualbox..hehe tp partner ngasih tau bahwa bisa switch node versi pake NVM (Node Version Manager) : Install NVM Mac Kalo belum install dulu nih : ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" Remove jika sudah ada node, installnya nanti dari brew brew uninstall --ignore-dependencies node brew uninstall --force node   Install pake brew brew update   brew install nvm Create a directory for NVM in home mkdir ~/.nvm Configure the required environment variables. Bisa pake vim atau nano, atau editor lain nano ~/.bash_profile   add config export NVM_DIR=~/.nvm source $(brew --prefix nvm)/nvm.sh Load variables  source ~/.bash_profile Lihat versi node nvm ls-remote Install node nvm install node // latest version nvm install 16 // stable ...