DEV Community

boopalan
boopalan

Posted on

objects in JavaScript part-2

javascript part-1

how we do not use the keys
if you keys have more the own words then you can add the double quotes around it

example:

const obj3 = {
    is admin : false,
    // here the key have two words so we are using the double quotes
}
//obj3.is admin

// If you try to access like this way javascript consider it self obj3 having a is property and leave it the remaining

Enter fullscreen mode Exit fullscreen mode

In this case we can use like this way, now it will retrieve the values of the properly

console.log(obj3[is admin]);
//false

Enter fullscreen mode Exit fullscreen mode

can can also add some of the properties in this similar ways
examples

obj3[is user] = true;
console.log(obj3[is user]); // true

Enter fullscreen mode Exit fullscreen mode

same as it allows us to modify values in the properties

obj3[is admin] = true;
console.log(obj3[is admin]); // true
Enter fullscreen mode Exit fullscreen mode

now it was changed from the false to true values

how to remove any of the keys in the object, whenever we remove any of the keys its respective values will also remove from the objects

delete obj3[is admin] = true;
console.log(obj3)
Enter fullscreen mode Exit fullscreen mode

you cannot see the “is admin” key in this object because the delete key word helps us to remove keys.

some of the way to handle the objects dynamically

let we consider we have this kind of object

const user = {
    name : boopalan
}
const role = Java fullstack developer;

Enter fullscreen mode Exit fullscreen mode

if we try to add the role as key to user object how we will do it

user.role = role
user[role] = role
Enter fullscreen mode Exit fullscreen mode

however we can add the role key to the the user object in any way, the we will usually access the role key in this this way

console.log( user[role] );
console.log( user.role );

Enter fullscreen mode Exit fullscreen mode

Here actually we took two steps to add and access the key and values, how it would be easy if we do it in a single line or one step, ya JavaScript provides a dynamic way to add and access the key in one single step.

Console.log(user[role]);
Enter fullscreen mode Exit fullscreen mode

here the role is dynamically added in the object and then it in this usual way we are accessing the behaviours

if we want to use this dynamic method we must have to declare the variables before use it.
Here we actually predefined what is the key want to be in the object

how can we set the key names dynamically is it possible we can be able to use the key dynamically without hard coded
Yes, we are able to do it let us see how to do it?

Const key = prompt( what key you want to add : )
cost dynamicObject = {
    [key] : values for the key,
    // here whatever give to the key that will automatically converted into the key
}

console.log(dynamicObject )
Enter fullscreen mode Exit fullscreen mode

constructor function
we know about how to create and use the functions in javascript, we can use the functions to create object

function LLM(name, parameters){
    this.name = name,
    this.parameters = parameters
}

Enter fullscreen mode Exit fullscreen mode

if we plan to use the constructor function to create object we must need ti use the new keyword


function Person(name, age) {
this.name = name;
this.age = age;
}
// Creating a new object using the constructor function
const johnDoe = new Person('John Doe', 30);
if we create without new keyword
const Gorge = Person(Gorge, 30);
console.log(Gorge) //undefined


Enter fullscreen mode Exit fullscreen mode

what will happen if we do not use the new keyword

strict mode TBD

non-strict mode, this points to the global window object. In strict mode, this is undefined
this will lead to polluted window object
to ensure what was happening without the new keyword let we see

console.log(window.name) // Gorge
console.log(window.age) // 30

Enter fullscreen mode Exit fullscreen mode

do you notice that this time if we use the constructor function to create objects it will say out object was function type, up to no or if we use the object literals it would not say any types for the object, this is where constructor function helps to create use defined function instead of default object types

to check the instances

console.log( johnDoe instanceof Person ); //
this will helps to check the which object we are handling

Enter fullscreen mode Exit fullscreen mode

Also javascript provides it’s one object type, so we do not need to create an extra function manually to create objects

const person = new Object();
person.name = matz
console.log(person)
Enter fullscreen mode Exit fullscreen mode

