12 Konsep JavaScript untuk Diketahui

JavaScript adalah bahasa yang kompleks. Jika Anda terlibat dalam pengembangan JavaScript di tingkat mana pun, ini artinya sangat penting bagi Anda untuk memahami konsep dasar bahasa ini. Materi, terjemahan yang kami terbitkan hari ini, mencakup 12 konsep JavaScript kritis. Tentu saja, pengembang JavaScript perlu tahu lebih banyak, tetapi tanpa apa yang akan kita bicarakan hari ini, dia pasti tidak bisa melakukannya.

1. Variabel menyimpan nilai dan referensi

Memahami bagaimana tepatnya nilai-nilai variabel ditetapkan dalam JavaScript sangat penting bagi mereka yang ingin menulis kode yang berfungsi dengan benar. Kesalahpahaman mekanisme ini menyebabkan program menulis di mana nilai-nilai variabel dapat berubah secara tidak sengaja.

JavaScript, jika suatu entitas memiliki salah satu tipe primitif (khususnya, tipe Boolean , null , undefined , String dan Number ), selalu berfungsi dengan nilai entitas ini. Artinya, nilainya ditulis ke variabel yang sesuai. Jika kita berbicara tentang suatu objek (misalnya, tipe Object , Array , Function ), maka ketika menugaskannya ke variabel, referensi padanya ditulis padanya, alamat di mana ia berada di memori.

Pertimbangkan sebuah contoh. Dalam cuplikan kode berikut, string ditulis ke var1 . Setelah itu, nilai var2 ditulis ke variabel var2 . Karena variabel var1 memiliki tipe primitif ( String ), salinan string yang tersedia di var1 var2 ditulis ke var1 . Ini memungkinkan kita untuk mempertimbangkan var2 sebagai variabel yang benar-benar independen dari var1 , meskipun ia menyimpan nilai yang sama dengan var1 . Menulis nilai baru ke var1 tidak memengaruhi var1 .

 let var1 = 'My string'; let var2 = var1; var2 = 'My new string'; console.log(var1); // 'My string' console.log(var2); // 'My new string' 

Sekarang perhatikan contoh bekerja dengan objek.

 let var1 = { name: 'Jim' } let var2 = var1; var2.name = 'John'; console.log(var1); // { name: 'John' } console.log(var2); // { name: 'John' } 

Seperti yang Anda lihat, di sini kami bekerja dengan variabel var2 , dan apa yang terjadi padanya tercermin dalam variabel var1 saat mereka menyimpan referensi ke objek yang sama. Sangat mudah untuk membayangkan apa yang dapat menyebabkan kode nyata jika seseorang memutuskan bahwa variabel yang menyimpan objek berperilaku dengan cara yang sama seperti variabel yang menyimpan nilai tipe primitif. Ini terutama tidak menyenangkan, misalnya, dalam kasus di mana mereka membuat fungsi yang dirancang untuk bekerja dengan nilai objek yang diteruskan ke sana, dan fungsi ini secara tidak sengaja mengubah nilai ini.

2. Sirkuit pendek

Penutupan adalah pola desain penting dalam JavaScript yang memungkinkan Anda mengatur pekerjaan yang dilindungi dengan variabel. Dalam contoh berikut, fungsi createGreeter() mengembalikan fungsi anonim yang memiliki akses ke argumen asli yang disediakan dengan argumen greeting berisi string Hello . Referensi ke fungsi anonim ini ditulis ke variabel sayHello . Setelah itu, tidak peduli berapa kali kita memanggil fungsi sayHello() , ia akan selalu memiliki akses ke nilai greeting . Dalam hal ini, akses ke greeting hanya akan menjadi fungsi anonim, tautan yang direkam di sayHello .

 function createGreeter(greeting) { return function(name) {   console.log(greeting + ', ' + name); } } const sayHello = createGreeter('Hello'); sayHello('Joe'); // Hello, Joe 

