11 Teratas (dan banyak lagi!) Fungsi JavaScript yang Harus Diketahui

Kode cerdas! Jadilah pengembang JavaScript yang lebih cepat, lebih produktif, dan lebih bahagia dengan menguasai fungsi paling penting dan berulang dalam bahasa ini.

Baik itu backend atau frontend (atau bahkan pesawat ruang angkasa), JavaScript ada di mana-mana. Ini juga merupakan bahasa yang cukup fleksibel (artinya memiliki pola pemrograman fungsional yang keras serta kelas-kelas yang bagus), dan kesamaannya dengan bahasa “mirip-C” lainnya membuat transisi yang mudah bagi pengembang dari bahasa lain.

Jika Anda menghendaki tingkatkan game JS Anda, saya sarankan Anda mempelajari, berlatih, dan akhirnya menguasai fungsi inti berikut yang tersedia dalam bahasa tersebut. Tidak semua ini benar-benar “diperlukan” untuk menyelesaikan masalah, tetapi mereka dapat melakukan banyak pekerjaan berat untuk Anda dalam beberapa kasus, sementara dalam kasus lain, ini dapat mengurangi jumlah kode yang harus Anda tulis.

peta()

Ini akan menjadi ajaran sesat untuk menulis artikel tentang fungsi penting JavaScript dan tidak menyebutkan map()! πŸ˜†πŸ˜† Seiring dengan filter() dan reduce(), map() membentuk semacam trinitas suci. Ini adalah fungsi yang akan Anda gunakan berulang kali dalam karier Anda, jadi sangat layak untuk dilihat. Mari kita tangani satu per satu, dimulai dengan map().

map() adalah salah satu fungsi yang paling menyulitkan orang yang mempelajari JavaScript. Mengapa? Bukan karena ada sesuatu yang rumit tentangnya, tetapi karena cara kerja fungsi ini adalah ide yang diambil dari apa yang disebut Pemrograman Fungsional. Dan karena kita tidak terpapar pada Pemrograman Fungsional β€” sekolah dan industri kita penuh dengan bahasa berorientasi objek β€” cara kerjanya tampak aneh atau bahkan salah bagi otak kita yang bias.

JavaScript jauh lebih fungsional daripada berorientasi objek, meskipun versi modernnya melakukan yang terbaik untuk menyembunyikan fakta ini. Tapi itu sekaleng cacing yang bisa saya buka mungkin lain hari. 🀣 Oke, jadi, map() . . .

map() adalah fungsi yang sangat sederhana; itu menempel pada array dan membantu kami mengonversi setiap item menjadi sesuatu yang lain, menghasilkan array baru. Bagaimana tepatnya mengonversi item disediakan sebagai fungsi lain, yang menurut konvensi, bersifat anonim.

Itu saja! Sintaksnya mungkin perlu dibiasakan, tetapi pada dasarnya itulah yang kami lakukan dalam fungsi map() . Mengapa kita ingin menggunakan map()? Tergantung pada apa yang kita coba capai. Sebagai contoh, katakanlah kita mencatat suhu setiap hari dalam seminggu terakhir dan menyimpannya sebagai larik sederhana. Namun, sekarang kami diberi tahu bahwa instrumennya tidak terlalu akurat dan telah melaporkan suhu 1,5 derajat lebih rendah dari yang seharusnya.

Kita dapat melakukan koreksi ini menggunakan fungsi map() seperti ini:

const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];

const correctedWeeklyReadings = weeklyReadings.map(reading => reading + 1.5);

console.log(correctedWeeklyReadings); // gives [ 21.5, 23.5, 22, 20.5, 22.5, 23, 24.5 ]

Contoh lain yang sangat praktis berasal dari dunia React, di mana membuat daftar elemen DOM dari array adalah pola umum; jadi, hal seperti ini biasa terjadi:

export default ({ products }) => {
    return products.map(product => {
        return (
            <div className="product" key={product.id}>
                <div className="p-name">{product.name}</div>
                <div className="p-desc">{product.description}</div>
            </div>
        );
    });
};

