124 lines
2.9 KiB
Markdown
124 lines
2.9 KiB
Markdown
---
|
|
id: 587d7b7c367417b2b2512b18
|
|
title: Add Key-Value Pairs to JavaScript Objects
|
|
challengeType: 1
|
|
forumTopicId: 301153
|
|
---
|
|
|
|
# --description--
|
|
|
|
At their most basic, objects are just collections of <dfn>key-value</dfn> pairs. In other words, they are pieces of data (<dfn>values</dfn>) mapped to unique identifiers called <dfn>properties</dfn> (<dfn>keys</dfn>). Take a look at an example:
|
|
|
|
```js
|
|
const tekkenCharacter = {
|
|
player: 'Hwoarang',
|
|
fightingStyle: 'Tae Kwon Doe',
|
|
human: true
|
|
};
|
|
```
|
|
|
|
The above code defines a Tekken video game character object called `tekkenCharacter`. It has three properties, each of which map to a specific value. If you want to add an additional property, such as "origin", it can be done by assigning `origin` to the object:
|
|
|
|
```js
|
|
tekkenCharacter.origin = 'South Korea';
|
|
```
|
|
|
|
This uses dot notation. If you were to observe the `tekkenCharacter` object, it will now include the `origin` property. Hwoarang also had distinct orange hair. You can add this property with bracket notation by doing:
|
|
|
|
```js
|
|
tekkenCharacter['hair color'] = 'dyed orange';
|
|
```
|
|
|
|
Bracket notation is required if your property has a space in it or if you want to use a variable to name the property. In the above case, the property is enclosed in quotes to denote it as a string and will be added exactly as shown. Without quotes, it will be evaluated as a variable and the name of the property will be whatever value the variable is. Here's an example with a variable:
|
|
|
|
```js
|
|
const eyes = 'eye color';
|
|
|
|
tekkenCharacter[eyes] = 'brown';
|
|
```
|
|
|
|
After adding all the examples, the object will look like this:
|
|
|
|
```js
|
|
{
|
|
player: 'Hwoarang',
|
|
fightingStyle: 'Tae Kwon Doe',
|
|
human: true,
|
|
origin: 'South Korea',
|
|
'hair color': 'dyed orange',
|
|
'eye color': 'brown'
|
|
};
|
|
```
|
|
|
|
# --instructions--
|
|
|
|
A `foods` object has been created with three entries. Using the syntax of your choice, add three more entries to it: `bananas` with a value of `13`, `grapes` with a value of `35`, and `strawberries` with a value of `27`.
|
|
|
|
# --hints--
|
|
|
|
`foods` should be an object.
|
|
|
|
```js
|
|
assert(typeof foods === 'object');
|
|
```
|
|
|
|
The `foods` object should have a key `"bananas"` with a value of `13`.
|
|
|
|
```js
|
|
assert(foods.bananas === 13);
|
|
```
|
|
|
|
The `foods` object should have a key `"grapes"` with a value of `35`.
|
|
|
|
```js
|
|
assert(foods.grapes === 35);
|
|
```
|
|
|
|
The `foods` object should have a key `"strawberries"` with a value of `27`.
|
|
|
|
```js
|
|
assert(foods.strawberries === 27);
|
|
```
|
|
|
|
The key-value pairs should be set using dot or bracket notation.
|
|
|
|
```js
|
|
assert(
|
|
code.search(/bananas:/) === -1 &&
|
|
code.search(/grapes:/) === -1 &&
|
|
code.search(/strawberries:/) === -1
|
|
);
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```js
|
|
let foods = {
|
|
apples: 25,
|
|
oranges: 32,
|
|
plums: 28
|
|
};
|
|
|
|
// Only change code below this line
|
|
|
|
// Only change code above this line
|
|
|
|
console.log(foods);
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```js
|
|
let foods = {
|
|
apples: 25,
|
|
oranges: 32,
|
|
plums: 28
|
|
};
|
|
|
|
foods['bananas'] = 13;
|
|
foods['grapes'] = 35;
|
|
foods['strawberries'] = 27;
|
|
```
|