Ini adalah contoh yang sangat sederhana. Jika kita melihat sesuatu yang lebih dekat dengan dunia nyata, kita dapat membayangkan, misalnya, fungsi untuk menghubungkan ke API tertentu (sebut saja apiConnect() ), yang, ketika pertama kali dipanggil, dilewatkan kunci akses API. Fungsi ini, pada gilirannya, mengembalikan objek yang berisi beberapa metode yang menggunakan kunci akses API yang diteruskan ke apiConnect() . Dalam hal ini, kunci disimpan dalam penutupan dan ketika Anda memanggil metode ini, tidak perlu lagi menyebutkannya.

 function apiConnect(apiKey) { function get(route) {   return fetch(`${route}?key=${apiKey}`); } function post(route, params) {   return fetch(route, {     method: 'POST',     body: JSON.stringify(params),       headers: {         'Authorization': `Bearer ${apiKey}`       }     }) } return { get, post } } const api = apiConnect('my-secret-key'); //     API     api.get('http://www.example.com/get-endpoint'); api.post('http://www.example.com/post-endpoint', { name: 'Joe' }); 

3. Tugas yang merusak

Jika Anda belum pernah menggunakan tugas yang merusak dalam JavaScript, maka sudah saatnya untuk memperbaikinya. Tugas destruktif adalah cara umum untuk mengambil properti objek menggunakan konstruksi bahasa sintaksis yang rapi.

 const obj = { name: 'Joe', food: 'cake' } const { name, food } = obj; console.log(name, food); // 'Joe' 'cake' 

Jika Anda perlu menetapkan nama properti yang diekstraksi yang berbeda dari yang mereka miliki di objek, Anda bisa melakukan ini:

 const obj = { name: 'Joe', food: 'cake' } const { name: myName, food: myFood } = obj; console.log(myName, myFood); // 'Joe' 'cake' 

Dalam contoh berikut, destrrukturisasi digunakan untuk secara akurat meneruskan nilai-nilai yang disimpan dalam properti objek person ke fungsi introduce() . Ini adalah contoh bagaimana konstruksi ini digunakan ketika mendeklarasikan fungsi untuk mengambil data dari objek dengan parameter yang diteruskan ke sana. Omong-omong, jika Anda terbiasa dengan Bereaksi, maka Anda mungkin sudah melihat ini.

 const person = { name: 'Eddie', age: 24 } function introduce({ name, age }) { console.log(`I'm ${name} and I'm ${age} years old!`); } console.log(introduce(person)); // "I'm Eddie and I'm 24 years old!" 

4. Operator penyebaran

Operator penyebaran adalah konstruksi yang cukup sederhana yang mungkin tampak tidak dapat dipahami oleh orang yang tidak siap. Contoh berikut memiliki array numerik, nilai maksimum yang disimpan di mana kita perlu mencari. Kami ingin menggunakan metode Math.max() untuk ini, tetapi tidak tahu cara bekerja dengan array. Dia, sebagai argumen, mengasumsikan nilai numerik independen. Untuk mengekstraksi elemen-elemennya dari array, kami menggunakan operator spread, yang terlihat seperti tiga titik.

 const arr = [4, 6, -1, 3, 10, 4]; const max = Math.max(...arr); console.log(max); // 10 

5. Pernyataan sisanya

Operator lainnya memungkinkan Anda untuk mengubah sejumlah argumen yang dilewatkan ke fungsi menjadi array.

 function myFunc(...args) { console.log(args[0] + args[1]); } myFunc(1, 2, 3, 4); // 3 

6. Metode array

Metode array sering memberikan alat yang nyaman bagi pengembang untuk menyelesaikan berbagai tugas konversi data dengan indah. Saya terkadang menjawab pertanyaan di StackOverflow. Di antara mereka, sering ada yang didedikasikan untuk sesuatu seperti itu atau cara lain untuk bekerja dengan array objek. Dalam situasi seperti itulah metode array sangat berguna.

Di sini kita akan mempertimbangkan beberapa metode seperti itu, disatukan oleh prinsip kesamaan mereka satu sama lain. Perlu dicatat bahwa di sini saya tidak akan memberi tahu Anda tentang semua metode array. Anda dapat menemukan daftar lengkap mereka di MDN (omong-omong, ini adalah referensi JavaScript favorit saya).

▍Peta (), filter (), dan metode pengurangan ()

map() , filter() dan reduce() metode array memungkinkan Anda untuk mengubah array atau mengurangi array ke nilai tunggal (yang bisa menjadi objek).

Metode map() mengembalikan array baru yang berisi nilai yang diubah dari array yang diproses. Bagaimana tepatnya mereka akan diubah ditentukan dalam fungsi yang diteruskan ke metode ini.

 const arr = [1, 2, 3, 4, 5, 6]; const mapped = arr.map(el => el + 20); console.log(mapped); // [21, 22, 23, 24, 25, 26] 

