JavaScript Objects for Beginners

JavaScript is built on a simple paradigm based on objects. An object is a collection of properties, where a property is an association between a key and a value.

Objects in JavaScript can be compared to objects in other programming languages and to real-world objects. An object in JavaScript is an independent entity with certain properties.

If we compare this, for example, to a chair, then a chair is an object with specific properties. A chair has color, weight, the material it’s made from, and so on. Similarly, objects in JavaScript have properties that define their characteristics.

How to Create an Object in JavaScript?

JavaScript provides several ways to create objects, but the most common way is to use literal notation. This is better known in English and is called literal notation.

The code below creates an empty object using the method mentioned in the previous paragraph:

let empty = {};

To create an object with properties, you need to use the key : value pairs inside the curly braces. For example, the following code creates a new object named person:

let person = {
    firstName: 'Roee',
    lastName: 'Yossef'
};

This object has two properties, firstName and lastName, with values ‘Roee‘ and ‘Yossef‘ respectively. If it’s not clear, note that in a JavaScript object with more than one property, you need to separate the properties with a comma ( , ) as seen in the example above.

Please note that the property key must be a string, while the property value can be a string, number, array, or even a function…

Accessing Objects in JavaScript

Accessing object properties is possible through two methods: dot notation and array-like notation. Here are examples of both methods…

1. Using Dot Notation ( . )

The following example demonstrates how to use dot notation to access an object’s property:

objectName.propertyName

For instance, to access the firstName property of the person object, you can use the following expression:

person.firstName

If, for example, you want to print the values of the firstName and lastName properties in the browser’s console, you can do so as follows:

let person = {
    firstName: 'Roee',
    lastName: 'Yossef'
};

console.log(person.firstName);
console.log(person.lastName);

2. Using Array-like Notation ( [] )

The following example illustrates how to use array-like notation to access an object’s property:

objectName['propertyName']

For example:

let person = {
    firstName: 'Roee',
    lastName: 'Yossef'
};

console.log(person['firstName']);
console.log(person['lastName']);

Please note that if a property key contains spaces, you must enclose it in quotes. For example, for the building no property in the address object:

let address = {
    'building no': 1327,
    street: 'Nehemya 1st street',
    state: 'IL',
    country: 'Israel'
};

console.log(address['building no']);

Modifying and Changing Property Values

To change the value of a property, you use the assignment operator ( = ). For example:

let person = {
    firstName: 'Roee',
    lastName: 'Yossef'
};

person.firstName = 'Yony';

console.log(person);

Adding a New Property to an Object

Unlike programming languages like C# or Java, in JavaScript, you can add properties to objects after those objects are created.

The following statement adds the age property to the person object and assigns it the value 25:

person.age = 25;

Deleting a Property from an Object

To delete a property from an object, you can use the delete operator:

delete objectName.propertyName;

For example, to delete the age property from the person object:

delete person.age;

Checking if a Property Exists in an Object

To check if a property exists in an object, you can use the in operator:

propertyName in objectName

The in operator will return true if the propertyName exists in the objectName.

Here’s an example where we create an object named employee and use the in operator to check if the properties employeeAddress and employeeId exist in this object:

let employee = {
    firstName: 'Roee',
    lastName: 'Yossef',
    employeeId: 1
};

console.log('employeeAddress' in employee);
console.log('employeeId' in employee);

Results:

false
true

Conclusion

This concludes the introduction to objects in JavaScript. Hope you enjoyed it…