Objek JavaScript, Tanda Kurung Persegi, dan Algoritma

Salah satu aspek JavaScript yang paling kuat adalah kemampuan untuk secara dinamis merujuk ke properti objek. Pada artikel ini kita akan melihat cara kerjanya dan keuntungan apa yang mungkin diberikannya kepada kita. Kami akan melihat sekilas beberapa struktur data yang digunakan dalam Ilmu Komputer. Selain itu kita akan melihat sesuatu yang disebut notasi O Besar yang digunakan untuk menggambarkan kinerja suatu algoritma.

Objek intro

Mari kita mulai dengan membuat objek sederhana yang mewakili sebuah mobil. Setiap benda memiliki sesuatu yang disebut properties. Properti adalah variabel yang dimiliki suatu objek. Objek mobil kami akan memiliki tiga sifat: make, modeldan color.

Mari kita lihat seperti apa:

const car = { make: 'Ford', model: 'Fiesta', color: 'Red'};

Kita bisa merujuk ke properti individu suatu objek menggunakan notasi titik. Sebagai contoh, jika kita ingin mengetahui apa warna mobil kita, kita dapat menggunakan notasi titik seperti ini car.color.

Kami bahkan dapat mengeluarkannya menggunakan console.log:

console.log(car.color); //outputs: Red

Cara lain untuk merujuk ke properti menggunakan notasi kurung siku:

console.log(car['color']); //outputs: Red

Dalam contoh di atas, kami menggunakan nama properti sebagai string di dalam tanda kurung siku untuk mendapatkan nilai yang sesuai dengan nama properti tersebut. Hal yang berguna tentang notasi braket persegi adalah kita juga bisa menggunakan variabel untuk mendapatkan properti secara dinamis.

Artinya, daripada meng-hardcode nama properti tertentu, kita dapat menetapkannya sebagai string dalam variabel:

const propertyName = 'color';const console.log(car[propertyName]); //outputs: Red

Menggunakan pencarian dinamis dengan notasi kurung siku

Mari kita lihat contoh di mana kita bisa menggunakan ini. Katakanlah kita menjalankan sebuah restoran dan kita ingin mendapatkan harga barang-barang di menu kita. Salah satu cara melakukan ini adalah menggunakan if/elsepernyataan.

Mari kita tulis fungsi yang akan menerima nama item dan mengembalikan harga:

function getPrice(itemName){ if(itemName === 'burger') { return 10; } else if(itemName === 'fries') { return 3; } else if(itemName === 'coleslaw') { return 4; } else if(itemName === 'coke') { return 2; } else if(itemName === 'beer') { return 5; }}

Meskipun pendekatan di atas berhasil, itu tidak ideal. Kami telah melakukan hardcode menu dalam kode kami. Sekarang jika menu kita berubah, kita harus menulis ulang kode kita dan menerapkannya kembali. Selain itu, kami dapat memiliki menu yang panjang dan harus menulis semua kode ini akan merepotkan.

Pendekatan yang lebih baik adalah memisahkan data dan logika kita. Data akan berisi menu kita dan logikanya akan mencari harga dari menu itu.

Kita dapat merepresentasikan the menusebagai objek di mana nama propertinya, juga dikenal sebagai key, sesuai dengan sebuah nilai.

Dalam hal ini, kuncinya adalah nama item dan nilainya menjadi harga item:

const menu = { burger: 10, fries: 3, coleslaw: 4, coke: 2, beer: 5};

Dengan menggunakan notasi kurung siku, kita dapat membuat fungsi yang akan menerima dua argumen:

  • objek menu
  • string dengan nama item

dan mengembalikan harga barang itu:

const menu = { burger: 10, fries: 3, coleslaw: 4, coke: 2, beer: 5};
function getPrice(itemName, menu){ const itemPrice = menu[itemName]; return itemPrice;}
const priceOfBurger = getPrice('burger', menu);console.log(priceOfBurger); // outputs: 10

Hal yang rapi tentang pendekatan ini adalah kita telah memisahkan data kita dari logika kita. Dalam contoh ini, data berada dalam kode kita, tetapi bisa juga dengan mudah berasal dari database atau API. Ini tidak lagi digabungkan dengan logika pencarian kami yang mengubah nama item menjadi harga item.

Struktur data dan algoritme

Peta dalam istilah Ilmu Komputer adalah struktur data yang merupakan kumpulan pasangan kunci / nilai di mana setiap kunci dipetakan ke nilai yang sesuai. Kita dapat menggunakannya untuk melihat nilai yang sesuai dengan kunci tertentu. Inilah yang kami lakukan di contoh sebelumnya. Kami memiliki kunci yang merupakan nama item dan kami dapat mencari harga yang sesuai dari item itu menggunakan objek menu kami. Kami menggunakan objek untuk mengimplementasikan struktur data peta.