Di sini, kami memiliki komponen React fungsional yang menerima daftar produk sebagai propertinya. Dari daftar (array) ini, kemudian dibuat daftar “div” HTML, yang pada dasarnya mengubah setiap objek produk menjadi HTML. Objek produk asli tetap tidak tersentuh.

Anda dapat berargumen bahwa map() tidak lain adalah perulangan for yang dimuliakan dan Anda sepenuhnya benar. Tetapi perhatikan bahwa segera setelah Anda membuat argumen itu, pikiran terlatih berorientasi Objek Anda yang berbicara, sedangkan fungsi-fungsi ini dan alasannya berasal dari Pemrograman Fungsional, di mana keseragaman, kekompakan, dan keanggunan sangat dihormati. πŸ™‚

Saring()

filter() adalah fungsi yang sangat berguna yang akan Anda terapkan berulang kali dalam banyak situasi. Seperti namanya, fungsi ini memfilter array berdasarkan aturan/logika yang Anda berikan dan mengembalikan array baru yang berisi item yang memenuhi aturan tersebut.

Mari gunakan kembali contoh cuaca kita. Asumsikan bahwa kita memiliki larik yang berisi suhu maksimum untuk setiap hari dalam minggu lalu; sekarang, kami ingin mengetahui berapa banyak dari hari-hari itu yang lebih dingin. Ya, β€œdingin” adalah istilah subyektif, jadi katakanlah kita sedang mencari hari-hari di mana suhunya di bawah 20. Kita bisa melakukan ini menggunakan fungsi filter() seperti ini:

const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];

const colderDays = weeklyReadings.filter(dayTemperature => {
    return dayTemperature < 20;
});

console.log("Total colder days in week were: " + colderDays.length); // 1

Perhatikan bahwa fungsi anonim yang kami berikan ke filter() harus mengembalikan nilai Boolean: benar atau salah. Ini adalah bagaimana filter() akan mengetahui apakah akan menyertakan item itu atau tidak dalam array yang difilter. Anda bebas menulis logika kompleks dalam jumlah berapa pun di dalam fungsi anonim ini; Anda dapat melakukan panggilan API dan membaca input pengguna, dan seterusnya, selama Anda memastikan bahwa pada akhirnya, Anda mengembalikan nilai Boolean.

Hati-hati: Ini adalah catatan tambahan yang saya rasa harus saya berikan berdasarkan pengalaman saya sebagai pengembang JavaScript. Baik karena kecerobohan atau fundamental yang salah, banyak programmer membuat bug halus dalam program mereka saat menggunakan filter(). Mari tulis ulang kode sebelumnya untuk memuat bug:

const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];

const colderDays = weeklyReadings.filter(dayTemperature => {
    return dayTemperature < 20;
});

if(colderDays) {
    console.log("Yes, there were colder days last week");
} else {
    console.log("No, there were no colder days");
}

Perhatikan sesuatu? Kerja bagus jika Anda melakukannya! Kondisi if menjelang akhir memeriksa colderDays, yang sebenarnya adalah sebuah array! Anda akan terkejut berapa kali orang membuat kesalahan ini saat mereka berlomba untuk memenuhi tenggat waktu atau kode dengan semangat rendah (untuk alasan apapun). Masalah dengan kondisi ini adalah bahwa JavaScript adalah bahasa yang aneh dan tidak konsisten dalam banyak hal, dan β€œkebenaran” dari berbagai hal adalah salah satunya. Ketika [] == true mengembalikan false, membuat Anda berpikir bahwa kode di atas tidak rusak, kenyataannya di dalam kondisi if, [] dievaluasi menjadi benar! Dengan kata lain, kode yang kami tulis tidak akan pernah mengatakan bahwa tidak ada hari yang lebih dingin minggu lalu.

  Cara Memasukkan PDF ke Microsoft PowerPoint

