JavaScript Objects

In this tutorial, you will learn about JavaScript objects with the assistance of examples.

The object is a non-primitive data type in JavaScript. It resembles some other variable, the only contrast is that an object holds various values in terms of properties and strategies. Properties can hold values of primitive data types and techniques are functions.

In other programming languages like Java or C#, you need a class to make an object of it. In JavaScript, an object is an independent element because there is no class in JavaScript. In any case, you can accomplish class like functionality using functions. We will learn how to treat a function as a class in the advanced JavaScript area.

In the JavaScript data types tutorial, you found out around 7 diverse primitive data types. Furthermore, here, you will learn about the eighth data type (JavaScript object).

JavaScript object is a non-primitive data type that allows you to store different assortments of data.

Note: If you know about other programming languages, JavaScript objects are a bit extraordinary. You don’t have to make classes to make objects.

Here is an example of a JavaScript object.

// object
const student = {
    firstName: 'sohail',
    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 item object_name is characterized. Every individual from an object is a key: value pair separated by commas and enclosed in wavy braces {}.

For instance,

// object creation
const person = { 
    name: 'Salman',
    age: 20
};
console.log(typeof person); // object

You can also define an object in a single line.

const person = { name: 'Salman', age: 20 };

In the above example, name and age are keys, and Salman and 20 are values respectively.

---

JavaScript Object Properties

In JavaScript, “key: value” pairs are called properties. For example,

let person = { 
    name: 'Salman',
    age: 20
};

Here, name: ‘Salman’ and age: 20 are properties.

---

Accessing Object Properties

You can get to the value of a property by using its key.

1. Using dot Notation

Here’s the syntax of the dot notation.

objectName.key

For example,

const person = { 
    name: 'Salman', 
    age: 20, 
};

// accessing property
console.log(person.name); // Salman

---

2. Using bracket Notation

Here is the syntax of the bracket notation.

objectName["propertyName"]

For example,

const person = { 
    name: 'Salman', 
    age: 20, 
};

// accessing property
console.log(person["name"]); // Salman

---

JavaScript Nested Objects

An object can also contain another object. For example,

// nested object
const student = { 
    name: 'Salman', 
    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 likewise contain a function. For instance,

const person = {
    name: 'Haroon',
    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 is the reason we need to use a person.greet() rather than the person.greet to call the function inside the object.

A JavaScript method is a property containing a function declaration. In the next tutorial, you will learn about JavaScript Methods in detail.

---

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.

JS Objects