JavaScript Quirks: Dot vs. Bracket - Not all notation is created equally
Tags: javascript, codenewbie, 100daysofcode, beginners
Published: 2020-09-17 12:16:26

You probably have noticed there are two ways to access a property on an object:

* Dot notation
* Bracket notation

Naturally, you might assume they behave in the same way, but that's not quite the case. We will examine some differences below.

## Dot notation

Dot notation is used more frequently than bracket notation. The reason? It is fewer characters to write.

It really is that simple. A few characters might not seem like a lot, but in a large codebase, dot notation can definitely save you some time. It's also considered easier to read.

```javascript
const car = {};

car.color = 'red';

car; // { color: red }
```
Nothing too surprising right? When creating a property name, we follow the same rules for the naming of variables.  An **identifier** should be:

* Case sensitive
* Unicode letters
* ```$``` or ```_``` are allowed
* Numbers (0-9) can be used, but not as the 1st character

```javascript
const obj = {};

obj.1 = 'value'; // ❌ SyntaxError  
obj.n@me = 'value'; // ❌ SyntaxError
obj."str" = 'value'; // ❌ SyntaxError
```

## Bracket notation

This is where the real fun begins, and we see some interesting behaviour. Remember those rules for identifiers above? Well, forget all those. We can create properties with bracket notation using the following:

* strings
* numbers
* variables
* weird characters (As long as you use quotation marks)
* expressions

#### Strings

This is essentially the same as creating a property via dot notation. The property can be accessed with dot notation too.

```javascript
const obj = {};

obj['propName'] = 'value';

obj['propName']; // 'value'
obj.propName; // 'value'
obj[propName]; // ❌ ReferenceError - No variable propName can be found
```

#### Numbers
Yes, it's possible. You can create a property using a number. Below, the number 1 is stringified as a property. We can't access the property by using dot notation.

```javascript
const obj = {};

obj[1] = 'value';

obj['1']; // 'value'
obj[1]; // 'value'  - Property is already created, 1 is stringified
obj[2];  // undefined
obj.1; // ❌ SyntaxError  
obj."1"; // ❌ SyntaxError

```

#### Variables

In this example, the variable name is a string. Similarly, if our variable was a number, it would be coerced into a string. We don't use quotes when using variables, and the value in the brackets is evaluated. 

```javascript
const obj = {};

const myPropertyName = 'propName';
 
obj[myPropertyName] = 'value';

obj.propName; // 'value'
obj['propName']; // 'value' 

```

#### Weird characters

If you use non-valid characters in a property name, you have to put them in quotes. Again, we are creating a string.

```javascript
const obj = {};

obj['@!£'] = 'value';

obj['@!£']; // 'value' 

```

#### Expressions

Lastly, and maybe the most interesting. We can actually use an expression as the property name. JavaScript sees it as something to be evaluated. That means we can perform calculations, or also call functions. Useful, eh? 😅

```javascript
const obj = {};

obj[2 + 2] = 'value';

obj['4']; // 'value' 

const myFunction = () => {
   return 'propName';
}

obj[myFunction()] = 'value';

obj['propName']; // 'value'

```

### Dot notation will access identifiers, not variables

When using dot notation, JavaScript will assume you want to access a property with a valid identifier. That means if you have a variable and a property with the same name, the declared property will be used. This could cause some unexpected results if you aren't aware of it.

```javascript
const myProp = 'value';

const obj = {
     value: 'my-value',
     myProp: 'my-second-value'
};

obj[myProp]; // 'my-value'
obj.myProp; // 'my-second-value'

```
### Final thoughts

So, which should you use? Dot notation is certainly recommended in most cases. However, if you need to use variables or weird characters, then bracket notation will work for you. It depends on the use case.  👍

*You can read more web musings on my twitter [here](https://twitter.com/jameswill1ams).*