this does not show any new types for this object

using function in the objects

const profile = {
    name : matz,
    getName: function () {
        console.log(` username is ${this.name}`)
    }
}
console.log(profile.getName())
// you must use the braces to call the function

Enter fullscreen mode Exit fullscreen mode

how to handle the not existing properties in the object
If we try to call the not existing properties javascript will say does not undefined

console.log(person.salary) // undefined

Enter fullscreen mode Exit fullscreen mode

one way to check is in operator
console.log(‘salary’ in person) // false
because the salary property is not in the person object

console.log(person.hasOwnProperty('age')); true
Enter fullscreen mode Exit fullscreen mode

this hasOwnProperty() will say that an object does it has an property or not by passing the an argument to this function

If you are a situation of out want handle the nested objects in will help very much


const profile = {
    name : matz,
    countries : {
        asia : [Japan, China]
        europe : [German, France]
    }
}
for (let key in profile) {
    console.log( key )
    // this time we get all the keys from the person object
    console.log( profile[key} )
    // similarly key help to get the values
}

Enter fullscreen mode Exit fullscreen mode

how to get all the keys form an particular objects
Objects.keys(person)

this will return all the keys in a array data type

NOTE
objects is always stored in and shared by the references

object references


const favFruit = { name = mango };
const seasonalFruit = {name = mango};

console.log( favFruit == seasonalFruit ); // false
console.log( favFruit === seasonalFruit ); // false

Enter fullscreen mode Exit fullscreen mode

whether comparison operators (==) and strict equality operator (===) both will give a false result because it will check only the references of the both objects, not the item by item inside.

const seasonalFruit = {name = mango};
let favFruit = seasonalFruit
console.log( favFruit == seasonalFruit ); // true
console.log( favFruit === seasonalFruit ); // true
Enter fullscreen mode Exit fullscreen mode

this time we get false because both variables have the same references, so the both comparison operators (==) and strict equality operator (===) check it’s references and return true because both have the same references

static methods

const target = { p:1, q:2};
const source = { a:3 , b:5};
const returnObject = Object.assign(target, source);
consle.log( returnObject);
here we will get an object that having the both objects properties, here in the above example we do not have repeated properties so it compliments both objects properties and return them

suppose any one them have an repeated property then what will happen
let we see them
const target = { p:1, a:2};
const source = { a:3 , b:5};
const returnObject = Object.assign(target, source);
consle.log( returnObject);
here the repeated property was overwritten by the last value having the same property names

const target = { p:1, a:2};
const returnObject = Object.assign({}, source);
consle.log( returnObject);
Enter fullscreen mode Exit fullscreen mode

here the second objects the source was copied and we get its properties at the final output

NOTE we was getting the new references each time not the same references of the copied objects
to verify that it was an object new references

console.log( returnObject == target ); // false
console.log( returnObject === target ); // false
Enter fullscreen mode Exit fullscreen mode

shallow copy vs deep copy

let we check does the assign object

const source = { a:3 , b:5, c:{ x:0}};
const returnObject = Object.assign({}, source);

Enter fullscreen mode Exit fullscreen mode

first we check that is both object have the same properties after cloning

console.log( source );
// { a:3 , b:5, c:{ x:0}}
console.log( returnObject);
// { a:3 , b:5, c:{ x:0}};
Enter fullscreen mode Exit fullscreen mode

it seems like both have the same number of objects
what will happen if we change the values of the properties

returnObject.a = 100;
consle.log( source.a ); // 3
consle.log( returnObject.a ); 100
Enter fullscreen mode Exit fullscreen mode

it copies the primary key of the objects
let we try to change the values of the child objects

returnObject.c.x = 100;
consle.log( source.c.x ); // 100
consle.log( returnObject.c.x ); 100
Enter fullscreen mode Exit fullscreen mode

here if we change the values of the child objects it properties it affects the both simultaneously

Top comments (0)