JavaScript Objects Tutorial

What are the JavaScript Objects?

JavaScript objects are collections of named values that are used to represent real-world entities such as users, products, or orders.
They can be used to store any type of data, such as strings, numbers, arrays, and other objects.
They can also be used to store complex data structures such as trees, graphs, and hash tables.
They are made up of key-value pairs, where the key is a string and the value can be anything, including other objects, arrays, or functions.

const variable_name = {
    key : value,
    key : value,
    key : method()
}

Creating Objects in JavaScript

There are two ways to create objects in JavaScript. They are:
Object literals and the Object constructor.

// Using object literals
const user = {
    firstName: "Jack",
    lastName: "Salvatore",
};
console.log(user) // Output: { firstName: 'Jack', lastName: 'Salvatore' }

// Using the Object constructor
const car = new Object();
car.make = "Toyota";
car.model = "Camry";
console.log(car); // Output: { make: 'Toyota', model: 'Camry' }

The user object is created using an object literal. Object literals are a easy way to create objects in JavaScript. The properties (firstName and lastName) and their values are defined directly within curly braces.

The car object is created using the Object constructor. The make and model properties are then added to the object using dot notation. While this method is less common than object literals, it allows for dynamic property assignment.

Accessing Object Properties

You can access object properties using dot notation or bracket notation.

console.log(user.firstName); // Output: Jack
console.log(car['make']);     // Output: Toyota

Adding and Modifying Properties

You can add or modify properties of an object at any time.

user.age = 30;        // Add a new property
car['year'] = 2022;     // Add a new property using bracket notation
person.firstName = "Jane"; // Modify an existing property

Deleting Properties

You can delete object properties if you want using the delete keyword.

delete user.age;
delete car['year'];

Checking if a Property Exists

You can check if an object has a specific property using the in operator.

console.log('age' in user);  // Output: false (if 'age' is deleted)
console.log('year' in car);    // Output: false (if 'year' is deleted)

Object Methods

Objects can also have functions as properties, known as methods.
We will teach you functions completely in later tutorial. But, for now take it as a warm up for that.

const calculator = {
add: function (a, b) {
    return a + b;
},
subtract(a, b) {
    return a - b;
},
};

console.log(calculator.add(5, 3));      // Output: 8
console.log(calculator.subtract(10, 4)); // Output: 6

Looping Through Object Properties

You can loop through an object's properties using for...in loop.

for (const key in user) {
    console.log(key + ': ' + user[key]);
  }

  /* Output: 
firstName: Jack
lastName: Salvatore
*/

for (const key in user): This initiates a for...in loop that iterates over the properties of the user object. In each iteration, key will be the name of a property.

console.log(key + ': ' + user[key]);: Inside the loop, it logs the concatenation of the current property name key, a colon :, and the corresponding value user[key].

Object Shorthand

You can use object shorthand to create objects with properties based on variable names.

const name = "Alice";
const age = 25;

const person = { name, age };
console.log(person); // Output: { name: "Alice", age: 25 }

Object Destructuring

You can extract specific properties by destructuring the objects.

const { firstName, lastName } = user;
console.log(firstName, lastName); // Output: Jack Salvatore

Destructuring assignment is used here to create two variables firstName and lastName and assign them the values of the corresponding properties from the user object.

Object Cloning

You can create a shallow copy of an object using the spread operator.

const clonedPerson = { ...user };
console.log(user) /* Output:{ firstName: 'Jack', lastName: 'Salvatore' }

Previous Next