DEV Community: James Williams

JavaScript Quirks: Dot vs. Bracket - Not all notation is created equally

James Williams — Thu, 17 Sep 2020 12:16:26 +0000

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.

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

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.

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.

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.

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.

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? 😅

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.

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.

GreenSock (GSAP) animation basics

James Williams — Mon, 07 Sep 2020 14:34:55 +0000

What exactly is a tween?

The first time I heard the word "tween", I wasn't totally sure what it meant. Simply put, a tween is a sequence of frames. In a digital context, basically a tween is an animation.

So how do we make them?

Luckily for us, lots of libraries exist to help us utilize tweens in the browser. One such library is GreenSock. Today, we will learn about .to() and .from(), and get you tweening in no time.

Firstly, grab GreenSock from a CDN, and place it in a <script> tag in your HTML. Remember to place it before your normal javascript file.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js">
</script>

Check the latest version on their homepage greensock.com.

The CDN will provide you with a gsap object which you can console.log(gsap), and take a look at the various methods it provides. Today, we will be looking at tweens from the "core" property.

.to()

Our first tween is gsap.to(). It takes two parameters.

The target - It can be a normal CSS selector.
An object containing properties and values to animate.

gsap.to("svg:last-child", {
  duration: 1,
  x: 100
});

If you don't specify a unit value, gsap will animate pixels. The default duration time is 0.5 seconds.

One important note is that values on .to() will be the final position of the tween, while CSS values will be starting position.

.from()

Being the opposite of .to(), our gsap values will be the starting point, and our CSS positions will be the destination. Let's animate background colour. When using double-barreled property words, we use the camelCasing naming convention to declare them in gsap.

gsap.from(".square", {
  backgroundColor: "green",
  delay: 2,
});

Using a delay of 2 means the animation will begin 2 seconds after the page loads.

.fromTo()

I thought we were only going to look at two tweens?

Well, technically yes. .fromTo() as you can imagine is a combination of both. Remember how our CSS defined our start or end position before? This tween allows us to define both in gsap. Here, we pass an object for both our from and to values.

With .fromTo(), we add our special properties like duration to the 2nd object, which is our to properties/vars.

gsap.fromTo(
 ".square", 
 { x: 50 }, 
 { x: 0, duration: 1 }
);

GreenSock is a really powerful animation library. While there is a paid tier, lots of functionality is available for free to use in your projects. It is also possible to use the paid tier functionality on codepen.io for free. I hope this post helped you get started with tweens. Stay tuned for further tutorials.