How come variable can be used as object properties?

I was learning JS course. saw this code:

const article = {
  "title": "How to create objects in JavaScript",
  "link": "https://www.freecodecamp.org/news/a-complete-guide-to-creating-objects-in-javascript-b0e2450655e8/",
  "author": "Kaashan Hussain",
  "language": "JavaScript",
  "tags": "TECHNOLOGY",
  "createdAt": "NOVEMBER 28, 2018"
};

const articleAuthor = article["author"];
const articleLink = article["link"];

const value = "title";
const valueLookup = article[value];

Question 1: Second Last line. variable ‘value’ is being set to ‘title’. Why not article.title ?

Question 2: ‘value’ is a separate variable. Not a property of article. Why use article[value] ?

1 Like

Dot notation can only be used with exact literal property names. Sometimes you don’t have the exact literal name of the property that you need when you write the code.

This lets you be flexible when you write the code about which property you need to access

1 Like

this is very cool thing actually, it allows you access different properties of object, depending on what is assigned to variable(value in this case), without it sometimes is not easy to write concise codes

1 Like

I found this article about objects that might interest you: JavaScript Object Keys Tutorial – How to Use a JS Key-Value Pair.

There’s also this one: Dot Notation vs Bracket Notation for Object Properties – What’s the Difference?

1 Like

Based upon this, can we say that object properties are independent variables by themselves?

I mean, I can call ‘author’ as variable anywhere instead of using
'article.author ’ ?

No. That’s the opposite from what I’m saying.

Dot notation uses literal property names. Bracket notation uses variables.

2 Likes

Absolutely not. author is a property of article and is entirely dependent on the article object to hold its value.

Consider the following:

const firstArticle = { author: 'J. Chezcowicz' };
console.log(firstArticle.author);
const secondArticle = { author: 'E. Smith' };
console.log(secondArticle.author);

//Undefined
console.log(author);

Both of these objects have an author property, but they are dependent on the object to hold their value. And you’ll see that there is no author variable. You are using dot notation to specifically reference a property on the object.

But, when you want to dynamically grab a property from an object, you can use the value of a variable as the object’s property name with bracket notation like so:

const myProperty = 'author';

const firstArticle = { author: 'J. Chezcowicz' };
console.log(firstArticle[myProperty]);
const secondArticle = { author: 'E. Smith' };
console.log(secondArticle[myProperty]);

//Still undefined
console.log(author);

You use the value inside of the myProperty variable to access that property. In this case, myProperty’s value is author so it is accessing the author property of each object.

2 Likes

Thanks.

This explains the concept nicely. using brackets makes the variable’s value to get calculated dynamically. and using dot is static so it treats it as is. Thanks bro

2 Likes

Anytime my friend. Take it easy! :+1:

1 Like

I understand that now. Thanks

2 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.