Objects are a very important types in JavaScript as there is no web application that does not deal with objects. In this article we will quickly look at Javascript Object anatomy and learn about some of the important methods for Objects.

 

 

 

Object types in javascript stores entities of {key:value} pairs of data that describe particular element. Objects data wrapped between two curly braces {}. As an example an object that describe employee data:

const employee = {
        	firstName: "John",
        	lastName: "Doe"
        	salary: 5000,
        	gender: "male"
        };

As you see declaring objects is the same as declaring any Javascript variable. Next i added the object properties that represent employee data like firstName,lastName,dob, etc.

Objects can contain any arbitrary data, and you can create empty objects at declaration an then append new properties like so:

const employee2 = {};

employee2.firstName = "John";
employee2.lastName = "Doe";
employee2.dob = "1988-08-20";

Object properties can contain values of any scalar data types like Integer, String, Boolean, etc and also complex data structures like arrays or other nested objects:

const employee = {
        	firstName: "John",                                             // string
        	lastName: "Doe",
        	age: 36,                                                       // int
        	dob: "1988-08-20",
        	salary: 5000,
        	gender: "male",
        	married: true,                                                 // boolean
        	education: [                                                   // array
        		{school: "School1", years: 3, end_date: "2005-07-01"},
        		{school: "School2", years: 4, end_date: "2008-03-01"}
        	],
            address: {                                                          // object
                country: "UK",
                state: "London",
                street: ""
            }        	
        };

This way of creating objects is called object initializer. However you can create objects using the Object constructor:

const employee = new Object();

 employee.firstName = "John";
 employee.lastName = "Doe";
 employee.dob = "1988-08-20";

 console.log(employee);

The object constructor method is the same as object initializer. 

 

Modifying and Accessing Object Values

Object values can be modified after creation using the object name and property name like so:

employee.married = false;
employee.salary = 8000,

console.log(employee.married, employee.salary);

// false
// 8000

As you see you can access any property value in the object using dot notation objectname.propertyname like:

console.log(`Employee name: ${employee.firstName} ${employee.lastName}`);

Also you can access object values using square brackets syntax:

console.log(employee['dob']);  // 1988-08-20

 

Iterating Over Object Values

You can iterate over and display object values using for..in loop:

for(let key in employee) {
    console.log(`${key} = ${employee[key]}`);
}

Also you can use Object.entries() method to loop over object entries as we will see in the next section.

 

Object Methods

• Object.entries(): Returns an array of the object own enumerable key-value pairs. You can use this method to iterate over an object properties using Array.forEach():

Object.entries(employee).forEach(([key, value]) => {
      console.log(key, value);
});

// output
firstName John
lastName Doe
...
...

Or by using for..of loop can achieve the same thing:

for (let [key, value] of Object.entries(employee)) {
    console.log(key, value);
}

 

• Object.values() and Object.keys(): Just like Object.entries() these methods return an array of object own enumerable properties values and keys respectively.

Object.values(): return an array of object values:

console.log(Object.values(employee));

// output
(9) ['John', 'Doe', 36, '1988-08-20', .....]

Object.keys(): return an array of object keys:

console.log(Object.keys(employee));

// output
(9) ['firstName', 'lastName', 'age', 'dob', 'salary', ...... ]

 

• Object.assign(target, source): This method copies all enumerable properties from source object to target object:

const obj1 = {prop1: "val1", prop2: "val2"};
const obj2 = {prop3: "val3", prop4: "val4"};

const result = Object.assign(obj2, obj1);

console.log(obj2);

// output
{prop3: 'val3', prop4: 'val4', prop1: 'val1', prop2: 'val2'}

As shown in this code obj2 has it’s own properties besides all obj1 properties copied. Note that Object.assign() clones the object, to illustrate this imagine that we added another new property to obj1:

obj1.prop5 = "val5";
console.log(obj1);

