Object literals basic.

 1) Javascript Objects:

JavaScript object is a non-primitive data-type that allows you to store multiple collections of data. You do not need to create classes in order to create objects.


The syntax to declare an object is:


const object_name = {

   key1: value1, //---> properties

   key2: value2

}


2)EXAMPLE 1: Creating basic object literals








objectname.property is the syntax to access a particular property of an object. In the Example "console.log(animal.legs)" is used to access the legs property of the object animal and print the value of the property (i.e., 5) to the console.




3)EXAMPLE 2: Nested object inside an already existing object










1) Here, the object "food :" in line no.4 is a nested object inside the already existing object "animal" in line no.1. Notice that the parent object uses ' = ' sign while the nested object uses ' : ' to write their properties.

2) In line no.9 console.log(animal.legs) is used to access the legs property of the "animal" class and print its' value (i.e., 4) in the console.

3) The syntax to access the properties of the nested object is :
 " parentobjectName.nestedobjectName.propertyName " . In line no.10, "console.log(animal.food.carnivore)" is used to access the carnivore property of the nested class food and print its' value (i.e., true) in the console.







4) EXAMPLE 3: Mutating/ Changing the value of properties of the objects.











1) Just like arrays, we can mutate the value of the object property by using this syntax:
" objectName.propertyName = New value" . 

2) In line no.11 we have changed the value of legs property from 4 to 6 and in line no.12 we are printing it in the console. 

3) So the output for line no.9 before mutating = 4 , and output for line no.12 = 6.








5) EXAMPLE 4: Another syntax for accessing the properties of the object ( objectName["propertyName"] syntax











1) In all the previous examples we have the dot syntax ( objectName.propertyName) to access the properties, there's another syntax too, and its' square box syntax
 ( objectName["propertyName"] ).

2) In line no.12 we used the syntax console.log(animal["legs']), to access legs property of the animal object and print its' value (i.e., 6) to the console.







6) EXAMPLE 5: Adding brand new property: value pairs to the object.













1) Here in line no.13, we are adding a brand new property tail with the value 1 to the animal object and the syntax is animal.tail = 1.

2) In line no.14, we are printing the entire new object with the new property in the console.














7)
8)
9)
10)

Comments

Post a Comment

Popular posts from this blog

Object.getOwnPropertyDescriptor & Object.defineProperty Methods.

Image
  1)  Property Descriptor: When we create a JavaScript object, whether using object literal syntax or some other means and add some properties to it, each property (key) gets a default property descriptor. A property descriptor is a simple JavaScript object associated with each property of the object that contains information about that property such as its value and other meta-data. 2) Access Property Descriptor: We need to use a static method provided by the Object. The Object.getOwnPropertyDescriptor method returns the property descriptor of the "prop" which is the property name on the "obj" object. Object.getOwnPropertyDescriptor(obj, prop); Own here means return the property descriptor of prop property only if that property belongs to the object obj and not on its prototype chain. If the property prop doesn’t exist on obj, it returns undefined. The Object.getOwnPropertyDescriptor method returns an object with keys describing the setting and current value of th...
Read more

Scope and Closures / Callback Hell

Image
  1)  Scope: 1) Scope in JavaScript actually determines the accessibility of variables and functions at various parts in one’s own code or program. 2) Scope will help us to determine a given part of a code or a program, what variables or functions one could access and what variables or functions one cannot access. 3) Within a scope itself, a variable or a function, or a method could be accessed. Outside the specified scope of a variable or function, the data cannot be accessed. 4) There are three types of scopes available in JavaScript: Global Scope, Local / Function Scope, and Block Scope.  //global scope let global = "Swati" ; function func1 () { return global; } function func2 () { return func1 (); } console. log ( func2 ()); //local scope function func1 () { let a = 2 ; let multiply = function () { console. log (a * 5 ); } multiply (); } func1 (); //Block scope { let a = 5 ; } console. log (a); 2) Scope Nesting: //Bl...
Read more

DOM - Document Object Model (document.getElementById etc.)

Image
  1)  DOM: What is the DOM? The DOM stands for Document Object Model. It can simply be understood as a tree of nodes created by the browser. Each of these nodes has its own properties and methods which can be manipulated using JavaScript. The ability to manipulate the DOM is one of the most unique and useful abilities of JavaScript. ** A "node", in this context, is simply an HTML element. The "DOM" is a tree structure that represents the HTML of the website, and every HTML element is a "node".   “document” is an object of the Document interface in the browser's Document Object Model (DOM). The Document interface represents an HTML or XML document that can be loaded in a web browser or processed by JavaScript code running in the browser. The “document” object provides a way for JavaScript code to access and manipulate the contents of the web page represented by the Document interface. The document object has properties and methods that allow you to get ...
Read more