JS - Difference between period and [] while accessing a JSON object

Question

What is the difference between accessing a JSON object using period (.) and [] notation in Javascript. For instance,

var person = {
    "firstName": "Foo", 
    "lastName":"Bar"
}

I'm sure accessing the "firstName" and the "lastName" variables give me the same output type (string),i.e.

console.log(typeof person.firstName); // returns string
console.log(typeof person.lastName); // returns string

Also, accessing it both the ways, using . or [] will give me the same result:

console.log(person.firstName); // returns Foo
console.log(person['firstName']); // returns Foo

I'm trying to understand when to use which notation and when not to and the actual difference between them. I read somewhere that we can't use the dot notation if the data is complicated, I'm not sure what it means, tested out a couple of sample input data:

"firstName": " Foo Bar "
"firstName": "@#@#$% Foo Bar!!!"

Interestingly, both gives me the same result, can someone please explain me what's the actual difference between these two notations and when to access which?

console.log(person['firstName']); should return Foo as well not Bar — Akin Hwan, Jan 30 '19 at 17:43
accessing with `[]` is more used when the property will be dynamic and you don't know if it will be `firstName` or `lastName` (maybe because it comes from user selection or something) so you have it stored in a variable and use the variable name like: `person[variableName]`. But anyway, both methods are valid — Calvin Nunes, Jan 30 '19 at 17:45
Possible duplicate of [JavaScript property access: dot notation vs. brackets?](https://stackoverflow.com/questions/4968406/javascript-property-access-dot-notation-vs-brackets) and [Difference between using bracket (`[]`) and dot (`.`) notation](https://stackoverflow.com/questions/17189642) — adiga, Jan 30 '19 at 17:50
I found several duplicates just by googling the title without making any changes. See: [How much research effort is expected of Stack Overflow users?](https://meta.stackoverflow.com/a/261593/3082296) — adiga, Jan 30 '19 at 17:52
[JavaScript Quickie— Dot Notation vs. Bracket Notation](https://codeburst.io/javascript-quickie-dot-notation-vs-bracket-notation-333641c0f781) — Yousaf, Jan 30 '19 at 17:54
Three GREAT answers already exist here: https://stackoverflow.com/a/4968448/5411817 and https://stackoverflow.com/a/11922384/5411817 and https://stackoverflow.com/a/50738382/5411817 — SherylHohman, Jan 30 '19 at 18:52

Akin Hwan · Answer 1 · 2019-01-30T21:17:16.313

1

They are both valid ways of accessing Object Values.

edited Jan 30 '19 at 21:17

answered Jan 30 '19 at 17:44

Akin Hwan

607
1
9
26

2

This article is very bad, [there is no such thing as a "JSON Object"](http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/). They have often lacking or plain wrong content and you should have a look at [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects) instead. – str Jan 30 '19 at 17:51

score 0 · Answer 2 · answered Jan 30 '19 at 17:45

0

Welcome to Stackoverflow!

The main difference between the two is that using bracket notation allows you to define and access properties with spaces in them -- something one cannot do with dot notation.

var foo = {
 "I AM BAR": 1 
}

If you wanted to access the single property "I AM BAR" on foo, with bracket notation, it would look like: foo["I AM BAR"]. This is not possible with dot notation.

answered Jan 30 '19 at 17:45

Pytth

4,008
24
29

This makes sense, forgot to test that one. Thanks @Pytth – Vamsi Vikash Jan 30 '19 at 17:47

score 0 · Answer 3 · answered Jan 30 '19 at 17:46

0

There are not difference. The [] approach is useful when you need find a key with a variable. Like:

const theKey = 'test';
theArray[theKey]; // this work
theArray.theKey; // this dont work

answered Jan 30 '19 at 17:46

German Burgardt

375
1
5

score 0 · Answer 4 · answered Jan 30 '19 at 17:46

Using dot notation you must provide the exact propertyName but you are able to work with the name when using [].

var person = {
    "firstName": "Foo", 
    "lastName":"Bar"
}

Using . you can only access by

console.log(person.firstName); // returns Foo

Using [] you could access value with variable

let couldChange = 'Name';
console.log(person['first'+couldChange]); // returns foo
console.log(person['last'+couldChange]); // returns bar

score 0 · Answer 5 · answered Jan 30 '19 at 17:47

Most of the time you will use dot notation. Unless you need the property on the object you need to access to be dynamic. This is because the value you pass into the brackets could be a variable as long it resolves to a string. Check out this link for more info:

https://codeburst.io/javascript-quickie-dot-notation-vs-bracket-notation-333641c0f781

score 0 · Answer 6 · answered Jan 30 '19 at 17:48

Most of the time, there's no difference, see Property accessors (MDN), but you cannot use dot notation when the property name is not a valid identifier name, e.g. when it's representation is not a string, or when you need to use a variable to name the property.

obj[1]   // is valid
obj["1"] // is the same
obj.1    // is NOT valid

const propertyName = 1;
obj[propertyName] // the same as obj[1]
obj.propertyName  // not same

score 0 · Answer 7 · answered Jan 30 '19 at 17:49

Using brackets can allow you to use a variable value to access object properties whereas dot notation won't. For example:

var propName = 'age';

var o = {
  name: 'Tom',
  age: '29',
  about: 'He\'s a cool guy!'
};

console.log(o.propName); //  <-- Will be undefined
console.log(o[propName]); // <-- Bingo

JS - Difference between period and [] while accessing a JSON object

7 Answers7