Objects: Object properties

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:

0: Introduction
1: How to create an object
2: ▶︎ Object properties
3: Objects are passed by reference
4: Methods
5: Passing objects as function arguments or returning objects from a function
6: Accessing a property of the object inside a method using `this`
7: Object destructuring
8: Cloning objects
9: Sort an array of objects by a property value
10: Merging two objects into one
11: apply, call, bind
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!