Mari kita lihat contoh mengapa kita mungkin ingin menggunakan peta. Katakanlah kita menjalankan toko buku dan memiliki daftar buku. Setiap buku memiliki pengidentifikasi unik yang disebut Nomor Buku Standar Internasional (ISBN), yaitu nomor 13 digit. Kami menyimpan buku kami dalam larik dan ingin dapat mencarinya menggunakan ISBN.

Salah satu cara untuk melakukannya adalah dengan mengulang array, memeriksa nilai ISBN setiap buku dan jika cocok mengembalikannya:

const books = [{ isbn: '978-0099540946', author: 'Mikhail Bulgakov', title: 'Master and Margarita'}, { isbn: '978-0596517748', author: 'Douglas Crockford', title: 'JavaScript: The Good Parts'}, { isbn: '978-1593275846', author: 'Marijn Haverbeke', title: 'Eloquent JavaScript'}];
function getBookByIsbn(isbn, books){ for(let i = 0; i < books.length; i++){ if(books[i].isbn === isbn) { return books[i]; } }}
const myBook = getBookByIsbn('978-1593275846', books);

Itu berfungsi dengan baik dalam contoh ini karena kami hanya memiliki tiga buku (ini adalah toko buku kecil). Namun, jika kami adalah Amazon, mengiterasi jutaan buku bisa sangat lambat dan mahal secara komputasi.

Notasi Big O digunakan dalam Ilmu Komputer untuk menggambarkan kinerja suatu algoritma. Misalnya jika n adalah jumlah buku dalam koleksi kita, biaya menggunakan iterasi untuk mencari buku dalam skenario terburuk (buku yang kita cari adalah yang terakhir dalam daftar) akan menjadi O (n) . Itu berarti jika jumlah buku dalam koleksi kami berlipat ganda, biaya untuk menemukan buku menggunakan iterasi juga akan berlipat ganda.

Mari kita lihat bagaimana kita dapat membuat algoritma kita lebih efisien dengan menggunakan struktur data yang berbeda.

Seperti yang telah dibahas, peta dapat digunakan untuk mencari nilai yang sesuai dengan kunci. Kita bisa menyusun data kita sebagai peta daripada array dengan menggunakan objek.

Kuncinya adalah ISBN dan nilainya akan menjadi objek buku yang sesuai:

const books = { '978-0099540946':{ isbn: '978-0099540946', author: 'Mikhail Bulgakov', title: 'Master and Margarita' }, '978-0596517748': { isbn: '978-0596517748', author: 'Douglas Crockford', title: 'JavaScript: The Good Parts' }, '978-1593275846': { isbn: '978-1593275846', author: 'Marijn Haverbeke', title: 'Eloquent JavaScript' }};
function getBookByIsbn(isbn, books){ return books[isbn];}
const myBook = getBookByIsbn('978-1593275846', books);

Alih-alih menggunakan iterasi, sekarang kita dapat menggunakan pencarian peta sederhana dengan ISBN untuk mendapatkan nilai kita. Kami tidak perlu lagi memeriksa nilai ISBN untuk setiap objek. Kami mendapatkan nilai langsung dari peta menggunakan kunci.

Dalam hal kinerja, pencarian peta akan memberikan peningkatan besar atas iterasi. Ini karena pencarian peta memiliki biaya konstan dalam hal penghitungan. Ini dapat ditulis menggunakan notasi Big O sebagai O (1) . Tidak masalah jika kita memiliki tiga atau tiga juta buku, kita bisa mendapatkan buku yang kita inginkan secepatnya dengan melakukan pencarian peta menggunakan kunci ISBN.

Rekap

  • We have seen we can access the values of object properties using dot notation and square bracket notation
  • We learned how we can dynamically look up values of property by using variables with square bracket notation
  • We have also learned that a map datastructure maps keys to values. We can use keys to directly look up values in a map which we implement using an object.
  • We had a first glance at how algorithm performance is described using Big O notation. In addition, we saw how we can improve the performance of a search by converting an array of objects into a map and using direct lookup rather than iteration.

Want to test your new found skills? Try the Crash Override exercise on Codewars.

Want to learn how to write web applications using JavaScript? I run Constructor Labs, a 12 week JavaScript coding bootcamp in London. The technologies taught include HMTL, CSS, JavaScript, React, Redux, Node and Postgres. Everything you need to create an entire web app from scratch and get your first job in the industry. Fees are £3,000 and next cohort starts on 29th May. Applications are open now.