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.
Sets
Sets are useful data structures for storing items without duplicates.
It’s an iterable object and it’s created with the Set constructor.
Initialize a Set
We can create a set with the Set constructor.
We write:
const set = new Set()
Add Items to a Set
We can add items to a set by using the add method.
So, we can write:
set.add('foo');
set.add('bar');
Check if an item is in a Set
Sets have a has method to check if an item is in the set.
For example, we can write:
set.has('foo');
set.has('bar');
Delete Item from a Set
We can call delete to remove a Set item.
For instance, we can write:
set.delete('foo');
Determine the Number of Items in a Set
The size property lets us get the number of items in a Set.
We can write:
set.size
Remove All Items from a Set
The clear method removes all items from a Set.
For example, we can write:
set.clear()
Iterate Items in a Set
We can use the for-of loop to loop through items in a Set.
For instance, we can write:
for (const k of set.keys()) {
console.log(k)
}
to loop through the keys of the set.
Likewise, we can use the values() method to do the same thing:
for (const v of set.values()) {
console.log(v)
}
There’s also the entries method to return an iterator:
const i = set.entries();
Then we can use the next method to get the next entry in the sequence:
i.next()
The returned object has the value or done properties.
done is false when there’s a next item in the sequence and true otherwise.
value has the value from the set.
Initialize Sets with Values
We can create sets with values using the Set constructor:
const set = new Set([1, 2, 3]);
Convert to an Array
We can convert to a Set to an array with the spread operator:
const arr = [...s.keys()]
or:
const arr = [...s.values()]
WeakSet
A WeakSet is a special kind of Set .
The items never get garbage collected in a Set.
Items in a WeakSet can be garbage collected.
Also, we can’t iterate over the items in a WeakSet.
We can’t clear all items from a WeakSet.
We also can’t check its size.
However, it has the add method to add items.
has method is available for checking if an item exists.
delete is used to delete an item.
Check if an Element is Hidden
We can check if an element is hidden using jQuery.
For instance, we can write:
$(element).is(":visible");
This checks for display: none .
Also, we can write:
$(element).is(":hidden");
and check for visibility: hidden .
We can get all the elements that are hidden with:
$(element).is(":hidden");
And we can get the ones with the visible selector with:
$('element:visible')
Deep Cloning an Object
We can deep clone an object with the JSON.stringify and JSON.parse method.
For instance, we can write:
const cloned = `JSON.parse(JSON.stringify(object));`
We can use it to clone the object with the function values inside the object.
Infinity will be converted to null and undefined values will be removed.
Also, regex literals are also removed.
Therefore, we can use this if we don’t have those values that’ll be converted or lost.
We can use the Lodash cloneDeep method to clone objects easily.
It clones everything in an object.
Object.assign and the spread syntax also copies the values of all enumerable own properties from one object to another.
We can write:
const cloned = Object.assign({}, obj);
or:
const cloned = {...obj };
For Each Loop
The best bet for loop through all items of an array easily for the for-of loop,
The Array instance also has the forEach method.
The old fashioned for loop can also do it.
We can write:
for (const a of arr){
console.log(a);
}
or:
arr.forEach(a => {
console.log(a);
})
or:
for (let i = 0; i < arr.length; i++){
console.log(arr[i]);
}
Conclusion
Sets are a useful data structure for storing data without duplicates.
Also, we can check for hidden elements with jQuery.
There are many ways to iterate through an array.
