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.
Maps
Maps are useful for storing key-value pairs.
It’s created using the Map constructor.
To create it, we write:
const map = new Map();
Add Items to a Map
We can add items to a Map by using the set method.
For instance, we can write:
map.set('color', 'brown');
map.set('age', 2);
Get an Item from a Map by Key
We can use the get method to get a map item by its key.
For example, we can write:
map.get('color');
map.get('age');
Delete an Item from a Map by Key
Map instance has the delete method to remove an item by its key.
For instance, we can write:
map.delete('color');
Delete All Items from a Map
We can delete all items from a Map with the clear method.
For example, we write:
map.clear()
Check if a Map has an Item with the Given Key
The has method lets us check if an item with the given key is in the Map instance.
For instance, we can write:
const hasColor = map.has('color');
Find the Number of Items in a Map
The size property returns the number of items in a Map .
For example, we write:
const size = map.size;
Create a Map with Values
We can pass in an array with key-value pairs in the constructor.
For instance, we can write:
const map = new Map([['color', 'white'], ['breed', 'poodle'], ['age', 2]])
The first entry is the key and the 2nd is the value in each array entry.
Iterate Over Map Keys
Map instances has the keys method.
It returns an iterator with the map keys so we can loop through them.
For instance, we can write:
for (const key of map.keys()) {
console.log(key)
}
Iterate Over Map Values
We can loop through the values with the values method.
For instance, we can write:
for (const val of map.values()) {
console.log(val)
}
Iterate Over Key-Value Pairs
Map instances have the entries method to loop through the key-value pairs.
For example, we can write:
for (const [key, val] of map.`entries`()) {
console.log(key, val)
}
We can also write;
for (const [key, val] of map) {
console.log(key, val)
}
Convert Maps to an Array
We can spread the map keys and values to an array.
For example, we can write:
const keys = [...m.keys()]
and:
const values = [...m.values()]
WeakMaps
WeakMaps are a special kind of map that has entries that can be garbage collected.
Also, we can’t iterate over the kets or values in a WeakMap.
We also can’t clear all items from a WeakMap.
Its size also can’t be checked.
However, we can get an item with its key with get
We also can add an item to a WeakMap with set .
We can check for the item with the given key with has .
And we can delete an item from a Weakmap with delete .
Check if a Checkbox is Checked
We can find out whether a checkbox is checked with the checked property.
For instance, we can write:
document.getElementById('selected').checked
to see if the checkbox with ID selected is checked.
Check for an Undefined Object Property
There are several ways to check for an undefined object property.
We can directly compare a property to undefined :
obj.prop === undefined
Also, we can use the hasOwnProperty method:
!obj.hasOwnProperty('prop')
It checks for own properties of obj with the name given in the argument.
Also, we can use the typeof operator:
typeof obj.prop === 'undefined'
Check if a DOM Element Exists
We can do that easily with jQuery.
We can select the elements and get the length of the returned list:
$(selector).length
We can also call the exists method:
$(selector).exists()
Also, we cause plain JavaScript’s querySelectorAll method:
document.querySelectorAll(`selector).length`
Conclusion
Maps are useful for storing key-value pairs.
Also, we can check if an element is checked with the checked value.
We can get if elements exist by selecting them and getting the length of the returned list.