Metode filter() mengembalikan array elemen, memeriksa nilai-nilai fungsi yang diteruskan ke metode ini mengembalikan true .

 const arr = [1, 2, 3, 4, 5, 6]; const filtered = arr.filter(el => el === 2 || el === 4); console.log(filtered); // [2, 4] 

Metode reduce() mengembalikan nilai tertentu, yang merupakan hasil dari pemrosesan semua elemen array.

 const arr = [1, 2, 3, 4, 5, 6]; const reduced = arr.reduce((total, current) => total + current); console.log(reduced); // 21 

▍ Metode find (), findIndex () dan indexOf ()

Metode array find() , findIndex() dan indexOf() mudah saling membingungkan. Berikut ini adalah penjelasan untuk membantu Anda memahami fitur-fiturnya.

Metode find() mengembalikan elemen pertama array yang cocok dengan kriteria yang ditentukan. Metode ini, menemukan elemen yang cocok pertama, tidak melanjutkan pencarian dalam array.

 const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const found = arr.find(el => el > 5); console.log(found); // 6 

Harap perhatikan bahwa dalam contoh kami, kriteria yang diberikan sesuai dengan semua elemen array yang mengikuti yang berisi angka 5, tetapi hanya elemen yang cocok pertama yang dikembalikan. Metode ini sangat berguna dalam situasi di mana, menggunakan loop for untuk menghitung dan menganalisis array, loop tersebut terputus ketika elemen yang diinginkan ditemukan dalam array, menggunakan pernyataan break .

Metode findIndex() sangat mirip dengan find() , tetapi alih-alih mengembalikan elemen yang cocok pertama dalam array, metode ini mengembalikan indeks elemen tersebut. Untuk lebih memahami metode ini, lihat contoh berikut, yang menggunakan array nilai string.

 const arr = ['Nick', 'Frank', 'Joe', 'Frank']; const foundIndex = arr.findIndex(el => el === 'Frank'); console.log(foundIndex); // 1 

Metode indexOf() sangat mirip dengan metode findIndex() , tetapi dibutuhkan sebagai argumen bukan fungsi, tetapi nilai normal. Ini dapat digunakan jika logika kompleks tidak diperlukan saat mencari elemen array yang diinginkan.

 const arr = ['Nick', 'Frank', 'Joe', 'Frank']; const foundIndex = arr.indexOf('Frank'); console.log(foundIndex); // 1 

▍ Metode Push (), pop (), shift (), dan unshift ()

Metode push() , pop() , shift() dan unshift() digunakan untuk menambahkan elemen baru ke array dan untuk mengekstrak elemen yang sudah ada dalam array dari mereka. Dalam hal ini, pekerjaan dilakukan dengan elemen yang terletak di awal atau di akhir array.

Metode push() memungkinkan Anda untuk menambahkan elemen ke akhir array. Ini memodifikasi array, dan, setelah selesai, mengembalikan elemen yang ditambahkan ke array.

 let arr = [1, 2, 3, 4]; const pushed = arr.push(5); console.log(arr); // [1, 2, 3, 4, 5] console.log(pushed); // 5 

Metode pop() menghapus elemen terakhir dari array. Ini memodifikasi array dan mengembalikan elemen yang dihapus dari itu.

 let arr = [1, 2, 3, 4]; const popped = arr.pop(); console.log(arr); // [1, 2, 3] console.log(popped); // 4 

Metode shift() menghapus elemen pertama dari array dan mengembalikannya. Ini juga memodifikasi array yang dipanggil.

 let arr = [1, 2, 3, 4]; const shifted = arr.shift(); console.log(arr); // [2, 3, 4] console.log(shifted); // 1 

Metode unshift() menambahkan satu atau lebih elemen ke awal array. Dia, sekali lagi, memodifikasi array. Pada saat yang sama, tidak seperti tiga metode lain yang dibahas di sini, ia mengembalikan panjang array yang baru.

 let arr = [1, 2, 3, 4]; const unshifted = arr.unshift(5, 6, 7); console.log(arr); // [5, 6, 7, 1, 2, 3, 4] console.log(unshifted); // 7 

▍ Metode Slice () dan splice ()

Metode-metode ini digunakan untuk memodifikasi array atau mengembalikan beberapa bagian array.

Metode splice() mengubah konten array dengan menghapus elemen yang ada atau menggantinya dengan elemen lain. Dia mampu menambahkan elemen baru ke array. Metode ini memodifikasi array.

