Tutorial Tombol Objek JavaScript - Cara Menggunakan Pasangan Nilai-Kunci JS

Anda dapat mengelompokkan data terkait menjadi satu struktur data dengan menggunakan objek JavaScript, seperti ini:

const desk = { height: "4 feet", weight: "30 pounds", color: "brown", material: "wood", }; 

Sebuah objek berisi properti, atau pasangan nilai kunci. The deskobjek di atas memiliki empat sifat. Setiap properti memiliki nama, yang juga disebut kunci, dan nilai yang sesuai.

Misalnya, kuncinya heightmemiliki nilai "4 feet". Bersama-sama, kunci dan nilai membentuk satu properti.

height: "4 feet", 

The deskobjek berisi data tentang meja. Faktanya, inilah alasan mengapa Anda menggunakan objek JavaScript: untuk menyimpan data. Ini juga mudah untuk mengambil data yang Anda simpan dalam suatu objek. Aspek-aspek ini membuat objek sangat berguna.

Artikel ini akan membantu Anda memahami dan menjalankan objek JavaScript:

  • bagaimana membuat sebuah objek
  • cara menyimpan data dalam suatu objek
  • dan mengambil data darinya.

Mari kita mulai dengan membuat sebuah objek.

Cara Membuat Objek di JavaScript

Saya akan membuat sebuah objek bernama di pizzabawah ini, dan menambahkan pasangan nilai kunci ke dalamnya.

const pizza = { topping: "cheese", sauce: "marinara", size: "small" }; 

Kuncinya ada di sebelah kiri titik dua :dan nilainya ada di sebelah kanannya. Setiap pasangan nilai kunci adalah a property. Ada tiga properti dalam contoh ini:

  • Topping kunci memiliki nilai “keju” .
  • Saus kuncinya memiliki nilai “marinara” .
  • Ukuran kunci memiliki nilai “kecil” .

Setiap properti dipisahkan dengan koma. Semua properti dibungkus dengan kurung kurawal.

Ini adalah sintaks objek dasar. Namun ada beberapa aturan yang perlu diingat saat membuat objek JavaScript.

Kunci Objek di JavaScript

Setiap kunci dalam objek JavaScript Anda harus berupa string, simbol, atau angka.

Perhatikan contoh di bawah ini. Nama-nama kunci 1dan 2sebenarnya dipaksa menjadi string.

const shoppingCart = { 1: "apple", 2: "oranges" }; 

Perbedaannya diperjelas saat Anda mencetak objek.

console.log(shoppingCart); //Result: { '1': 'apple', '2': 'oranges' } 

Ada aturan lain yang perlu diingat tentang nama kunci: jika nama kunci Anda berisi spasi, Anda perlu membungkusnya dengan tanda kutip.

Perhatikan programmerobjek di bawah ini. Perhatikan nama kunci terakhir,"current project name". Nama kunci ini mengandung spasi jadi, saya membungkusnya dengan tanda kutip.

const programmer = { firstname: "Phil", age: 21, backendDeveloper: true, languages: ["Python", "JavaScript", "Java", "C++"], "current project name": "The Amazing App" }; 

Nilai Objek di JavaScript

Nilai, di sisi lain, bisa berupa tipe data apa pun, termasuk larik, angka, atau boolean. Nilai-nilai dalam contoh di atas berisi tipe-tipe ini: string, integer, boolean, dan array.

Anda bahkan dapat menggunakan fungsi sebagai nilai, yang dalam hal ini disebut sebagai metode. sounds(), di objek di bawah ini, adalah sebuah contoh.

const animal = { type: "cat", name: "kitty", sounds() { console.log("meow meow") } }; 

Sekarang katakanlah Anda ingin menambah atau menghapus pasangan nilai kunci. Atau Anda hanya ingin mengambil nilai objek.

Anda dapat melakukan hal-hal ini dengan menggunakan notasi titik atau tanda kurung, yang akan kita bahas selanjutnya.

Bagaimana Notasi Titik dan Notasi Braket Bekerja di JavaScript

Notasi titik dan tanda kurung siku adalah dua cara untuk mengakses dan menggunakan properti objek. Anda mungkin akan lebih sering menggunakan notasi titik, jadi kita akan mulai dengan itu.

Bagaimana Menambahkan Pasangan Nilai-Kunci dengan Notasi Titik di JavaScript

Saya akan membuat kosong bookobjek di bawah.

const book = {}; 

Untuk menambahkan pasangan nilai kunci menggunakan notasi titik, gunakan sintaks:

objectName.keyName = value

Ini adalah kode untuk menambahkan kunci (penulis) dan nilai ("Jane Smith") ke bookobjek:

book.author = "Jane Smith"; 

Berikut uraian kode di atas:

  • book adalah nama objeknya
  • . (dot)
  • author adalah nama kuncinya
  • = (sama dengan)
  • "Jane Smith" adalah nilainya

Saat saya mencetak objek buku, saya akan melihat pasangan nilai kunci yang baru ditambahkan.

console.log(book); //Result: { author: 'Jane Smith' } 

Saya akan menambahkan pasangan nilai kunci lain ke bookobjek.

book.publicationYear = 2006; 

The bookobjek sekarang memiliki dua sifat.

console.log(book); //Result: { author: 'Jane Smith', publicationYear: 2006 } 

Cara Mengakses Data di Objek JavaScript Menggunakan Notasi Titik

Anda juga dapat menggunakan notasi titik pada kunci untuk mengakses nilai terkait.

Pertimbangkan ini basketballPlayerobyek.

