JavaScript Objects

What is Objects in JavaScript

JavaScript variables can hold different data types: numbers, strings, objects and more.

JavaScript object is a non-primitive data-type that allows you to store multiple collections of data.

In JavaScript objects are the most used data types.

In JavaScript, objects are king. If you understand objects, you understand JavaScript.

Note: If you are familiar with other programming languages, JavaScript objects are a bit different. You do not need to create classes in order to create objects.

In JavaScript, almost “everything” is an object.

• Booleans can be objects (if defined with the new keyword)
• Numbers can be objects (if defined with the new keyword)
• Strings can be objects (if defined with the new keyword)
• Dates are always objects
• Maths are always objects
• Regular expressions are always objects
• Arrays are always objects
• Functions are always objects
• Objects are always objects

All JavaScript values, except primitives, are objects.

Here is an example of a JavaScript object.

// object
const student = {
    firstName: 'ram',
    class: 10
};

Here, student is an object that stores values such as strings and numbers.

JavaScript Object Declaration

The syntax to declare an object is:

const object_name = {
   key1: value1,
   key2: value2
}

Here, an object object_name is defined. Each member of an object is a key: value pair separated by commas and enclosed in curly braces {}.

Objects written as name value pairs are similar to:

• Associative arrays in PHP
• Dictionaries in Python
• Hash tables in C
• Hash maps in Java
• Hashes in Ruby and Perl

For example,

// object creation
const person = { 
    name: 'John',
    age: 20
};
console.log(typeof person); // object

You can also define an object in a single line.

const person = { name: 'John', age: 20 };

In the above example, name and age are keys, and John and 20 are values respectively.

JavaScript Object Properties

In JavaScript, “key: value” pairs are called properties. For example,

let person = { 
    name: 'John',
    age: 20
};

Here, name: 'John' and age: 20 are properties.

Accessing Object Properties

There is two way we can access the value of a object:

1. Using Dot Notation
2. Using Bracket Notation

You can access the value of a property by using its key.

Using dot Notation

Here’s the syntax of the dot notation.

objectName.key

For example,

const person = { 
    name: 'John', 
    age: 20, 
};

// accessing property
console.log(person.name); // John

Using bracket Notation

Here is the syntax of the bracket notation.

const person = { 
    name: 'John', 
    age: 20, 
};

// accessing property
console.log(person["name"]); // John

JavaScript Nested Objects

An object can also contain another object. For example,

// nested object
const student = { 
    name: 'John', 
    age: 20,
    marks: {
        science: 70,
        math: 75
    }
}

// accessing property of student object
console.log(student.marks); // {science: 70, math: 75}

// accessing property of marks object
console.log(student.marks.science); // 70

In the above example, an object student contains an object value in the marks property.

JavaScript Object Methods

In JavaScript, an object can also contain a function. Objects can also have methods. Methods are actions that can be performed on objects. Methods are stored in properties as function definitions.

For example,

const person = {
    name: 'Sam',
    age: 30,
    // using function as a value
    greet: function() { 
    console.log('hello') 
    }
}

person.greet(); // hello

Here, a function is used as a value for the greet key. That’s why we need to use person.greet() instead of person.greet to call the function inside the object.

Let’s Check Another Example

const person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

In the example above, this refers to the person object.

I.E. this.firstName means the firstName property of this.

I.E. this.firstName means the firstName property of person.

To access the object method with the following syntax:

objectName.methodName()

Example

name = person.fullName();

If you access a method without the () parentheses, it will return the function definition:

name = person.fullName;

When a JavaScript variable is declared with the keyword “new“, the variable is created as an object:

x = new String();        // Declares x as a String object
y = new Number();        // Declares y as a Number object
z = new Boolean();       // Declares z as a Boolean object

Cautions: Do Not Declare Strings, Numbers, and Booleans as Objects! They complicate your code and slow down execution speed.

Note: this is not a variable. It is a keyword. You cannot change the value of this.