Index

JavaScript
JavaScript Examples
CSS
CSS Examples

JavaScript Tutorial

JavaScript Examples

CSS Tutorial

CSS Examples

JavaScript - Accessing an object property with a dynamically-computed name

By IncludeHelp Last updated : September 28, 2024

In this article, we will learn how to access an object property with a dynamically-computed name in JavaScript. A dynamically-computed name refers to a property name that is determined at runtime rather than being hard-coded in the source code.

Before discussing the possible solutions directly, let's first briefly discuss the concept of an object and its properties.

JavaScript Object

In JavaScript, an object is a collection of key-value pairs, where each key is a string, and the value can be of any data type, including other objects, functions, arrays, or primitive values like strings and numbers. The key is also known as the property of an object.

Following is the snippet of code that provides a clear understanding of the object creation and its properties that will help you while providing the solution to the above problem.

const person = {
  name: 'Alvin',
  age: 30,
  city: 'California'
};

Where, a person is an object, and "name", "age", and "city" are known as property or key of a person's object.

Access an object property with a dynamically-computed name using square[] bracket

In JavaScript, the square[] bracket notation is used for various purposes such define array values and access of assigned object properties (keys) values.

This is the most common way to access an object property with a dynamically-computed name in JavaScript, you can use bracket notation. This allows you to use a variable or an expression to specify the property name.

Example

In the following example, we will use the square[] brackets to access an object property with a dynamically-computed name:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object Property Example</title>
  </head>
  <body>
  <p>Example of accessing an object property with a dynamically-computed name</p>

  <script>
    const person = {
      name: 'Alvin',
      age: 25,
      city: 'California, USA'
    };
    const propertyName = 'name';
    document.write("Age: " + person[propertyName]);
    // You can also compute the property name dynamically
    const dynamicKey = 'city';
    document.write("<br>Name: " + person[dynamicKey]);
  </script>
  </body>
</html>

Output

The above program produces the following output:

Access an object property with a dynamically-computed name using a function

A function is a block of code in JavaScript that performs some logic and can be reused throughout the entire code.

You can also define a function that takes a property name as a parameter and returns the value.

Example

Following is another example of accessing an object property with a dynamically-computed name:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object Property Example</title>
  </head>
  <body>
  <p>Example of accessing an object property with a dynamically-computed name</p>
  
  <script>
    const myObj = {
      name: 'Alvin',
      age: 30
    };
    
    function getProperty(myObj, prop) {
      return myObj[prop];
    }
    document.write("Age: " + getProperty(myObj, "age"));
  </script>
  </body>
</html>

Output:

After executing the above program, the following output will be displayed:

How does the 'this' keyword work, and when should it be used?

Number Guessing Game using JavaScript

Comments and Discussions!

Load comments ↻