Understanding Objects in JavaScript

What objects are and why they are needed

Object is the derived datatype in JavaScript which is a collection of properties and methods.

Objects can store any type of data in key value pairs.

Creating objects

There are two ways to create and object :

Object Literal

It is a shorthand syntax for creating objects.

const user = {
    name : 'kartik',
    age : 25
}

console.log(user);

Object Constructor

const user = new Object();

user.name = 'kartik';
user.age = 25;

console.log(user);

Accessing properties (dot notation and bracket notation)

Dot Notation

const user = {
    name : 'kartik',
    age : 25
}

//syntax - object_name.property_name
console.log(user.name);

Bracket Notation

const user = {
    name : 'kartik',
    age : 25
}

const prop = 'name';

//syntax - object_name[variable_name]
console.log(user[prop]);

Updating object properties

const user = {
    name : 'kartik',
    age : 25
}

user.age = 50;
user['name'] = 'Vishal';

console.log(user);

Adding and deleting properties

const user = {};

//adding properties
user.name = 'kartik';
user.age = 25;

//deleting properties
delete user.name;

console.log(user);

Looping through object keys

for..in loop is most commonly used loop in the objects.

const user = {
  name: "Kartik",
  email: "kartik@example.com",
  age: 21,
  isLoggedIn: true,
  role: "developer"
};

for(let key in user){
    console.log(key + ' : ' + user[key]);
}

Making object iterable

Any object which contains Symbol.iterable is iterable through for of loop.

Every iterable object like array, string contains Symbol.iterable key.

To make any object iterable, we need to create Symbol.iterable key.

Steps to make object iterable

• create a function

• function returns a object containing closure function named next()

• closure function returns object.

const obj = {
    name : 'kartik',
    marks : [20,15,56,85,45],
}

obj[Symbol.iterator] = function () {
    const marks = this.marks;
    let index = 0;
    return {
        next(){ //closure function
            if(index < marks.length){
                return {value : marks[index++], done: false}
            }
            return {done : true}
        }
    }
}

for (const mark of obj) {
    console.log(mark)
}

// value = current value
// done: false = still more values left
// done: true = iteration finished