Dot and Square Bracket Notation

by

In dot notation, the name after the dot is the name of the property being referenced. So:

var foo = "bar";
var obj = { foo: 1, bar: 2 };

console.log(obj.foo) // = 1, since the "foo" property of obj is 1,
                     //      independent of the variable foo

However, in square-bracket notation, the name of the property being referenced is the value of whatever is in the square brackets:

var foo = "bar";
var obj = { foo: 1, bar: 2 };

console.log(obj[foo])   // = 2, since the value of the variable foo is "bar" and
                        //      the "bar" property of obj is 2

console.log(obj["foo"]) // = 1, since the value of the literal "foo" is "foo" and
                        //      the "foo" property of obj is 1

In other words, dot-notation obj.foo is always equivalent to obj["foo"], while obj[foo] depends on the value of the variable foo.

In the specific case of your question, note the differences between dot notation and square-bracket notation:

// with dot notation
var obj = { name: "John Doe", age: 30 };
var key = "age";
var value = 60;

obj.key = value; // referencing the literal property "key"
console.log(obj) // = { name: "John Doe", age: 30, key: 60 }


// with square bracket notation
var obj = { name: "John Doe", age: 30 };
var key = "age";
var value = 60;

obj[key] = value; // referencing property by the value of the key variable ("age")
console.log(obj)  // = { name: "John Doe", age: 60 }

More Related Contents:

  1. var functionName = function() {} vs function functionName() {}
  2. JavaScript property access: dot notation vs. brackets?
  3. Explain the encapsulated anonymous function syntax
  4. Question mark and colon in JavaScript
  5. Why can’t I access a property of an integer with a single dot?
  6. Why does ++[[]][+[]]+[+[]] return the string “10”?
  7. What does a tilde do when it precedes an expression?
  8. What does the plus sign do in ‘+new Date’
  9. Convert string in dot notation to get the object reference [duplicate]
  10. How can I refer to a variable using a string containing its name?
  11. Why should I use a semicolon after every function in javascript?
  12. Difference between using bracket (`[]`) and dot (`.`) notation [duplicate]
  13. What is the correct syntax of ng-include?
  14. Is localStorage.getItem(‘item’) better than localStorage.item or localStorage[‘item’]?
  15. Double quotes within php script echo
  16. difference between dot notation and bracket notation in javascript [duplicate]
  17. Use a concatenated (dynamic) string as JavaScript object key? [duplicate]
  18. Syntax highlighting code with Javascript [closed]
  19. Why does 10..toString() work, but 10.toString() does not? [duplicate]
  20. syntax error: unexpected token
  21. “elseif” syntax in JavaScript
  22. What is the decimal separator symbol in JavaScript?
  23. What is the purpose of a semicolon before an IIFE? [duplicate]
  24. What is “?:” notation in JavaScript?
  25. JSON syntax for property names
  26. Does assignment with a comma work?
  27. javascript syntax: function calls and using parenthesis
  28. JavaScript dot notation [duplicate]
  29. What’s the reason for using such syntax (0, _.Em)();
  30. Javascript history.PushState not working?

Leave a Comment