This property available only on obj1, and if you inspect obj2 you will see that it doesn’t contain the new property, that’s because Object.assign() makes distinct clones of objects. For this reason Object.assign() widely used when you need to take a clone of an object without affecting the source object: 

const post = {title: "post title", content: "post content", author: "john doe"};
const post2 = {};

Object.assign(post2, post);

console.log(post2); // {title: "post title", content: "post content", author: "john doe"}

Be aware that Object.assign() doesn’t clone nested objects, for this consider using structuredClone() or lodash library.

• Object.defineProperties(obj, properties): While you can directly define properties to any object using dot notation “objectname.propname”, With this method also you can define new or modifies existing properties of particular object. 

const user = {};

        Object.defineProperties(user, {
            id: {
                value: 1,
                writable: false,
                enumerable: true
            },
            name: {
                value: "john doe",
                writable: true,
                enumerable: true,
                configurable: true
            },
            password: {
                value: "password",
                writable: false,
                enumerable: false
            }
        });

Using Object.defineProperties(), we can define schema for each property, the second argument is a props object which defines the properties of the target object. The props keys represent object property keys of the target object like id, name. The value of each property is a data descriptor of the property, as shown in this example the data descriptor for the name property has this properties:

name: {
                value: "john doe",
                writable: true,
                enumerable: true,
                configurable: true
            }

Property Data descriptors contains several these properties:

• value: represent the property value.
• writable: specifies that the property is writable and can be modified with the assignment operator.

user.password = "new password";   // password not writable
        
console.log(user.password);       // password

There is also similar method you can inspect Object.defineProperty(obj, property, props) that defines single property.

 

• enumerable: specifies that the property is enumerable which can be shown when enumerating the object using for loops

for (let [key, value] of Object.entries(user)) { 
     console.log(key, value); 
}

// print only id and name as enumerable:true

• configurable: specifies that the type of the property may be changed and may be deleted from the corresponding object.

delete user.password;   // delete not allowed as password not configurable

console.log(user);

// print
{id: 1, name: 'john doe', password: 'password'}

 

• Object.freeze(obj): This method used in cases when you need to freeze an object which means makes existing properties not writable and non-configurable. New properties can’t be added or removed from existing object. value can not be changed. 

In the previous example let’s make user object frozen:

"use strict";

Object.freeze(user);

user.name = "wael salah";  

user.dob = "1987-04-03";

// output
TypeError: Cannot assign to read only property 'name'
TypeError: Cannot add property dob, object is not extensible

In this code i invoked “use strict” javascript function to trigger js errors, now any attempt to assign new properties or update existing properties to the frozen object will show these errors. You can check if particular object is freezed using Object.isFrozen(obj) method.

 

• Object.is(value1, value2): determines whether two values are the same.

console.log(Object.is(1,1));            // true

console.log(Object.is('1',1));          // false

console.log(Object.is(false,true));     // false

Two values are the same if they met these conditions:

• both true or both false
• both undefined
• both numbers with same value note that signed numbers considered different with Object.is():

console.log(Object.is(-0, 0));          // false
console.log(Object.is(-2, 2));          // false

 

• both strings of the same length with the same characters in the same order

console.log(Object.is('hello world','hello world'));        // true

console.log(Object.is('Hello World','hello world'));        // false

• both the same object (meaning both values reference the same object in memory)

const obj = {};

console.log(Object.is(obj, obj));    // true

console.log(Object.is({}, obj));     // false not reference same object

const source = {a: 1, b: 2};
const newobj = {};

Object.assign(newobj, source);


console.log(Object.is(source, newobj));     // false

• both have value of NaN

console.log(Object.is(NaN, NaN));  // true

Note that Object.is() is not the same as equality operator == or the identical operator === as equality and identical operators tries to do various coercions to both sides before checking for equality, but Object.is() doesn’t coerce either value:

console.log("" == false);                 // true
console.log(Object.is("", false));        // false

console.log(-0 === +0);                  // true
console.log(Object.is(-0, +0));          // false