Objects in Javascript - Part 2

As we have seen the declaration of objects using literals, we will understand how objects can be declared using the help of a constructor.

const tinderUser = new Object(); //singleton object created 
console.log(tinderUser); //outputs: {}

const tinderUser = {}; //non singleton object created
console.log(tinderUser); //outputs: {}

//both will output empty objects only difference is of singleton

This is how you add key and value pair in objects:

tinderUser.id = "123abc";
tinderUser.name = "sammy";
tinderUser.isLoggedIn = false;

console.log(tinderUser);
//outputs: {id: '123abc', name: 'sammy', isLoggedIn: flase}

Passing objects inside the objects

Passing objects inside other objects in JavaScript allows for complex data structures, enabling better data organization and encapsulation. This technique supports nested objects, where properties can themselves be objects.

const regularUser = {
    email: "some@gmail.com",
    fullname: {
        userfullname: {
            firstname: "harsh",
            lastname: "gupta"
        }
    }
}

console.log(regularUser.fullname);
//outputs: {userfullname: {firstname: 'harsh', lastname: 'gupta'}}

console.log(regularUser.fullname.userfullname);
//outputs: {firstname: 'harsh', lastname: 'gupta'}

Combining objects

Combining or joining objects in JavaScript can be achieved using methods like Object.assign() or the spread operator {...}. These techniques merge properties from multiple objects into a single object, allowing for flexible and dynamic data management. This approach enhances code modularity and simplifies object manipulation.

const obj1 = {1: "a", 2: "b"}
const obj2 = {3: "a", 4: "b"}

const obj3 = {obj1, obj2};
//outputs: {obj1: {'1': 'a', '2': 'b'}, obj2: {'3': 'a', '4': 'b'}}

Another method to do the merging (using Object.assign)

const obj3 = Object.assign({}, obj1, obj2);
console.log(obj3);
//outputs: { '1': 'a', '2': 'b', '3': 'a', '4': 'b' }
//When using Object.assign() to combine objects, the {} argument (an empty object) serves a specific and important purpose. 
//It acts as the target object to which properties from the source objects (in this case, obj1 and obj2) will be copied. 
//This ensures that the original objects (obj1 and obj2) remain unchanged. If we dont use {}, obj 1 or obj2 might get changed

//Object.assign copy the properties from one or more source object 
//to a target object, and returns the target object

Another method (using spread operator (...))

const obj3 = {...obj1, ...obj2};
console.log(obj3);
//outputs: { '1': 'a', '2': 'b', '3': 'a', '4': 'b' }

How to handle an array of objects

An array of objects is generally received from the database, as objects come in large quantities, let's see how to handle such a type

const users = [
    {
        id: 1,
        email: "harsh@email"
    },

    {
        id: 1,
        email: "harsh@gmail"
    },

    {
        id: 1,
        email: "harsh@ybl"
    },
]

console.log(users[1].email);
//outputs: harsh@gmail

Useful methods used in objects

• To separate keys from an object

console.log(tinderUser);
//outputs: {id: '123abc', name: 'sammy', isLoggedIn: flase}

console.log(Object.keys(tinderUser));
//outputs: ['id', 'name', 'isLoggedIn']
//returns an array of keys

• Similarly, we can separate value from an object

console.log(tinderUser);
//outputs: {id: '123abc', name: 'sammy', isLoggedIn: flase}

console.log(Object.values(tinderUser));
//outputs: [ '123abc', 'sammy', false ]

• Now if you want each key and value pair as a separate array

console.log(Object.entries(tinderUser));
//outputs: [ [ 'id', '123abc' ], [ 'name', 'sammy' ], [ 'isLoggedIn', false ] ]

• If you want to know about a specific value that exist inside an object or not

console.log(tinderUser.hasOwnProperty("isLoggedIn"));
//outputs: true

De-structuring objects in Javascript

writing console.log statements can be annoying especially when names are long like this:

const course = {
    coursename: "js in hindi",
    price: 999,
    courseInstructor: "Hitesh"
}

console.log(course.courseInstructor);
//outputs: Hitesh

Now, if you want to print this courseInstructor repeatedly, you have to write console.log(course.courseInstructor) multiple times. So here's a better approach to do so:

const {courseInstructor} = course;
console.log(courseInstructor);
//outputs: Hitesh

Now let's understand how to reduce the length of the long variables or make a custom name with the above syntax

const {coursename: cname} = course;
console.log(cname);
//outputs: js in hindi