DEV Community: sruthiragupathy

Objects in Javascript

sruthiragupathy — Sat, 15 Aug 2020 14:51:40 +0000

Hi there, this post is all about objects. But , First things first if you have not checked out my previous post on Var vs Let vs Const , check it out here

Alright, Here we go!

What is an object?

Objects in javascript can be compared to an object in real world. Let us consider a car as an object. The car ofcourse has a lot of characteristics such as brand, color, weight, design-type etc..,
In the example above, car is an object.
let us assume, the brand is BMW , color is black, weight is 1200kgs and the design-type is sedan.
Thus , an object is a collection of properties.The property can be considered as a key-value pair.
The keys in the above case are brand, color, weight and design-type ,while the values are BMW, black, 1200kgs and sedan.
Now let's convert all these to code.

Here , the object keys are always string type, while the values can be of any type.

Accessing and Setting the object properties

We can access the properties of an object using two ways.

Dot Notation

The common way to access the object property is using dot notation.

Bracket Notation

You can wonder why do we need bracket notation, while we have dot notation. Because I wondered too.
But, this notation is highly useful in two cases ,

when the object key is not a valid javascript identifier. i.e.., when the property name contains hyphens,space, etc..,
when the object key is not determined until runtime

In the case 1, Trying to access screen resolution with dot notation gives error since it is not a valid javascript identifier.
In the case 2, the variable key is assigned the value of "capacity".Trying to access phone.key gives the output undefined,because the object key named key is not present and hence phone[key] gives the result 64 GB as the key is assigned the value "capacity" during runtime.

Object.keys(),Object.values() and Object.entries() methods

The Object.keys() method returns all the keys of an object as an array.
The Object.values() method returns all the values of an object as an array.
The Object.entries() method returns all the properties(key-value pairs) of an object as an array of key-value pairs.

Object Creation

There are different ways in which we can create objects.

Object literals
New Operator or Constructor
Object.create method ####Object literals This is the simplest way of creating objects. The object literal is a list of key-value pairs separated by commas.

Here, car is an object literal

New Operator

Constructor

This is the generic way of creating objects.If we invoke a function using new operater, the function acts a constructor and returns object.

By this method, we can create any number of objects just by passing values to the constructor function

Object.create() method

The Object.create() method can be used when a new object has to be created,using an existing object as the prototype of the newly created object.
Let us consider an object movies

Here, the new object movie1 inherits the properties of existing object movies .

It is also possible to overwrite the inherited properties.Let us consider a new object movie2 which inherits the properties of the existing object movies.

Here, the value of the inherited property Studio has been overwritten by DC.

Writing this helped me understand more about objects, I hope you got a better clarity too:)

Var vs Let vs Const in Javascript

sruthiragupathy — Sat, 08 Aug 2020 07:18:01 +0000

Before speaking about the keywords var,let and const, I believe it is extremely important to understand the concept of scope.

Global Scope

Variables declared outside any function (globally) have global scope

Here, the variable global can be accessed from anywhere.

Function Scope

Variables that are declared inside a function (locally) have function scope

Here, the variable local can be accessed only inside the function.

Block Scope

Some variables can be accessed only within block i.e.,within {}

Here , the variable block can be accessed only within the if block. It cannot be accessed from anywhere else. Thus, the variable block has only block scope.

Now that we are clear with the scope, let's dive into the var,let and const keywords

1.var

Scope

The variables defined with the keyword var have function scope.If it is defined outside the function , then the scope of the variable is global.

Here, the variable foo defined with the keyword var can be accessed from anywhere while the variable bar is limited to the function scope.

Redeclaration and Reassignment

The variables declared with the keyword var can be redeclared and reassigned.

Hoisting

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

Variables declared with var keyword are hoisted at the top of its scope and is initialized with undefined.

Here, the variable foo is declared later.But it is hoisted at the top and initialized to undefined.
Only variables declared with var keyword exhibit this behaviour.

In the above example, since the variable a is not declared with var keyword, it is not hoisted and hence trying to access the variable before declaration in the hoist function throws an error.

2.let

Scope

The variables declared with the keyword let have block scope.

Here, the variable i can be accessed only within the for loop.

Redeclaration and ReAssignment

Variables declared with let keyword cannot be redeclared, but it can be reassigned.

Hoisting

Variables declared with let are also hoisted at the top, but let variables are not initialized until their definition is evaluated.This is because of Temporal Dead Zone

Thus,trying to access the variable foo before declaration gives reference error.

3.const

Scope

The variables declared with the const keyword also have block scope.

Redeclaration and Reassignment

Variables declared with const keyword must be initialized at the time of its declaration itself.Otherwise an error is thrown.

Variables declared with const keyword cannot be redeclared and reassigned.

Attempting to overwrite objects with const keyword throws error. But object keys are not protected and they are mutable.

Here, we can see that the object cannot be reassigned, but the keys of the object are mutable.

Similarly arrays declared with const keyword cannot be overwritten. But the elements in the array is mutable.

Hoisting

Variables declared with const keyword behaves the same way as let keyword.They are hoisted at the top of the scope but they are not initialized until their definition is evaluated

var vs let vs const - A Summary

	var	let	const
Scope	Function or Global	Block	Block
Redeclare	Yes	No	No
Reassign	Yes	Yes	No
Hoisted	Yes	No	No