Cara mengatasinya sangat sederhana, seperti yang diberikan pada kode sebelum kode di atas. Kami memeriksa colderDays.length, yang dijamin memberi kami bilangan bulat (nol atau lebih) dan dengan demikian bekerja secara konsisten dalam perbandingan logis. Perhatikan bahwa filter() akan selalu, selalu, selalu mengembalikan array, kosong atau tidak kosong, sehingga kita dapat mengandalkannya dan menulis perbandingan logis dengan percaya diri.

Ini jalan memutar yang lebih lama dari yang saya rencanakan, tetapi bug seperti ini layak disorot dalam sepuluh ribu kata, semua huruf besar jika perlu. Saya harap Anda tidak terpengaruh oleh ini dan menghemat ratusan jam upaya debug! πŸ™‚

mengurangi()

Dari semua fungsi dalam artikel ini, serta di pustaka JavaScript standar, reduce() adalah salah satu pelopor untuk mahkota “membingungkan dan aneh”. Meskipun fungsi ini sangat penting dan menghasilkan kode yang elegan dalam banyak situasi, ini dihindari oleh sebagian besar pengembang JavaScript dan mereka lebih suka menulis lebih banyak kode bertele-tele.

Alasannya adalah – dan saya akan jujur ​​​​di sini! β€” kurangi() sulit dipahami, baik dalam arti konsep maupun eksekusi. Ketika Anda membaca uraiannya, Anda telah membacanya berulang kali dan tetap saja, Anda meragukan diri sendiri apakah Anda salah membacanya; dan ketika Anda melihatnya beraksi dan mencoba memvisualisasikan cara kerjanya, otak Anda berputar menjadi ribuan simpul! 🀭

Sekarang, jangan takut. Fungsi pengurangan () tidak jauh dari kompleksitas dan intimidasi, katakanlah, B + Pohon dan algoritma mereka. Hanya saja logika semacam ini jarang ditemui selama pekerjaan sehari-hari programmer rata-rata.

Jadi, setelah membuat Anda takut pada siang hari dan segera memberi tahu Anda untuk tidak khawatir, saya akhirnya ingin menunjukkan kepada Anda apa fungsi ini dan mengapa tepatnya kami membutuhkannya.

Seperti namanya, reduce() digunakan untuk mengurangi sesuatu. Hal yang dikurangi adalah array dan hal yang dikurangi array yang diberikan adalah nilai tunggal (angka, string, fungsi, objek, apa pun). Inilah cara yang lebih sederhana untuk menjelaskannya β€” reduce() mengubah sebuah array menjadi satu nilai. Perhatikan bahwa nilai kembalian dari reduce() bukan array, seperti halnya dengan map() dan filter(). Setelah memahami sebanyak ini sudah setengah dari pertempuran. πŸ™‚

Sekarang, agak jelas bahwa jika kita akan mengubah (mengurangi) sebuah array, kita perlu menyediakan logika yang diperlukan; dan berdasarkan pengalaman Anda sebagai JS dev, Anda mungkin sudah menebak bahwa kami melakukannya menggunakan fungsi. Fungsi ini adalah apa yang kita sebut sebagai fungsi peredam, yang membentuk argumen pertama untuk mengurangi(). Argumen kedua adalah nilai awal, seperti angka, string, dll. (Saya akan menjelaskan sebentar lagi apa sih “nilai awal” ini).

Berdasarkan pemahaman kita sejauh ini, kita dapat mengatakan bahwa panggilan ke reduce() terlihat seperti ini: array.reduce(reducerFunction, startingValue). Sekarang mari kita bahas inti dari semuanya: fungsi peredam. Seperti yang sudah ditetapkan, fungsi peredam adalah yang memberi tahu pengurangan () bagaimana mengubah array menjadi satu nilai. Dibutuhkan dua argumen: sebuah variabel untuk bertindak sebagai akumulator (jangan khawatir, saya akan menjelaskan sedikit ini juga), dan sebuah variabel untuk menyimpan nilai saat ini.

