JavaScript is a very forgiving language. It’s easy to write code that runs but has mistakes in it.
In this article, we’ll look at the best practices when using generators and defining and using object properties.
Don’t Use Generators If We Want To Transpile to ES5
Generator code doesn’t transpile well to ES5 code, so we may want to think twice if we’re targeting our build artifact to build into ES5 code.
However, this shouldn’t be the case with modern transpilers since they create custom closure based state machines from generators and async functions. They work the same way. However, the only advantage is that the transpile code is harder to debug even with source maps.
Therefore, if we never have to debug the transpiled code, then we can go ahead and use generators. Otherwise, we should think twice before using them in our code.
Make Sure Generator Function Signature is Spaced Properly
Generator functions should be spaced properly. The asterisk for the generator function should come right after the function keyword.
For instance, we should define our function as follows:
const foo = function*() {
yield 1;
}
In the code above, we have the asterisk coming right after the function keyword. And there’s no space after the asterisk.
For function declarations, we should write the following:
function* foo() {
yield 1;
}
In the code above, we have one asterisk after the asterisk and before the function name.
Use Dot Notation When Accessing Properties
If an object property’s name is a valid JavaScript identifier, then we should use the dot notation to access the object property.
It’s shorter than the bracket notation and does the same thing.
For instance, instead of writing the following with bracket notation:
const obj = {
foo: 1
}
console.log(obj['foo']);
We should write the following code:
const obj = {
foo: 1
}
console.log(obj.foo);
In the first example, we used the bracket notation, which is longer and we have to access the foo property by passing in a string into the brackets. We have to write extra characters just to access the foo property.
Instead, we should write what we have in the 2nd example, which is obj.foo .
It’s shorter and does the same thing.
Use Bracket Notation [] When Accessing Properties With a Variable
If we want to access a property with the name that’s stored in the variable, then we should use the bracket notation to do that.
For instance, we can do that with the following code:
const obj = {
foo: 1
}
const getProp = (prop) => {
return obj[prop];
}
console.log(getProp('foo'));
In the code above, we have the obj object with the foo property. Also, we have the getProp function, which takes the prop parameter and returns the value of obj[prop] .
We’ve to access the property value with the bracket notation since prop is a variable, so there’s no other way to access the property dynamically.
Then in the last line of our example, we can use getProp as follows:
getProp('foo')
to return the value of obj.foo which is 1.
Use Exponentiation Operator ** When Calculating Exponentiations
The exponentiation operator provides us with a shorter way to calculate exponents. It’s shorter than Math.pow which is available since the first version of JavaScript.
The exponentiation operator is available since ES6. For instance, instead of writing the following with Math.pow :
const result = Math.pow(2, 5);
We should write:
const result = 2 ** 5;
It’s much shorter and we don’t have to call a function to do exponentiation anymore.
Conclusion
If we want to transpile our code to ES5 and debug the ES5 code that’s built, then we shouldn’t use JavaScript generators in our code.
Debugging is hard even with source maps.
If we do use generators in our code, then we should make sure the generator code is spaced properly. The * should be spaced in a standard for consistency and easiness to read.
When accessing object properties that are valid JavaScript identifiers, then we should use the dot notation. Otherwise, we should use the bracket notation. This includes accessing properties with variables and property names that aren’t valid JavaScript identifiers.
