Like any kind of apps, JavaScript apps also have to be written well. Otherwise, we run into all kinds of issues later on.
In this article, we’ll look at some tips we should follow to write JavaScript code faster and better.
Picking and Reject Object Properties
We can use the Object.keys method to get the keys and pick the ones we want.
For instance, we can write:
const reject = (obj, keys) => {
return Object.keys(obj)
.filter(k => !keys.includes(k))
.map(k => Object.assign({}, {[k]: obj[k]}))
.reduce((res, o) => Object.assign(res, o), {});
}
In the code above, we called Object.keys to get the keys.
Then we called map to map the object key to their own object with the property value of the key as the value.
Then we used reduce to combine the objects array from map into one object with reduce .
We can call it by writing:
const obj = {
foo: 1,
bar: 2,
bar: 3
}
const newOb = reject(obj, ['foo', 'bar']);
Using Object.is for Object Comparisons
We can use the Object.is method for comparisons. The difference between === and Object.is is that NaN equals itself.
For instance, we can write:
Object.is(NaN, NaN);
and it would return true .
Create a Function to Log Values
We can create a function that logs the value and return it so that we can do both when debugging.
For instance, we can write:
const tap = (x) => {
console.log(x);
return x;
}
Then we log x and return it with the function.
It’s handy for things like:
.filter(c => tap(c.numItems > 100))
Then we can log the value of the express and return it at the same time.
Array Tricks
We can do a few things with arrays that we may not have thought of yet.
Iterating Through an Empty Array
We can create an arrays with empty slots with the array constructor.
To do that we can write:
const arr = new Array(10);
Passing in a number as its only arguments makes the constructor return array with the given number of empty slots.
Since we passed in 10, we get an array with 10 empty slots.
Populating Empty Arrays
We can use fill to populate empty arrays.
For instance, we can write:
const arr = new Array(10);
const nums = arr.fill().map((_, i) => i)
to create an array with numbers from 0 to 9.
We call fill to fill the empty slots with undefined . Then we can call map with a callback to return the array index to fill it with numbers.
Passing an Empty Parameter to a Method
We can pass in null or undefined to skip arguments.
For instance, we can write:
foo('a', null, 'b')
or:
foo('a', undefined, 'b')
But we can also use the spread operator and write:
foo(...['a', , 'b']);
Then we can skip an entry in the array.
When we spread the entries as arguments, it’ll become undefined so we do the sam,e thing as the previous example.
Unique Array Values
We can remove duplicates from an array by converting it to a set and then convert it back to an array with the spread operator.
For instance, we can write:
const arr = [...new Set([1, 2, 3, 3])];
Then we get:
[1, 2, 3]
as the value of arr .
Binding Objects to Functions
We can use bind to return a function with the value of this that we want.
for instance, if we have:
const getName = function () {
console.log(this.name);
};
Then if we write:
const getJoe = getName.bind({ name: 'joe' });
Then this.name would be 'joe' in getJoe since bind returns a function that has the value of this as given in the first argument.
Likewise, we can write:
const getJane = getName.bind({ name: 'jane' });
Then this.name would be 'jane' .
Conclusion
We can create arrays with empty slots with the Array constructor.
Then, we can use the fill method to fill it with entries.
We can return a new object without some properties by using Object.keys and Object.assign .
Also, we can use Object.is to compare values including NaN . Therefore, it’s slightly more useful than === .