Saya tahu saya tahu . . . itu tadi banyak terminologi untuk satu fungsi yang bahkan tidak wajib di JavaScript. 😝😝 Dan inilah mengapa orang lari dari pengurangan(). Tetapi jika Anda mempelajarinya selangkah demi selangkah, Anda tidak hanya akan memahaminya tetapi juga menghargainya saat Anda menjadi pengembang yang lebih baik.

Oke, jadi, kembali ke topik yang sedang dibahas. “Nilai awal” yang diteruskan ke reduce() adalah . . . Nah, nilai awal untuk perhitungan yang ingin Anda gunakan. Misalnya, jika Anda akan melakukan perkalian dalam fungsi pengurangan, nilai awal 1 masuk akal; sebagai tambahan, Anda mungkin mulai dengan 0, dan seterusnya.

Sekarang mari kita lihat tanda tangan untuk fungsi peredam. Fungsi peredam yang diteruskan ke pengurangan () memiliki bentuk berikut: reducerFunction(accumulator, currentValue). “Akumulator” hanyalah nama keren untuk variabel yang mengumpulkan dan menyimpan hasil perhitungan; persis seperti menggunakan variabel bernama total untuk menjumlahkan semua item dalam array menggunakan sesuatu seperti total += arr[i]. Ini persis bagaimana fungsi peredam di pengurangan () diterapkan: akumulator awalnya disetel ke nilai awal yang Anda berikan, dan kemudian satu per satu elemen dalam larik dikunjungi, perhitungan dilakukan, dan hasilnya disimpan di akumulator, dan seterusnya. . .

Jadi, apa “nilai saat ini” dalam fungsi peredam? Ini adalah ide yang sama yang Anda bayangkan secara mental jika saya meminta Anda untuk melintasi array: Anda akan mengambil variabel untuk memulai dari indeks nol dan memindahkannya selangkah demi selangkah. Saat Anda melakukan ini, jika saya meminta Anda untuk tiba-tiba berhenti, Anda akan menemukan diri Anda berada di salah satu elemen array, bukan? Inilah yang kami maksud dengan nilai saat ini: ini adalah nilai dari variabel yang digunakan untuk mewakili item array yang saat ini sedang dipertimbangkan (pikirkan untuk mengulang array jika itu membantu).

Dengan semua yang dikatakan, saatnya untuk melihat contoh sederhana dan melihat bagaimana semua jargon ini digabungkan dalam panggilan pengurangan () yang sebenarnya. Katakanlah kita memiliki larik yang berisi n bilangan asli pertama (1, 2, 3 … n) dan kita ingin mencari faktorial dari n. Kita tahu bahwa untuk menemukan n! kita hanya perlu melipatgandakan semuanya, yang membawa kita ke implementasi ini:

const numbers = [1, 2, 3, 4, 5];
const factorial = numbers.reduce((acc, item) => acc * item, 1);
console.log(factorial); // 120

