access object properties in javascript

Understanding how to access object properties in JavaScript is a fundamental ability needed for effective programming. With it, you can retrieve and manipulate data within object structures, which is an essential part of creating dynamic web applications.

Accessing Object Properties Directly

Firstly, let’s take a look at how to access object properties directly.

var book = {
    title: "To Kill A Mockingbird",
    author: "Harper Lee",
    year: 1960
};
console.log(book.title); // Outputs: "To Kill A Mockingbird"

Code Explanation: Accessing Object Properties Directly

In the above code snippet, we created an object named “book” using the object literal syntax. The object has three properties: title, author, and year. We accessed the property title of the object book using dot notation. “Dot notation” is a way to access an object’s property using a chaining of the object’s name, followed by a dot (.), then by the property’s name. After calling the value of the title property, it gets logged to the console.

Accessing Object Properties with Bracket Notation

Now, let’s see how to access object properties using bracket notation.

var book = {
    title: "To Kill A Mockingbird",
    author: "Harper Lee",
    year: 1960
};
console.log(book["author"]); // Outputs: "Harper Lee"

Code Explanation: Accessing Object Properties with Bracket Notation

In this example, we use bracket notation to access the author property of our book object. Bracket notation is especially useful when the property name is stored in a variable, or when the property name is not a valid JavaScript identifier. For instance, properties with spaces in their names, or properties whose names are numbers, can only be accessed using bracket notation. The property name, in this case, “author”, is used as a string inside the brackets to select it from our book object.

Accessing Object Properties using a Variable

There is also a way of accessing object properties using a variable.

var book = {
    title: "To Kill A Mockingbird",
    author: "Harper Lee",
    year: 1960
};

var propName = "year";
console.log(book[propName]); // Outputs: 1960

Code Explanation: Accessing Object Properties using a Variable

In this scenario, if you needed to access an object property, but the exact property to be accessed was not known until the run-time, you could store the probable property name in a variable. Then the property name can be retrieved using that variable within bracket notation. In our example, we stored the “year” property name in a variable named propName. When propName gets used in bracket notation, JavaScript recognizes it as a variable and fetches its value (“year” in this case) and then retrieves the corresponding property value from our book object.

By understanding these techniques, you can more effectively interact with objects within your JavaScript code, thereby enhancing your programming capabilities.