Accesing JavaScript Object’s Properties

Any object in JavaScript is just a collection of properties-values pairs, like { x: 0, y: 1 }; is a JavaScript Object with two properties x, y. As throughout the code we need to change either object’s properties or values. That’s why JavaScript have a number of functions specifically for dealing with this.

What are Object Properties?
Data values inside JavaScript objects are named as properties.


If you want to know about JavaScript objects like How to create these? then see – JavaScript Objects.

Ways to access Object Properties in JavaScript

JavaScript objects can be considered bubbles of data, but there need to be some ways to access that data(Gettting data out of object) otherwise what’s whole purpose of having Objects in JavaScript. For accessing object’s properties one of following method can be used –

  1. Dot property accessor
  2. Square brackets property accessor
  3. Object destructing accessor

Dot Property Accessor

Dot property accessor in JavaScript has syntax as object.property. For example – car.name;
This is simplest way of getting out value of an object’s property. Below is a code example explaining this –

// JavaScript Object Constructor
function tesla(name, model, price, color){
	this.name = name;
	this.model = model;
	this.price = price;
	this.color = color;
}
// Making an object from JavaScript constructor using new keyword
var a_car = new tesla("My car", "Model S", 100000, "red");

console.log(a_car.name);  // a_car.name would be "My car"

Square brackets property accessor

Square brackets property accessor uses a square bracket[] with name of object to access object’s property value. Common syntax of this is object[property], please note here that property have to be a string here.
Below is a code example for Square Brackets Property Accessor –

// JavaScript Object Constructor
function tesla(name, model, price, color){
	this.name = name;
	this.model = model;
	this.price = price;
	this.color = color;
}
// Making an object from JavaScript constructor using new keyword
var a_car = new tesla("My car", "Model S", 100000, "red");

console.log(a_car[name]);  // a_car.name would be "My car"

Object Destructing Accessor

Object’s destructing accessor is unique as it’s kind of destruct JavaScript object internally and then access value of property. Common syntax for this – const { identifier } = object.
Below is a code example explaining How does Object Destructing Accessor works in JavaScript?

// JavaScript Object Constructor
function tesla(name, model, price, color){
	this.name = name;
	this.model = model;
	this.price = price;
	this.color = color;
}
// Making an object from JavaScript constructor using new keyword
var a_car = new tesla("My car", "Model S", 100000, "red");

const { name } = tesla;
name;   // Returns value of name property of tesla object "My car"

Note – In case if property doesn’t exist inside object and you still try to access it using any of above three methods. Then all of these three methods will return undefined.

When to use which approach for accessing object’s property?

  1. Use dot property accessor, if name of property is known.
  2. Choose to use square brackets property accessor when property name is determined at runtime.
  3. Object destructing method would be better, if in case you need to create a variable with property’s value.

Why dot access is better than square brackets JavaScript?

Dot notation is clearly easier/faster to write as well as read. Square bracket notation allows to access as well as add properties to object at runtime, which dot notation cannot do.

Conclusion

Well, it’s upto you as a JavaScript Developer which method of out of available three you want to use for accessing object’s property. Personally I use object.property quite often, but use others if in case their functionality matches with what I want to do in code.

Moreover if your learning JavaScript Programming Language, then I’ve put together a lot of content about it on this website. You can also check those articles here – JavaScript Programming Langauge Computer Science Hub.

Gagan

Hi, there I'm founder of ComputerScienceHub(Started this to bring useful Computer Science information just at one place). Personally I've been doing JavaScript, Python development since 2015(Been long) - Worked upon couple of Web Development Projects, Did some Data Science stuff using Python. Nowadays primarily I work as Freelance JavaScript Developer(Web Developer) and on side-by-side managing team of Computer Science specialists at ComputerScienceHub.io

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Posts