Banyak yang terjadi hanya dalam tiga baris kode ini, jadi mari kita buka satu per satu dalam konteks diskusi (sangat panjang) yang telah kita lakukan sampai sekarang. Seperti yang sudah jelas, angka adalah larik yang menampung semua angka yang ingin kita kalikan. Selanjutnya, lihat pemanggilan numbers.reduce() , yang mengatakan bahwa nilai awal untuk acc harus 1 (karena tidak mempengaruhi atau merusak perkalian apa pun). Selanjutnya, periksa badan fungsi peredam, `(acc, item) => acc * item, yang hanya mengatakan bahwa nilai pengembalian untuk setiap iterasi di atas array haruslah item tersebut dikalikan dengan apa pun yang sudah ada di akumulator. Iterasi dan benar-benar menyimpan perkalian secara eksplisit dalam akumulator adalah apa yang terjadi di balik layar, dan merupakan salah satu alasan terbesar reduce() menjadi batu sandungan bagi pengembang JavaScript.

  Cara Berhenti Berlangganan Dari Pesan Teks Otomatis

Mengapa menggunakan pengurangan ()?

Itu pertanyaan yang sangat bagus dan sejujurnya, saya tidak punya jawaban yang pasti. Apa pun pengurangan () dapat dilakukan melalui loop, forEach (), dll. Namun, teknik tersebut menghasilkan lebih banyak kode, membuatnya sulit dibaca, terutama jika Anda sedang terburu-buru. Lalu ada kekhawatiran akan kekekalan: dengan pengurangan() dan fungsi serupa, Anda dapat yakin bahwa data asli Anda belum dimutasi; ini dengan sendirinya menghilangkan seluruh kelas bug, terutama pada aplikasi terdistribusi.

Terakhir, reduce() jauh lebih fleksibel, dalam arti akumulator bisa berupa objek, larik, atau bahkan fungsi jika diperlukan; hal yang sama berlaku untuk nilai awal dan bagian lain dari pemanggilan fungsi β€” hampir semua hal bisa masuk, dan hampir semua hal bisa keluar, jadi ada fleksibilitas ekstrim dalam mendesain kode yang dapat digunakan kembali.

Jika Anda masih belum yakin, tidak apa-apa juga; komunitas JavaScript sendiri terbagi tajam atas “kekompakan”, “keanggunan”, dan “kekuatan” dari pengurangan (), jadi tidak apa-apa jika Anda tidak menggunakannya. πŸ™‚ Tapi pastikan Anda melihat beberapa contoh rapi sebelum Anda memutuskan untuk mengurangi sampah ().

beberapa()

Misalkan Anda memiliki larik objek, dengan setiap objek mewakili seseorang. Anda ingin tahu apakah ada orang dalam larik yang berusia di atas 35 tahun. Perhatikan bahwa tidak perlu menghitung berapa banyak orang seperti itu, apalagi mengambil daftarnya. Apa yang kami katakan di sini setara dengan “satu atau lebih” atau “setidaknya satu”.

Bagaimana kamu melakukan ini?

Ya, Anda bisa membuat variabel flag dan mengulang array untuk menyelesaikan masalah ini seperti ini:

const persons = [
    {
        name: 'Person 1',
        age: 32
    },
    
    {
        name: 'Person 2',
        age: 40
    },
];

let foundOver35 = false;

for (let i = 0; i < persons.length; i ++) {
    if(persons[i].age > 35) {
        foundOver35 = true;
        break;
    }
}

if(foundOver35) {
    console.log("Yup, there are a few people here!")
}

Masalah? Kodenya terlalu C-like atau Java-like, menurut saya. “Verbose” adalah kata lain yang muncul di benak Anda. JS yang berpengalaman mungkin berpikir tentang “jelek”, “mengerikan”, dll. 😝 Dan memang demikian, saya berpendapat. Salah satu cara untuk memperbaiki potongan kode ini adalah dengan menggunakan sesuatu seperti map(), tetapi meskipun demikian solusinya agak kikuk.

Ternyata kita memiliki fungsi yang agak rapi bernama some() yang sudah tersedia dalam bahasa inti. Fungsi ini bekerja dengan array dan menerima fungsi “penyaringan” khusus, mengembalikan nilai Boolean benar atau salah. Pada dasarnya, itu melakukan apa yang telah kami coba lakukan selama beberapa menit terakhir, hanya dengan sangat ringkas dan elegan. Inilah cara kita dapat menggunakannya:

const persons = [
    {
        name: 'Person 1',
        age: 32
    },
    
    {
        name: 'Person 2',
        age: 40
    },
];

if(persons.some(person => {
    return person.age > 35
})) {
    console.log("Found some people!")
}

Masukan yang sama, hasil yang sama seperti sebelumnya; tetapi perhatikan pengurangan besar-besaran dalam kode! Perhatikan juga betapa drastisnya beban kognitif berkurang karena kita tidak perlu lagi mengurai kode baris demi baris seolah-olah kita sendiri yang menjadi penerjemahnya! Kode sekarang hampir terbaca seperti bahasa alami.

setiap()

Sama seperti some(), kami memiliki fungsi berguna lainnya yang disebut every(). Seperti yang bisa Anda tebak sekarang, ini juga mengembalikan nilai Boolean tergantung pada apakah semua item dalam array lulus tes yang diberikan. Tentu saja, sebagian besar tes untuk lulus disediakan sebagai fungsi anonim. Saya akan menghindarkan Anda dari kepedihan tentang seperti apa versi naif dari kode tersebut, jadi inilah cara every() digunakan:

const entries = [
    {
        id: 1
    },
    
    {
        id: 2
    },
    
    {
        id: 3  
    },
];

if(entries.every(entry => {
    return Number.isInteger(entry.id) && entry.id > 0;
})) {
    console.log("All the entries have a valid id")
}

Seperti yang sudah jelas, kode memeriksa semua objek dalam array untuk properti id yang valid. Definisi “valid” bergantung pada konteks masalahnya, tetapi seperti yang Anda lihat, untuk kode ini, saya menganggap bilangan bulat non-negatif. Sekali lagi, kita melihat betapa sederhana dan elegannya kode itu untuk dibaca, yang merupakan satu-satunya tujuan dari fungsi ini (dan yang serupa).

termasuk()

Bagaimana Anda memeriksa keberadaan sub-string dan elemen array? Nah, jika Anda seperti saya, Anda segera meraih indexOf() dan kemudian mencari dokumen untuk memberi tahu Anda kemungkinan nilai pengembaliannya. Ini adalah ketidaknyamanan yang cukup besar, dan nilai yang dikembalikan sulit untuk diingat (cepat β€” apa artinya proses mengembalikan 2 ke sistem operasi?).

Tapi ada alternatif bagus yang bisa kita manfaatkan: include(). Penggunaannya sesederhana namanya, dan kode yang dihasilkan sangat menghangatkan hati. Ingatlah bahwa pencocokan yang dilakukan oleh include() peka terhadap huruf besar-kecil, tetapi saya kira itulah yang kita semua harapkan secara intuitif. Dan sekarang, waktunya untuk beberapa kode!

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(4));
const name = "Ankush";
console.log(name.includes('ank')); // false, because first letter is in small caps
console.log(name.includes('Ank')); // true, as expected

Namun, jangan berharap terlalu banyak dari metode sederhana ini:

const user = {a: 10, b: 20};
console.log(user.includes('a')); // blows up, as objects don't have a "includes" method

Itu tidak bisa melihat ke dalam objek karena itu tidak ditentukan untuk objek. Tapi hei, kami tahu itu berfungsi pada array, jadi mungkin kami bisa melakukan beberapa tipu daya di sini. . . πŸ€”.

const persons = [{name: 'Phil'}, {name: 'Jane'}];
persons.includes({name: 'Phil'});

Jadi, apa yang terjadi ketika Anda menjalankan kode ini? Itu tidak meledak, tetapi hasilnya juga mengecewakan: salah. 😫😫 Sebenarnya, ini berkaitan dengan objek, penunjuk, dan bagaimana JavaScript melihat dan mengelola memori, yang merupakan dunianya sendiri. Jika Anda ingin menyelam lebih dalam, jangan ragu untuk terjun (mungkin mulai di sini), tapi saya akan berhenti di sini.

Kita dapat membuat kode di atas berperilaku jika kita menulis ulang sebagai berikut, tetapi pada titik ini, kurang lebih menjadi lelucon, menurut saya:

const phil = {name: 'Phil'};
const persons = [phil, {name: 'Jane'}];
persons.includes(phil); // true

Tetap saja, ini menunjukkan bahwa kita dapat membuat include() berfungsi pada objek, jadi saya kira ini bukan bencana total. πŸ˜„

mengiris()

Misalkan kita memiliki sebuah string, dan saya meminta Anda mengembalikan bagiannya yang dimulai dengan “r” dan diakhiri dengan “z” (karakter sebenarnya tidak penting). Bagaimana Anda mendekatinya? Mungkin Anda akan membuat string baru dan menggunakannya untuk menyimpan semua karakter yang diperlukan dan mengembalikannya. Atau jika Anda seperti kebanyakan programmer, Anda akan memberi saya dua indeks array sebagai gantinya: satu menunjukkan awal dari substring, yang lain menandai akhir.

  ASTC 3.0 Dijelaskan: Siaran TV Akan Datang ke Ponsel Anda

Kedua pendekatan ini baik-baik saja, tetapi ada konsep yang disebut slicing yang menawarkan solusi rapi dalam situasi seperti itu. Syukurlah, tidak ada teori yang rumit untuk diikuti; mengiris berarti persis seperti yang terdengar – membuat string/array yang lebih kecil dari yang diberikan, seperti kita membuat irisan buah. Mari kita lihat apa yang saya maksud, dengan bantuan contoh sederhana:

const headline = "And in tonight's special, the guest we've all been waiting for!";
const startIndex = headline.indexOf('guest');
const endIndex = headline.indexOf('waiting');
const newHeadline = headline.slice(startIndex, endIndex);
console.log(newHeadline); // guest we've all been

Saat kita mengiris(), kita menyediakan dua indeks ke JavaScript β€” satu di mana kita ingin memulai pemotongan, dan yang lain di mana kita ingin menghentikannya. Tangkapan dengan slice() adalah bahwa indeks akhir tidak termasuk dalam hasil akhir, itulah sebabnya kita melihat bahwa kata “menunggu” hilang dari judul baru dalam kode di atas.

Konsep seperti mengiris lebih menonjol dalam bahasa lain, khususnya Python. Jika Anda bertanya kepada pengembang tersebut, mereka akan mengatakan bahwa mereka tidak dapat membayangkan hidup tanpa fungsi ini, dan memang demikian ketika bahasa tersebut menyediakan sintaks yang sangat rapi untuk pemotongan.

Mengiris rapi dan sangat nyaman, dan tidak ada alasan untuk tidak menggunakannya. Ini juga bukan gula sintaksis yang penuh dengan penalti kinerja, karena ini membuat salinan dangkal dari larik/string asli. Untuk pengembang JavaScript, saya sangat menyarankan untuk membiasakan diri dengan slice() dan menambahkannya ke gudang senjata Anda!

sambatan()

Metode splice() terdengar seperti sepupu dari slice(), dan dalam beberapa hal, kita dapat membantahnya. Keduanya membuat array/string baru dari yang asli, dengan satu perbedaan kecil tapi penting β€” splice() menghapus, mengubah, atau menambahkan elemen tetapi memodifikasi array asli. “Penghancuran” array asli ini dapat menimbulkan masalah besar jika Anda tidak berhati-hati atau tidak memahami salinan dan referensi yang mendalam. Saya bertanya-tanya apa yang menghentikan devs dari menggunakan pendekatan yang sama seperti untuk slice() dan membiarkan array asli tidak tersentuh, tapi saya rasa kita bisa lebih memaafkan terhadap suatu bahasa dibuat hanya dalam sepuluh hari.

Terlepas dari keluhan saya, mari kita lihat cara kerja splice(). Saya akan menunjukkan contoh di mana kami menghapus beberapa elemen dari array, karena ini adalah penggunaan paling umum yang akan Anda temukan untuk metode ini. Saya juga tidak akan memberikan contoh penambahan dan penyisipan karena ini dapat dengan mudah dicari dan juga sederhana.

const items = ['eggs', 'milk', 'cheese', 'bread', 'butter'];
items.splice(2, 1);
console.log(items); // [ 'eggs', 'milk', 'bread', 'butter' ]

Panggilan ke splice() di atas mengatakan: mulai dari indeks 2 (tempat ketiga, yaitu) dari array, dan hapus satu item. Dalam larik yang diberikan, ‘keju’ adalah item ketiga, sehingga dihapus dari larik dan larik item dipersingkat, seperti yang diharapkan. Omong-omong, item yang dihapus dikembalikan oleh splice() dalam bentuk atau larik, jadi jika kita mau, kita bisa menangkap ‘keju’ dalam sebuah variabel.

Dalam pengalaman saya, indexOf() dan splice() memiliki sinergi yang hebat β€” kami menemukan indeks suatu item dan kemudian menghapusnya dari array yang diberikan. Namun, perhatikan bahwa ini bukan metode yang paling efisien, dan seringkali menggunakan kunci objek (setara dengan peta hash) jauh lebih cepat.

menggeser()

shift() adalah semacam metode kenyamanan dan digunakan untuk menghapus elemen pertama dari sebuah array. Perhatikan bahwa hal yang sama dapat dilakukan dengan splice(), tetapi shift() sedikit lebih mudah diingat dan intuitif ketika yang perlu Anda lakukan hanyalah memotong elemen pertama.

const items = ['eggs', 'milk', 'cheese', 'bread', 'butter'];
items.shift()
console.log(items); // [ 'milk', 'cheese', 'bread', 'butter' ]

unshift()

Sama seperti shift() menghapus elemen pertama dari array, unshift() menambahkan elemen baru ke awal array. Penggunaannya sederhana dan ringkas:

const items = ['eggs', 'milk'];
items.unshift('bread')
console.log(items); // [ 'bread', 'eggs', 'milk' ]

Meskipun demikian, saya tidak dapat menahan diri dan memperingatkan mereka yang baru dalam permainan: tidak seperti metode push() dan pop() yang populer, shift() dan unshift() sangat tidak efisien (karena cara kerja algoritme yang mendasarinya). Jadi, jika Anda beroperasi pada array besar (katakanlah, 2000+ item), terlalu banyak dari panggilan fungsi ini dapat menghentikan aplikasi Anda.

mengisi()

Terkadang Anda perlu mengubah beberapa item menjadi satu nilai atau bahkan “mengatur ulang” seluruh larik. Dalam situasi tersebut, fill() menyelamatkan Anda dari loop dan kesalahan off-by-one. Itu dapat digunakan untuk mengganti beberapa atau semua array dengan nilai yang diberikan. Mari kita lihat beberapa contoh:

const heights = [1, 2, 4, 5, 6, 7, 1, 1];
heights.fill(0);
console.log(heights); // [0, 0, 0, 0, 0, 0, 0, 0]

const heights2 = [1, 2, 4, 5, 6, 7, 1, 1];
heights2.fill(0, 4);
console.log(heights2); // [1, 2, 4, 5, 0, 0, 0, 0]

Fungsi lain yang layak disebut

Sementara daftar di atas adalah apa yang sebagian besar pengembang JavaScript temui dan gunakan dalam karir mereka, itu tidak berarti lengkap. Ada begitu banyak fungsi (metode) yang lebih kecil namun bermanfaat dalam JavaScript sehingga tidak mungkin untuk membahas semuanya dalam satu artikel. Yang mengatakan, beberapa yang terlintas dalam pikiran adalah sebagai berikut:

  • membalik()
  • menyortir()
  • entri()
  • mengisi()
  • Temukan()
  • datar()

Saya mendorong Anda untuk setidaknya mencari ini sehingga Anda memiliki gagasan bahwa kenyamanan seperti ini ada.

Kesimpulan

JavaScript adalah bahasa yang besar, meskipun sejumlah kecil konsep inti untuk dipelajari. Banyaknya fungsi (metode) yang tersedia bagi kita merupakan bagian terbesar dari ukuran besar ini. Namun, karena JavaScript adalah bahasa kedua bagi sebagian besar pengembang, kami tidak menyelam cukup dalam, melewatkan banyak fungsi indah dan berguna yang ditawarkannya. Sebenarnya, hal yang sama berlaku untuk konsep pemrograman fungsional, tapi itu topik untuk lain hari! πŸ˜…

Kapan pun Anda bisa, luangkan waktu untuk menjelajahi bahasa inti (dan jika mungkin, pustaka utilitas terkenal seperti Lodash). Bahkan beberapa menit yang dihabiskan untuk melakukan upaya ini akan menghasilkan peningkatan produktivitas yang besar dan kode yang jauh lebih bersih dan ringkas.