Understanding Objects In Javascript

Here in the diagram we have a car. It’s color is yellow. It has four wheels. Model of the car is beetle and is manufactured by Volkswagen.

From the description we can say that the name of the property is color and the value of that property is yellow. Let me illustrate that in the table form.

In javascript we can group these name and value of property together with object to create the model of that car.

let car = {
  color: "yellow",
  wheels: 4,
  automaker: "volkswagen",
  model: "beetle"
}

So, what is an object?

Object is a one type of javascript data structure. It holds collection of properties or related data. It also holds methods(function) which we will discuss later.

How to create an object in javascript?

There are many different ways to create(or declare) an object in javascript. Here we will use literal notation i.e we will create object with properties separated by comma inside a opening and closing curly braces.

let car = {
  color: "yellow",
  wheels: 4,
  automaker: "volkswagen",
  model: "beetle"
}

Every property is a key:value pair.

Here are few things to consider.

Every property name must be unique.

var anime = {
  name: ‘dragonball’,
  name: ‘one piece’
}
console.log(anime);    // { name: ‘one piece’ }

Order that we write properties don’t matter. You can write any property first or last. It has no significance.

Except for the last property, we must use comma after every property (key:value pair)

If there is only one property then you don’t need comma but putting one will not give error either. Javascript understands that it is the end of key value pair.

Accessing/Retrieving Properties of Object

Object properties can be accessed in two ways dot notation and bracket.

var player = {
  name: 'messi',
  position: 'forward',
 'current club': 'Barcelona FC',
  10: 'jersey number'
}

dot notation syntax

console.log(player.name); // messi

console.log(player.position); // forward

square bracket syntax

console.log(player['name']); //messi

console.log(player['position']); //forward

But there are certain cases where we cannot access property of object with dot notation.

console.log(player.10) ; //Uncaught SyntaxError: Unexpected number

We get this error because every key in object (except Symbols) are converted into strings. So when we use number 10, it is converted string and not a number anymore.

console.log(player.current club) // Uncaught SyntaxError: Unexpected identifier

In javascript, identifier (variable names) cannot have space and cannot start with a number but we can have those invalid identifier as key in object if we put them inside quotation marks. These sort of keys cannot be accessed with dot notation.

To access such object properties we have to use square bracket syntax.

console.log(player[10]); // jersey number

console.log(player[‘current club’]; // Barcelona FC

If you try to access property that does not exist, you will get undefined.

Adding Object Properties

You can use either dot notation or square bracket syntax to add new properties.

var player = {
  name: 'messi',
  position: 'forward',
 'current club': 'Barcelona FC',
 10: ‘jersey number’
}

player[‘playing status’] = true;
player.goals = 368;

console.log(player);

var player = {
  name: 'messi',
  position: 'forward',
  'current club': 'Barcelona FC',
  10: 'jersey number',
  'playing status': true,
  goals: 368
}

Updating Object Properties

For updating, first access the properties and assign it to a new value with equal operator.

var player = {
  name: 'ronaldo',
  position: 'forward',
  'current club': 'Real Madrid',
}

player.name = 'Cristiano Ronaldo';
player['current club'] = 'Juventus';

console.log(player);

var player = {
  name: 'Cristiano Ronaldo';
  position: 'forward',
  'current club': 'Juventus'
}

Method

So far in our example,property values are either string,number or boolean but we can also have functions as property value. They are called method.

var batman = {
  firstName: 'Bruce',
  lastName: 'Wayne',
  fullName: function(){
    console.log(this.firstName+" "+ this.lastName);
  }
}

batman.fullName();    // Bruce Wayne

You can access method property only with dot notation.

‘this’ keyword in the code example above refers to the object batman. So, this.firstName and this.lastName are referring to firstName and lastName key of batman object. Therefore, we can rewrite the method in this style as well.

fullName: function(){
  console.log(batman.firstName+" "+ batman.lastName);
}

But using ‘this’ keyword gives you flexibility.