Contoh berikut, jika Anda menggambarkannya dalam bahasa biasa, terlihat seperti ini: Anda harus, pada posisi array 1 , menghapus 0 elemen dan menambahkan elemen yang mengandung b .

 let arr = ['a', 'c', 'd', 'e']; arr.splice(1, 0, 'b') 

Metode slice() mengembalikan salinan dangkal dari array yang mengandung elemen-elemennya, mulai dari posisi awal yang diberikan dan berakhir dengan posisi sebelum posisi akhir yang diberikan. Jika, saat memanggilnya, hanya posisi awal yang ditentukan, maka akan mengembalikan seluruh array, mulai dari posisi ini. Metode ini tidak mengubah array. Itu hanya mengembalikan bagian dari array ini yang dijelaskan ketika dipanggil.

 let arr = ['a', 'b', 'c', 'd', 'e']; const sliced = arr.slice(2, 4); console.log(sliced); // ['c', 'd'] console.log(arr); // ['a', 'b', 'c', 'd', 'e'] 

▍ Metode sortir ()

Metode sort() mengurutkan array sesuai dengan kondisi yang ditentukan oleh fungsi yang diteruskan ke sana. Fungsi ini mengambil dua elemen dari array (misalnya, mereka dapat direpresentasikan sebagai parameter a dan b ), dan, membandingkannya, mengembalikan, jika elemen tidak perlu dipertukarkan, 0 jika perlu diletakkan pada indeks yang lebih rendah daripada b adalah angka negatif, dan jika b perlu ditempatkan pada indeks yang lebih rendah daripada b adalah angka positif.

 let arr = [1, 7, 3, -1, 5, 7, 2]; const sorter = (firstEl, secondEl) => firstEl - secondEl; arr.sort(sorter); console.log(arr); // [-1, 1, 2, 3, 5, 7, 7] 

Jika Anda tidak dapat mengingat metode ini untuk pertama kalinya, mengingatnya tidak apa-apa. Yang paling penting adalah Anda sekarang tahu apa metode array standar dapat lakukan. Karenanya, jika Anda tidak dapat segera mengingat fitur dari metode tertentu, apa yang Anda ketahui tentang hal itu akan memungkinkan Anda untuk dengan cepat menemukan apa yang Anda butuhkan dalam dokumentasi.

7. Generator

Generator JavaScript dideklarasikan menggunakan karakter tanda bintang. Mereka memungkinkan Anda menentukan nilai apa yang akan dikembalikan pada saat next() metode next() dipanggil. Generator dapat dirancang untuk mengembalikan sejumlah nilai. Jika generator tersebut mengembalikan semua nilai tersebut, maka panggilan next() ke next() akan kembali undefined . Anda juga dapat membuat generator yang dirancang untuk mengembalikan jumlah nilai yang tidak terbatas menggunakan siklus.

Ini adalah generator yang dirancang untuk mengembalikan sejumlah nilai:

 function* greeter() { yield 'Hi'; yield 'How are you?'; yield 'Bye'; } const greet = greeter(); console.log(greet.next().value); // 'Hi' console.log(greet.next().value); // 'How are you?' console.log(greet.next().value); // 'Bye' console.log(greet.next().value); // undefined 

Dan di sini adalah generator yang dirancang untuk mengembalikan jumlah nilai tak terbatas melalui satu loop.

 function* idCreator() { let i = 0; while (true)   yield i++; } const ids = idCreator(); console.log(ids.next().value); // 0 console.log(ids.next().value); // 1 console.log(ids.next().value); // 2 //   ... 

8. Operator untuk memeriksa kesetaraan (==) dan kesetaraan yang ketat (===) dari nilai-nilai

Sangat penting bagi setiap pengembang JS untuk memahami perbedaan antara operator kesetaraan ( == ) dan kesetaraan ketat ( === ). Faktanya adalah bahwa operator == , sebelum membandingkan nilai-nilai, melakukan konversi tipe mereka (yang dapat menyebabkan aneh, pada pandangan pertama, konsekuensi), dan operator === tidak melakukan konversi tipe.

 console.log(0 == '0'); // true console.log(0 === '0'); // false 

9. Perbandingan objek

Saya kadang-kadang harus melihat bagaimana pendatang baru di pemrograman JS membuat kesalahan yang sama. Mereka mencoba membandingkan objek secara langsung. Variabel di mana objek "disimpan" berisi referensi ke mereka, dan bukan objek ini sendiri.

