Concepts of Object — Part 1

📄 Table of Contents

◉ What are Objects ?

var human = {
firstName: "Anil",
lastName: "Kumar",
age: 30,
fullName: function(){
return this.firstName + " " + this.lastName
}
}

◉ Properties of the object can be accessed using the following two notations:

human.firstName;   //Output: Anil
human.fullName(); //Output: Anil Kumar
human.age = 27
human.getAge = function(){
return this.age;
}
human["firstName"]; //Output: Anil
human["fullName"](); //Output: Anil Kumar
human["weight"] = 68
human.getWeight = function(){
return this.weight;
}
var firstNameProperty = "firstName";console.log(human[firstNameProperty]) // Output: Anil
Console.log(human.firstNameProperty) //Output: undefined
human["date of birth"] = "Nov 28";
human[12] = 12;
human.12 = 12; //gives error

console.log(human.12); //Gives error
console.log(human[12]); //Output: 12

◉ Delete a property from an object

delete human.firstName; // return true
console.log(human.fullName());// undefined Kumar

◉ ‘4' ways to Create objects in JavaScript

var human = {
firstName: "Anil",
lastName: "Kumar",
age: 30,
fullName: function(){
return this.firstName + " " + this.lastName
}
}
var human = new Object()
console.log(human);// Creates an empty object
function Human(firstName, lastName) {
this.firstName = firstName,
this.lastName = lastName,
this.fullName = function() {
return this.firstName + " " + this.lastName;
}
}

var person1 = new Human("Anil", "Kumar");

console.log(person1)
var ak = new Human("Anil", "Kumar");
var kk = new Human("Kabir", "Khan");
class Human{
constructor(firstName, lastName){
this.firstName = firstName,
this.lastName = lastName
}
}
Human.prototype.fullName = function() {
return this.firstName + " " + this.lastName;
}
const ak = new Human("Anil", "Kumar");

Problem with creating objects with the constructor function:

var person1 = new Human("Virat", "Kohli");
var person2 = new Human("Sachin", "Tendulkar");
// syntax — Object.create(prototype[, propertiesObject])var newStudent = Object.create(student); // this create a new object with old object added in its prototype // chain
Object.create(prototype_object, propertiesObject)
var person = Object.create(null);

typeof(person) // Object
console.log(person) // Object with prototype object as null

// Set property to person object
person.name = "Anil";

console.log(person)
// Object with name as property and prototype as null
prototypeObject = {
fullName: function(){
return this.firstName + " " + this.lastName
}
}
var person = Object.create(prototypeObject)

console.log(person)
// Object with prototype object as prototypeObject and no properties

// Adding properties to the person object
person.firstName = "Virat";
person.lastName = "Kohli";

person.fullName() // Virat Kohli
prototypeObject = {
fullName: function(){
return this.firstName + " " + this.lastName
}
}

var person = Object.create(prototypeObject, {
'firstName': {
value: "Virat",
writable: true,
enumerable: true
},
'lastName': {
value: "Kohli",
writable: true,
enumerable: true
}
})

console.log(person)
// Object with prototype object as prototypeObject and properties as firstName and lastName

◉ Inheritance using Object.create()

//Super constructor function
function Super(firstName, lastName){
this.firstName = "Virat",
this.lastName = "Kohli"
}

//SuperType prototype
Super.prototype.getSuperName = function(){
return this.firstName + " " + this.lastName;
}

//Sub prototype function
function Sub(firstName, lastName, age){
//Inherit instance properties
Super.call(this, firstName, lastName);
this.age = age;
}

Sub.prototype = Object.create(Super.prototype)

// Make sure this is created after the above line otherwise, above line will override this prototype object and this function will not be present
Sub.prototype.getSubAge = function() {
return this.age;
}

//Create Sub objects
var subTypeObj1= new Sub("Virat", "Kohli", 26);

//subTypeObj1
console.log(subTypeObj1.firstName); //Output: Virat
console.log(subTypeObj1.age); //Output: 26
console.log(subTypeObj1.getSuperName()); //Output: Virat Kohli
console.log(subTypeObj1.getSubAge()); //Output: 26

console.log(subTypeObj1 instanceof Sub) // Output: true
console.log(subTypeObj1 instanceof Super) // Output: true

◉ Get Keys of Object

const chicken = { hasWings: true, bodyParts: [ {head: 1} ]};
console.log(Object.keys(chicken))
// ['hasWings', 'bodyParts'];

Get Entries of an Object

const chicken = { 
hasWings: true,
bodyParts: ['head', 'tail']
};
console.log(Object.entries(chicken));// [
['hasWings', true], ['bodyParts', ['head', 'tail']]
];

◉ Merge Two Objects

const a = {foo: 1};
const b = {bar: 1};
const c = {...a, ...b};
// {foo: 1, bar: 1}
const a = {foo: 1};
const b = {bar: 1};
const c = {bar: 2};
const d = {...a, ...b, ...c};
console.log(d) // {foo: 1, bar: 2}

◉ Prevent Modification (Mutation) to an Existing Object

let a = {foo: 1};
a.foo = 2;
Object.freeze(a);
a.foo = 3;
console.log(a) // {foo: 2}

Check If an Object Can Be Modified

let a = {foo: 1};
a.foo = 2;
Object.freeze(a);
a.foo = 3;
console.log(Object.isFrozen(a)) // true

◉ Cloning Objects (Shallow vs Deep copy)

[1]. Object.assign()

const a = { foo: {bar: 1 }}
const b = Object.assign({}, a)
// get a clone of a which you can change with-out modifying a itself
b.foo.bar = "999";
console.log(a.foo.bar);
# 999
const a = [1,2,3]
const b = Object.assign([], a)
// get a clone of a which you can change with out modifying a itself
const a = { foo: {bar: 1, {baz: 2}}
const b = JSON.parse(JSON.stringify(a))
// get a clone of a which you can change WITHOUT modifying a itself

[2]. DE-structuring

const orig = { foo: 
{bar: 1}
}; // nested object
const copy = {...orig}; // get a clone of orig which you can change with out modifying orig itselfcopy.foo.bar = "999";
console.log(orig.foo.bar); # "999"

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.