const basketballPlayer = { name: "James", averagePointsPerGame: 20, height: "6 feet, 2 inches", position: "shooting guard" }; 

Katakanlah Anda ingin mendapatkan kembali nilai "shooting guard". Ini adalah sintaks yang digunakan:

objectName.keyName

Mari kita gunakan sintaks ini untuk digunakan untuk mendapatkan dan mencetak nilai "shooting guard".

console.log(basketballPlayer.position); //Result: shooting guard 

Berikut uraian kode di atas:

  • basketballPlayer adalah nama objeknya
  • . (dot)
  • position adalah nama kuncinya

Ini contoh lainnya.

console.log(basketballPlayer.name); //Result: James 

Cara Menghapus Pasangan Nilai-Kunci di JavaScript

Untuk menghapus pasangan nilai kunci, gunakan deleteoperator. Ini sintaksnya:

delete objectName.keyName

Jadi untuk menghapus file heightkey and its value from the basketballPlayer object, you’d write this code:

delete basketballPlayer.height; 

As a result, the basketballPlayer object now has three key-value pairs.

console.log(basketballPlayer); //Result: { name: 'James', averagePointsPerGame: 20, position: 'shooting guard' } 

You’ll probably find yourself reaching for dot notation frequently, though there are certain requirements to be aware of.

When using dot notation, key names can’t contain spaces, hyphens, or start with a number.

For example, say I try to add a key that contains spaces using dot notation. I’ll get an error.

basketballPlayer.shooting percentage = "75%"; //Results in an error 

So dot notation won’t work in every situation. That’s why there’s another option: bracket notation.

How to Add a Key-Value Pair Using Bracket Notation in JavaScript

Just like dot notation, you can use bracket notation to add a key-value pair to an object.

Bracket notation offers more flexibility than dot notation. That’s because key names can include spaces and hyphens, and they can start with numbers.

I'll create an employeeobject below.

const employee = {}; 

Now I want to add a key-value pair using bracket notation. This is the syntax:

objectName[“keyName”] = value

So this is how I’d add the key (sales) and value (“occupation”) to the employee object:

employee["occupation"] = "sales"; 

Here's a breakdown of the above code:

  • employee is the object's name
  • "occupation" is the key name
  • = (equals)
  • "sales" is the value

Below are several more examples that use bracket notation's flexibility to add a variety of key-value pairs.

//Add multi-word key name employee["travels frequently"] = true; //Add key name that starts with a number and includes a hyphen employee["1st-territory"] = "Chicago"; //Add a key name that starts with a number employee["25"] = "total customers"; 

When I print the employee object, it looks like this:

{ '25': 'total customers', occupation: 'sales', 'travels frequently': true, '1st-territory': 'Chicago' } 

With this information in mind, we can add the “shooting percentage” key to the basketballPlayer object from above.

const basketballPlayer = { name: "James", averagePointsPerGame: 20, height: "6 feet, 2 inches", position: "shooting guard" }; 

You may remember that dot notation left us with an error when we tried to add a key that included spaces.

basketballPlayer.shooting percentage = "75%"; //Results in an error 

But bracket notation leaves us error-free, as you can see here:

basketballPlayer["shooting percentage"] = "75%"; 

This is the result when I print the object:

{ name: 'James', averagePointsPerGame: 20, height: '6 feet, 2 inches', position: 'shooting guard', 'shooting percentage': '75%' } 

How to Access Data in a JavaScript Object Using Bracket Notation

You can also use bracket notation on a key to access the related value.

Recall the animal object from the start of the article.

const animal = { type: "cat", name: "kitty", sounds() { console.log("meow meow") } }; 

Let's get the value associated with the key, name. To do this, wrap the key name quotes and put it in brackets. This is the syntax:

objectName[“keyName”]

Here's the code you'd write with bracket notation: animal["name"];.

This is a breakdown of the above code:

  • animal is the object's name
  • ["name"] is the key name enclosed in square brackets

Here’s another example.

console.log(animal["sounds"]()); //Result: meow meow undefined 

Note that sounds()is a method, which is why I added the parentheses at the end to invoke it.

This is how you’d invoke a method using dot notation.

console.log(animal.sounds()); //Result: meow meow undefined 

JavaScript Object Methods

You know how to access specific properties. But what if you want all of the keys or all of the values from an object?

There are two methods that will give you the information you need.

const runner = { name: "Jessica", age: 20, milesPerWeek: 40, race: "marathon" }; 

Use the Object.keys() method to retrieve all of the key names from an object.

This is the syntax:

Object.keys(objectName)

We can use this method on the above runner object.

Object.keys(runner); 

If you print the result, you’ll get an array of the object’s keys.

console.log(Object.keys(runner)); //Result: [ 'name', 'age', 'milesPerWeek', 'race' ] 

Likewise, you can use the Object.values() method to get all of the values from an object. This is the syntax:

Object.values(objectName)

Now we'll get all of the values from the runner object.

console.log(Object.values(runner)); //Result: [ 'Jessica', 20, 40, 'marathon' ] 

We’ve covered a lot of ground. Here’s a summary of the key ideas:

Objects:

  • Use objects to store data as properties (key-value pairs).
  • Key names must be strings, symbols, or numbers.
  • Values can be any type.

Access object properties:

  • Dot notation: objectName.keyName
  • Bracket notation: objectName[“keyName”]

Delete a property:

  • delete objectName.keyName

There’s a lot you can do with objects. And now you’ve got some of the basics so you can take advantage of this powerful JavaScript data type.

I write about learning to program, and the best ways to go about it on amymhaddad.com. I also tweet about programming, learning, and productivity: @amymhaddad.