JavaScript Objects
What is Objects in JavaScript
JavaScript variables can hold different data types: numbers, strings, objects and more.
JavaScript object is a non-primitive data-type that allows you to store multiple collections of data.
In JavaScript objects are the most used data types.
In JavaScript, objects are king. If you understand objects, you understand JavaScript.
Note: If you are familiar with other programming languages, JavaScript objects are a bit different. You do not need to create classes in order to create objects.
In JavaScript, almost “everything” is an object.
- Booleans can be objects (if defined with the
new
keyword) - Numbers can be objects (if defined with the
new
keyword) - Strings can be objects (if defined with the
new
keyword) - Dates are always objects
- Maths are always objects
- Regular expressions are always objects
- Arrays are always objects
- Functions are always objects
- Objects are always objects
All JavaScript values, except primitives, are objects.
Here is an example of a JavaScript object.
// object const student = { firstName: 'ram', class: 10 };
Here, student
is an object that stores values such as strings and numbers.
JavaScript Object Declaration
The syntax to declare an object is:
const object_name = { key1: value1, key2: value2 }
Here, an object object_name
is defined. Each member of an object is a key: value pair separated by commas and enclosed in curly braces {}
.
Objects written as name value pairs are similar to:
- Associative arrays in PHP
- Dictionaries in Python
- Hash tables in C
- Hash maps in Java
- Hashes in Ruby and Perl
For example,
// object creation
const person = {
name: 'John',
age: 20
};
console.log(typeof person); // object
You can also define an object in a single line.
const person = { name: 'John', age: 20 };
In the above example, name
and age
are keys, and John
and 20
are values respectively.
JavaScript Object Properties
In JavaScript, “key: value” pairs are called properties. For example,
let person = { name: 'John', age: 20 };
Here, name: 'John'
and age: 20
are properties.
![](https://cdn.programiz.com/sites/tutorial2program/files/javascript-object-properties.png)
Accessing Object Properties
There is two way we can access the value of a object:
- Using Dot Notation
- Using Bracket Notation
You can access the value of a property by using its key.
Using dot Notation
Here’s the syntax of the dot notation.
objectName.key
For example,
const person = { name: 'John', age: 20, }; // accessing property console.log(person.name); // John
Using bracket Notation
Here is the syntax of the bracket notation.
const person = { name: 'John', age: 20, }; // accessing property console.log(person["name"]); // John
JavaScript Nested Objects
An object can also contain another object. For example,
// nested object const student = { name: 'John', age: 20, marks: { science: 70, math: 75 } } // accessing property of student object console.log(student.marks); // {science: 70, math: 75} // accessing property of marks object console.log(student.marks.science); // 70
In the above example, an object student
contains an object value in the marks
property.
JavaScript Object Methods
In JavaScript, an object can also contain a function. Objects can also have methods. Methods are actions that can be performed on objects. Methods are stored in properties as function definitions.
For example,
const person = { name: 'Sam', age: 30, // using function as a value greet: function() { console.log('hello') } } person.greet(); // hello
Here, a function is used as a value for the greet key. That’s why we need to use person.greet() instead of person.greet to call the function inside the object.
Let’s Check Another Example
const person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } };
In the example above, this
refers to the person object.
I.E. this.firstName means the firstName property of this.
I.E. this.firstName means the firstName property of person.
To access the object method with the following syntax:
objectName.methodName()
Example
name = person.fullName();
If you access a method without the () parentheses, it will return the function definition:
name = person.fullName;
When a JavaScript variable is declared with the keyword “new“, the variable is created as an object:
x = new String(); // Declares x as a String object y = new Number(); // Declares y as a Number object z = new Boolean(); // Declares z as a Boolean object
Cautions: Do Not Declare Strings, Numbers, and Booleans as Objects! They complicate your code and slow down execution speed.
Note:
this
is not a variable. It is a keyword. You cannot change the value ofthis
.