JavaScript Object | CodeForGeek

JavaScript uses objects everywhere, it is a fundamental part of writing modern JavaScript code. JavaScript only has a few primitive data types(i.e. string, boolean, null and undefined, etc), and all the remaining data types are considered objects.

Objects are non-primitive data types and can be of multiple types such as Boolean, Number, String, Array, Data, and Object, this tutorial will teach you everything you need to know about objects in JavaScript.

Example of a JavaScript object:

const obj1 = {name: 'John',
              age: 25,
              address: 'India'
             };  //'object'

console.log(obj1);

In the above example, you can see an object “obj1” having multiple properties. These properties can be split into two parts, the first field is called a key such as name, age and address and the second field is called its values such as aditya, 25, and India.

Output:

{ name: 'John', age: 25, address: 'India' }

Also Read: What is a Class In JavaScript?

Creating Objects in JavaScript

Below are the various approaches to creating an object in JavaScript.

Creating objects using object literal
Creating objects using the object class
Creating objects using the user-defined class
Creating objects using the constructor function

Let’s understand them one by one.

Creating Objects using Object Literal

An object literal is a list of key-value pairs inside curly braces separated by commas.

Example:

Below is an example of creating objects using object literal.

const obj1 = {name: 'John',
              age: 25,
              address: 'India'
             };  //'object'


console.log(obj1);

Here we have passed multiple key-value pairs to create an object “obj1”.

Output:

{ name: 'John', age: 25, address: 'India' }

Creating Objects using the Object Class

An object is created as an instance of the built-in JavaScript object class.

Example:

Below is an example of creating objects using object class.

const obj1 = new Object();
obj1.name = 'John';
obj1.age = 25;
obj1.address = 'India';

console.log(obj1);

Here we created an instance of an object class, then assigned different properties to them using the dot(.) notation followed by keys having assigned values.

Output:

{ name: 'John', age: 25, address: 'India' }

In the above output, you can see that we get the same output as the output got when creating objects using object literal.

Creating Objects using the User-defined Class

An object is created as an instance of some user-defined class.

A user-defined class have its own constructor which defines the properties of an object created from that class.

Example:

Below is an example of creating objects using the user-defined class.

class Hello {
    constructor(name, age, address) {
        this.name = name;
        this.age = age;
        this.address = address;
    }
}

const obj1 = new Hello('John', 25, 'India');

console.log(obj1);

Output:

Hello { name: 'John', age: 25, address: 'India' }

Creating Objects using the Constructor Function

Class in JavaScript was introduced in ECMAScript 2015(ES6) before classes the constructor function is used to perform Object Oriented Programming(OOP) in JavaScript.

An object can be directly created using the constructor function.

Example:

Below is an example of creating objects using the constructor function.

function Hello(name, age, address) {
    this.name = name;
    this.age = age;
    this.address = address;
}

const obj1 = new Hello('John', 25, 'India');

console.log(obj1);

Output:

Hello { name: 'John', age: 25, address: 'India' }

Again, we get the same output as the output got in the previous methods. Hence the output is justified.

Checking the Objects in JavaScript

We can validate that a value is an object using the typeof() method.

Example:

const obj1 = {name: 'John',
              age: 25,
              address: 'India'
             };  //'object'


console.log(typeof(obj1));

const obj2 = new Object();
obj1.name = 'John';
obj1.age = 25;
obj1.address = 'India';

console.log(typeof(obj2)); 

class Hello {
    constructor(name, age, address) {
        this.name = name;
        this.age = age;
        this.address = address;
    }
}

const obj3 = new Hello('John', 25, 'India');

console.log(typeof(obj3)); 

function Hello2(name, age, address) {
    this.name = name;
    this.age = age;
    this.address = address;
}

const obj4 = new Hello2('John', 25, 'India');

console.log(typeof(obj4));

Here we have created an object using all four ways explained earlier, passed it as an argument to the typeof() method, and printed the output.

Output:

object
object
object
object

See, all of them are objects.

Accessing Object Properties

Accessing the properties of an object can be done in two ways:

1. Using dot Notation

You can access the properties of an object using dot notation followed by its name.

Example:

const obj1 = {name: 'John',
              age: 25,
              address: 'India'
             };  //'object'


const x = obj1.name;

console.log(x);

Output:

John

2. Using bracket Notation

A bracket can also be used to access the properties of an object.

Example:

const obj1 = {name: 'John',
              age: 25,
              address: 'India'
             };  //'object'


const x = obj1["name"]

console.log(x);

Output:

John

JavaScript Nested Objects

An object can contain another object as a value of a key.

Example:

const obj1 = {name: 'John',
              age: 25,
              address: {
                    city: 'Delhi',
                    state: 'Delhi'
              }
             };  //'object'

console.log(obj1.address);

Here the “obj1” has a property address having another object as a value.

Output:

{ city: 'Delhi', state: 'Delhi' }

JavaScript Object Contain Methods

An object can also contain methods.

Example:

const obj1 = {
    name: 'John',
    age: 25,
    address: {
        city: 'Delhi',
        state: 'Delhi'
    },
    getName: function () {
        console.log(this.name);
    }
}; //'object'

obj1.getName();

Here the “obj1” has a function “getName” which will print the value of the name key in the console.

Output:

John

Summary

An object is an instance of a class, but in JavaScript, it is more than that, JavaScript use object everywhere, and an object in JavaScript can be created using different ways such as using an object literal, object class, user-defined class, and constructor function. Objects are the core of JavaScript, hope this tutorial helps you to understand them.