Objects have properties, which are composed by a label associated with a value.
The value of a property can be of any type, which means that it can be an array, a function, and it can even be an object, as objects can nest other objects.
Take this object:
const car = {
}
We can define a color property in this way:
const car = {
color: 'blue'
}
Now we have a car object with a property named color, with value blue.
Properties label names can be any valid variable name.
This means any string without spaces, hyphens, or any other special character, that starts with a character or an underscore _.
If you want to use a label name not valid as a variable name, you can use quotes around it. Here’s an example with a space in the property label:
const car = {
'the color': 'blue'
}
otherwise you’d get a syntax error like this:
SyntaxError: Unexpected token, expected "," (3:6)
1 |
2 | const car = {
> 3 | the color: 'blue'
| ^
4 | }
Defining multiple properties
When you have multiple properties on an object, we separate each property with a comma:
const car = {
color: 'blue',
'the color': 'blue'
}
Remember: a comma, not a semicolon.
This is not a valid syntax:
const car = {
color: 'blue';
'the color': 'blue';
}
and if you try executing it, you will get this error:
SyntaxError: Unexpected token, expected "," (2:15)
1 | const car = {
> 2 | color: 'blue';
| ^
3 | 'the color': 'blue';
4 | }
Getting the value of a property
We can retrieve the value of a property using 2 different syntaxes.
The first is dot notation:
car.color //'blue'
The second (which is the only one we can use for properties with invalid names), is to use square brackets:
car['the color'] //'blue'
If you access an unexisting property, you’ll get the undefined value:
car.brand //undefined
Setting the value of a property
You can set the value of a property when you define the object, as we saw with
const car = {
color: 'blue'
}
and you can always update it later on with the dot syntax, or with the square brackets syntax:
const car = {
color: 'blue'
}
car.color = 'yellow'
car['color'] = 'red'
Adding new properties to an object
And you can also add new properties to an existing object, after it’s been defined:
const car = {
}
car.model = 'Fiesta'
console.log(car.model) //'Fiesta'
Deleting a property from an object
The delete JavaScript operator is used to delete a property from an object.
Say you have this object:
const car = {
model: 'Fiesta',
color: 'green'
}
You can delete any property from it, or method, using the delete operator:
delete car.model
You can also reference the property/method using the square brackets syntax:
delete car['color']