JavaScript Course | Objects in JavaScript

Previous Topic: JavaScript Course | Functions in JavaScript
We have learned about different Data Types that javascript provides us, most of them primitive in nature. Objects are not primitive in nature and a bit complex to understand. Everything in javascript is basically an object, and that is the reason why it becomes very important to have a good understanding of what they are. Objects are used to store keyed collections of various data and more complex entities.
We can create objects in multiple ways. One is by making use of figure brackets {…} with an optional list of properties. The properties of an object are in the form of ‘key: value’ pair. Another way is to make use of the ‘new’ keyword.
An empty Object can be created using given below syntax.

let person = new Object(); // "object constructor" syntax
let person = {};  // "object literal" syntax

Both these method are correct, though it’s totally your call what to choose. We can also put properties inside an Object like:
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
// an object
let person = {     
  name: "Mukul"// by key "name" store value "Mukul"
  age: 22        // by key "age" store value 22
};
</script>

chevron_right


In the above example, we have a simple Object named ‘person’ which has two properties inside it i.e ‘name’ and ‘age’ in the form of ‘key: value’ pair where the key is to the left of the colon and the value always to the right.
After creating an object we must know hoe to access the properties of an object and there are two methods available for that.

 objectname.propertyname;  // dot notation
 objectname['propertyname']; // bracket notation

The first method is known as the ‘dot notation’ and the second one is known as ‘bracket notation’. Both does the same thing.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
// getting property values 
let person = {     
  name: "Mukul"// by key "name" store value "Mukul"
  age: 22        // by key "age" store value 22
};
document.write(person.name+'</br>'); 
document.write(person['age']);
</script>

chevron_right


Output:

Mukul
22 

We can add properties to an object at any time, same case with deleting the values.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
// an object
let person = {     
  name: "Mukul"// by key "name" store value "Mukul"
  age: 22        // by key "age" store value 22
};
// adding values to the person object
person.isHappy = 'false';
document.write(person.isHappy);
</script>

chevron_right


Output:

false

In order to add a property to an Object we simply write the name of the object and use the dot notation and assign a value and it automatically gets added to the object like the example above. In case we want to delete a property we use the delete keyword followed by the normal syntax of property accessing.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
// an object
let person = {     
  name: "Mukul"// by key "name" store value "Mukul"
  age: 22        // by key "age" store value 22
};
// adding values to the person object
delete person.age;
document.write(person.age);
</script>

chevron_right


Output:

undefined

In the above code we deleted the age property of the person Object and then we tried to print it to the screen, it will print ‘undefined’ as it doesn’t exist.

Looping through an Object
Looping through an Object is what a javascript developer must know. We make use of for..in loop while looping through an Object.

  for( let Key in person) {
    alert(key) // will print the property key
    alert(person[key]) // will print the value of each key
  }

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
// an object
let person = {     
  name: "Mukul"// by key "name" store value "Mukul"
  age: 22        // by key "age" store value 22
};
// looping using for..in loop
for( let key in person ) {
 alert(key);
 alert(person[key]);
}
</script>

chevron_right


Output:

name
Mukul
age
22

Next Topic: JavaScript Course | Task Tracker Project



My Personal Notes arrow_drop_up

Executive Software Developer at Cavisson Systems

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.