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']

Lessons in this unit: