JavaScript Course Objects in JavaScript
Last Updated :
10 Mar, 2023
We have learned about different Data Types that javascript provides us, most of them primitive in nature. Objects are not primitive in nature and are 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 the given below syntax.
let person = new Object(); // Syntax of "object constructor"
let person = {}; // Syntax of "object literal"
Both these method are correct, though it's totally your call what to choose. We can also put properties inside an Object like.
Example:
javascript
// An object
let person = {
name: "Mukul", // By key "name" store value "Mukul"
age: 22 // By key "age" store value 22
};
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 how 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:
javascript
// Getting property values
let person = {
name: "Mukul", // By key "name" store value "Mukul"
age: 22 // by key "age" store value 22
};
console.log(person.name);
console.log(person['age']);
Output:
Mukul
22
We can add properties to an object at any time, the same case with deleting the values.
Example:
javascript
// 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';
console.log(person.isHappy);
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 in 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:
javascript
// 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;
console.log(person.age);
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:
javascript
// 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 ) {
console.log(key);
console.log(person[key]);
}
Output:
name
Mukul
age
22
Similar Reads
Introduction to JavaScript Course - Learn how to build a task tracker using JavaScript This is an introductory course about JavaScript that will help you learn about the basics of javascript, to begin with, the dynamic part of web development. You will learn the basics like understanding code structures, loops, objects, etc. What this course is about? In this course we will teach you
4 min read
JavaScript Course What is JavaScript ? JavaScript is a very famous programming language that was originally started in the year of 1995 with the motive of making web pages alive. It is also an essential part of the web developer skillset. In simple terms, if you want to learn web development then learn HTML & CSS before starting JavaScri
3 min read
JavaScript Hello World The JavaScript Hello World program is a simple tradition used by programmers to learn the new syntax of a programming language. It involves displaying the text "Hello, World!" on the screen. This basic exercise helps you understand how to output text and run simple scripts in a new programming envir
2 min read
JavaScript Course Understanding Code Structure in JavaScript Inserting JavaScript into a webpage is much like inserting any other HTML content. The tags used to add JavaScript in HTML are <script> and </script>. The code surrounded by the <script> and </script> tags is called a script blog. The 'type' attribute was the most important a
3 min read
JavaScript Course Variables in JavaScript Variables in JavaScript are containers that hold reusable data. It is the basic unit of storage in a program. The value stored in a variable can be changed during program execution. A variable is only a name given to a memory location, all the operations done on the variable effects that memory loca
4 min read
JavaScript Data Types In JavaScript, each value has a data type, defining its nature (e.g., Number, String, Boolean) and operations. Data types are categorized into Primitive (e.g., String, Number) and Non-Primitive (e.g., Objects, Arrays).Primitive Data Type1. NumberThe Number data type in JavaScript includes both integ
5 min read
JavaScript Course Operators in JavaScript An operator is capable of manipulating a certain value or operand. Operators are used to performing specific mathematical and logical computations on operands. In other words, we can say that an operator operates the operands. In JavaScript, operators are used for comparing values, performing arithm
7 min read
JavaScript Course Interaction With User Javascript allows us the privilege to which we can interact with the user and respond accordingly. It includes several user-interface functions which help in the interaction. Let's take a look at them one by one. JavaScript Window alert() Method : It simply creates an alert box that may or may not h
2 min read
JavaScript Course Logical Operators in JavaScript logical operator is mostly used to make decisions based on conditions specified for the statements. It can also be used to manipulate a boolean or set termination conditions for loops. There are three types of logical operators in Javascript: !(NOT): Converts operator to boolean and returns flipped
3 min read
JavaScript Course Conditional Operator in JavaScript JavaScript Conditional Operators allow us to perform different types of actions according to different conditions. We make use of the 'if' statement. if(expression){ do this; } The above argument named 'expression' is basically a condition that we pass into the 'if' and if it returns 'true' then the
3 min read