Skip to content

How to access object in JavaScript | Properties

  • by

You can access the properties of an object in JavaScript in 3 ways. Simple use Dot property or Square brackets to access objects in JavaScript.

  1. Dot property accessor: object.property
  2. Square brackets property access: object['property']
  3. Object destructuring: const { property } = object

Access object in JavaScript

Simple example code access the property of an object using dot notation and bracket notation property. You can use the dot property accessor in a chain to access deeper properties: object.prop1.prop2.

<!DOCTYPE html>
<html>
<body>
  <script >
    const Employee = {
      f: 'John',
      l: 'King'
    };

    // Dot 
    console.log(Employee.f);
    console.log(Employee.l);

    // Square brackets 
    console.log(Employee['f']);
    console.log(Employee['l']);

    console.log(Employee);
  </script>
</body>
</html>

Output:

How to access object in JavaScript

Object destructuring

<!DOCTYPE html>
<html>
<body>
  <script >
    const hero = {
      name: 'Batman'
    };
    
    // Object destructuring:
    const { name } = hero;
    console.log(name); // 'Batman'
  </script>
</body>
</html>

If property doesn’t exist in Object

If the accessed property doesn’t exist, all 3 methods will evaluate to undefined:

const hero = {
  characterName: 'Batman'
};
console.log(hero.name);    // undefined
console.log(hero['name']); // undefined

const { name } = hero;
console.log(name);         // undefined

How to Dynamically Access Object Property Using Variable in JavaScript?

Answer: Use the Square Bracket ([ ]) Notation, Where the dot notation is easier to read and write, the square bracket notation offers much more flexibility since the value between the brackets can be any variable or expression.

var obj = {
    name: "Peter Parker",
    age: 16,
    country: "United States"
}
    
// Property name stored in variable
var prop = 'name';
    
// Accessing property value
alert(obj[prop]); // Peter Parker

Do comment if you have any doubts or suggestions on this JS object topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading