Javascript Object
By Saket Bhatnagar••Beginner to Intermediate
object
- 1An Object is a block of memory which has state(variable) , behaviour(methods) and where we can store heterogenous data.
- 2An object is a collection of key-value pairs that can contain various data types, such as numbers, strings, arrays, functions, and other objects.
- 3In one object we can have multiple key value pair and it should be separated by ',' comma.
- 4We can access value of object using (.) Operator or square bracket [] , object reference and key_name.
object Key (property)
- 1Object key (property) will be automatically converted into string by js engine.
- 2If keys name are in Number , js engine will convert them into string and arrange them in ascending order.
- 3To write space separated key names , we have to enclose key name with double quotes.
- 4If we want to give computed or user defined property then we have to use square brackets and variable name.
- 5
If key-name is same as variable name which hold the value , instead of writing two times we can write varaiable name only once.
1let phone = 8800425635;2let obj = {3 phone,4 // phone:phone5};
Ways to create Object
- 1
By using curly braces { } and literals.
1let obj = {}2// empty object34let obj = { name:"chombi",age:16}5// object with literals - 2
By using new keyword and Constructor.
1let obj = new Object();2// {} empty object34let obj=new Object({ name:"chombi"});5// { name:"chombi"} object with literals - 3By using new keyword and Constructor function
- 4By using class
Access object value
- 1
By using dot operator ( . ) and key name.
1let obj = { name:"chombi",age:16}23console.log(obj.name)// chombi4console.log(obj.age)// 16 - 2
By using square brackets ( [] ) and key name.
1let obj = { name:"chombi",age:16}23console.log(obj["name"])// chombi4console.log(obj["age"])// 16 - 3If we try to access property which is not available in object we will get undefined.
Object Methods
- 1In JavaScript, object methods are functions that are attached to the object, and can be called on that object reference.
- 2To call a function , we use square brackets instead dot operator.
- 3
Here, speak is a variable which holds the function reference.
1let obj1 = { name: "chombi",2age: 16,3speak: function () {4console.log('i can speak');5} }6console.log(obj1["speak"]());7//i can speak - 4
Access object property inside function - function declared with function keyword.
1let obj1 = { name: "chombi",2age: 16,3speak: function () {4console.log('My name is' + this.name+',age' + this.age+' and i can speak');5} }6console.log(obj1["speak"]());7//My name is chombi , age 16 and i can speak
Here, we can access object property, by using 'this' keyword. - 5
Access object property inside function - Arrow function.
1let obj1 = {2 name: "chombi",3 age: 16,4 speak: () => {5 console.log(6 "My name is" + obj1.name + " , age " + obj1.age + " and i can speak"7 );8 },9};10console.log(obj1["speak"]());11//My name is chombi , age 16 and i can speak12// Here, we can access object property, by using object reference.
Here , we can can access object property , by using object reference because arrow function is not having 'this' property.
Add key value in object
- 1To add key-value pair we can using dot operator and square brackets
- 2
By using dot operator ( . ) and key name
1let obj = { name:"chombi",age:16}23obj.country = "india";4//new key-value added in object5// {6name:"chombi",7age:16,8country:"india",9}NOTE : If property is already available with same name it will updated with new value.
Example:
let obj = { name:"chombi",age:16 }
obj.age = 18;
//age property value is updated
// {
name:"chombi",
age:18,
}
Check property is available in Object or not
- 1
We can check using "in" operator.
Syntax : "property name" in object_name
1let obj = { name:"chombi",age:16}23obj.country = "india";4//new key-value added in object5// {6name:"chombi",7age:16,8country:"india",9}
We can check using "in" operator.
1let obj = { name:"chombi",age:16}23console.log("name" in obj )// true4console.log("age" in obj )// true5console.log("city" in obj )// false
Copy of object
We can create copy of two types :
- 1Shallow copy
- 2Deep Copy
Shallow copy
- 1The copy of object that is directly connected with original object is called as shallow object.
- 2Here, we store reference of original object in a new varaiable , now new variable starts pointing to same memory block.
- 3So if we make any changes in copy , it will be reflected to original object because both variables are pointing to same memory block.
- 41let obj = { name:"chombi",age:16}23let obj_cpy = obj;4//reference of obj is copied in obj_cpy56obj_copy.age=20;7console.log(obj_copy);8//{ name:"chombi",age:20 }9console.log(obj);10//{ name:"chombi",age:20 }
Deep copy
- 1The copy in which original object is not connected with it's copy , is called as Deep copy.
- 2Here , we create separate empty object and after that we copy key-value pair of original object into new empty object.
- 3Now , if we make any changes in copy , it will not be reflected to original object because we have create separate memory blocks.
- 4
Create copy using for loop.
1let obj1 = {name:"chombi",age:16}23let obj2 = { }4// new empty object567for (prop in obj1) {8obj2[prop] = obj1[prop]9console.log(obj2)10}11//copy key-values into new object1213obj2.age=20;14console.log(obj2);15//{ name:"chombi",age:20 }16console.log(obj1);17//{ name:"chombi",age:16 }
Object in-built Methods
Object.keys(obj_ref)
- 1Returns an array of given object's property names.
- 21const obj = { a: 1, b: 2, c: 3 };2console.log(Object.keys(obj));3// Output: ["a", "b", "c"]
Object.values(obj_ref)
- 1Returns an array of given object's values.
- 21const obj = { a: 1, b: 2, c: 3 };2console.log(Object.values(obj));3// Output: [1,2,3]
Object.entries(obj_ref)
- 1Returns an array of key-value pairs in an array.
- 21const obj = { a: 1, b: 2, c: 3 };2console.log(Object.entries(obj));3// Output: [[a,1],[b,2],[c,3]]
Object.assign(target_obj,src1,...,srcn)
- 1Copies key-value pair from one or more source objects to a target object.
- 21const target = { a: 1, b: 2 };2const source = { c: 4, d: 5 };3const result = Object.assign(target, source);4console.log(result);5// Output: { a: 1, b: 2, c: 4, d: 5 }