Jadi, misalnya, dalam contoh berikut, objek terlihat sama, tetapi ketika dibandingkan secara langsung, kami diberitahu bahwa objek berbeda, karena masing-masing variabel berisi tautan ke objeknya sendiri dan tautan ini tidak sama satu sama lain.

 const joe1 = { name: 'Joe' }; const joe2 = { name: 'Joe' }; console.log(joe1 === joe2); // false 

Selain itu, dalam contoh berikut, ternyata joe1 sama dengan joe2 karena kedua variabel menyimpan referensi ke objek yang sama.

 const joe1 = { name: 'Joe' }; const joe2 = joe1; console.log(joe1 === joe2); // true 

Salah satu metode perbandingan objek nyata adalah konversi awal mereka ke format JSON-string. Benar, pendekatan ini memiliki satu masalah, yaitu bahwa dalam representasi string yang diperoleh objek urutan tertentu dari sifat-sifatnya tidak dijamin. Cara yang lebih dapat diandalkan untuk membandingkan objek adalah dengan menggunakan perpustakaan khusus yang berisi alat untuk perbandingan objek yang mendalam (misalnya, ini adalah metode isEqual () dari perpustakaan lodash ).

Untuk lebih memahami seluk-beluk membandingkan objek dan untuk memahami konsekuensi yang mungkin dari menulis tautan ke objek yang sama dalam variabel yang berbeda, lihat konsep JS pertama yang dibahas dalam artikel ini.

10. Fungsi Panggilan Balik

Fungsi panggilan balik adalah konsep JavaScript yang cukup sederhana yang terkadang membuat kesulitan bagi pemula. Perhatikan contoh berikut. Di sini, fungsi console.log (begitu saja - tanpa tanda kurung) diteruskan ke myFunc() sebagai fungsi callback. Fungsi ini menetapkan timer, setelah itu console.log() dipanggil dan string yang diteruskan ke myFunc() ditampilkan di konsol.

 function myFunc(text, callback) { setTimeout(function() {   callback(text); }, 2000); } myFunc('Hello world!', console.log); // 'Hello world!' 

11. Janji

Setelah Anda menguasai fungsi panggilan balik dan mulai menggunakannya di mana-mana, Anda akan segera menemukan diri Anda dalam apa yang disebut "neraka panggilan balik". Jika Anda benar-benar ada - lihatlah janji-janji itu. Kode asinkron dapat dibungkus dalam sebuah janji, dan, setelah eksekusi yang sukses, beri tahu sistem tentang penyelesaian yang sukses dari janji tersebut dengan memanggil metode yang sesuai, dan jika terjadi kesalahan - panggil metode yang menunjukkan ini dan tolak janji tersebut. Untuk memproses hasil yang dikembalikan oleh janji, gunakan metode then() , dan untuk penanganan kesalahan, gunakan metode catch() .

 const myPromise = new Promise(function(res, rej) { setTimeout(function(){   if (Math.random() < 0.9) {     return res('Hooray!');   }   return rej('Oh no!'); }, 1000); }); myPromise .then(function(data) {   console.log('Success: ' + data);  })  .catch(function(err) {   console.log('Error: ' + err);  }); //  Math.random()  , ,  0.9,    : // "Success: Hooray!" //  Math.random()  , ,  0.9,  0.9,    : // "Error: On no!" 

12. membangun async / menunggu

Setelah Anda bekerja dengan janji-janji itu, maka, sangat mungkin, Anda akan menginginkan sesuatu yang lebih. Misalnya, kuasai konstruk async / menunggu. Ini adalah gula sintaksis untuk janji. Dalam contoh berikut, kami membuat, menggunakan async , fungsi asinkron, dan di dalamnya, menggunakan kata kunci await , kami mengatur penantian untuk greeter .

 const greeter = new Promise((res, rej) => { setTimeout(() => res('Hello world!'), 2000); }) async function myFunc() { const greeting = await greeter; console.log(greeting); } myFunc(); // 'Hello world!' 

Ringkasan

Jika apa yang kami bicarakan di sini sebelumnya tidak Anda kenal, maka kemungkinan besar Anda, setidaknya sedikit, tumbuh di atas diri Anda dengan membaca artikel ini. Jika Anda belum menemukan sesuatu yang baru di sini, maka saya berharap materi ini memberi Anda kesempatan untuk berlatih dan memperkuat pengetahuan Anda tentang JavaScript.

Pembaca yang budiman! Apa konsep JavaScript lain yang akan Anda tambahkan ke artikel ini?