Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Difference between using bracket (`[]`) and dot (`.`) notation [duplicate]

What is the real difference in using [] and . for accessing array or object properties? Which one to use?

Also why doesn't . operator allow the index property?

like image 327
Maizere Pathak.Nepal Avatar asked Jun 19 '13 11:06

Maizere Pathak.Nepal


People also ask

What is the difference between dot notation and bracket notation?

The dot notation is used mostly as it is easier to read and comprehend and also less verbose. The main difference between dot notation and bracket notation is that the bracket notation allows us to access object properties using variable.

How can we use dot notation or bracket notation to access an object's values?

Bracket notation is another way to access a property of an object. To use bracket notation, write the name of the object, followed by brackets [] . Inside the brackets, write the property name as a string. Bracket notation, unlike dot notation, can be used with variables.

Why are dot notation and bracket notation so useful?

Dot notation is faster to write and clearer to read. Square bracket notation allows access to properties containing special characters and selection of properties using variables.

Why do we use bracket notation?

Bracket Notation & Variables Bracket notation gives us the ability to use variables to access values in an object. This is especially helpful with the value of the variable changes.


2 Answers

Accessing members with . is called dot notation. Accessing them with [] is called bracket notation.

The dot notation only works with property names which are valid identifier names [spec], so basically any name that would also be a valid variable name (a valid identifier, see also What characters are valid for JavaScript variable names?) and any reserved keyword [spec].

Bracket notation expects an expression which evaluates to a string (or can be coerced to a string), so you can use any character sequence as property name. There are no limits to what a string can contain.

Examples:

obj.foo;  // valid
obj.else  // valid, reserved keywords are valid identifier names
obj.42    // invalid, identifier names cannot start with numbers
obj.3foo  // invalid,                ""
obj.foo-bar // invalid, `-` is not allowed in identifier names

obj[42]   // valid, 42 will be coerced to "42"
obj["--"] // valid, any character sequence is allowed
obj[bar]  // valid, will evaluate the variable `bar` and 
          // use its value as property name

Use bracket notation:

  • When the property name is contained in a variable, e.g. obj[foo].
  • The property name contains characters not permitted in identifiers, e.g. starts with a digit, or contains a space or dash (-), e.g. obj["my property"].

Use dot notation: In all other situations.

There is a caveat though regarding reserved keywords. While the specification permits to use them as property names and with the dot notation, not all browsers or tools respect this (notably older IE versions). So the best solution in my opinion is to avoid using reserved keywords for property names or use bracket notation if you cannot.


†: That's also the reason why you can only use bracket notation to access array elements. Identifiers cannot start with digits, and hence cannot consist only of digits.

like image 134
Felix Kling Avatar answered Sep 21 '22 18:09

Felix Kling


You should use . when you know the name of the property

var object = {};
object.property = 'whatever';

, use [] when the name of the property is contained in a variable

var object = {};
var property = 'another-property';
object[property] = 'whatever';

As @DCoder added certain object properties cannot be accessed without using the [] notation because their names break the syntax. E.g. properties named class, default, or data-prop-value

like image 29
Alberto Zaccagni Avatar answered Sep 19 '22 18:09

Alberto Zaccagni