Like any kind of apps, there are difficult issues to solve when we write JavaScript apps.
In this article, we’ll look at some solutions to common JavaScript problems.
Add x Seconds to a Date
We can add x number of seconds to a Date instance by using the getSeconds method to get the number of seconds in the date object.
For instance, we can write:
const date = new Date('2020-01-01 10:11:55');
date.setSeconds(date.getSeconds() + 10);
We create a Date instance.
Then we call setSeconds to set the seconds.
We put the number of seconds from getSeconds plus the number of seconds we want to add.
In this example, we add 10 seconds.
We can also use getTime and add the number of milliseconds to the object.
For instance, we can write:
let date = new Date('2020-01-01 10:11:55');
date = new Date(date.getTime() + 10000);
getTime gets the number of milliseconds since January 1 1970 midnight UTC.
10000 milliseconds is the same as 10 seconds.
Therefore, we can put it in the Date constructor and get the new date that’s 10 seconds after the first Date instance.
Storing Key-Value Pairs
We can store key-value pairs with a plain object or a Map instance.
For instance, we can write:
const hash = {};
hash['james'] = 123;
hash['joe'] = 456;
Or we can write:
const map = new Map();
map.set('james', 123);
map.set('`joe`', `456`);
'james' and 'joe' are both keys and the numbers are their values in both examples.
We can loop through maps with the for-of loop.
For instance, we can write:
for (const key of map) {
console.log(key);
}
to loop through the keys.
Also, we can write:
for (const [key, value] of map) {
console.log(key, value);
}
to loop through both the keys and values.
It also has the keys and values methods to let us loop through the keys and values.
For instance, we can write:
for (const key of map.keys()) {
console.log(key);
}
to loop through the keys.
And we write:
for (const value of map.values()) {
console.log(value);
}
to loop through the values.
Disabling and Enabling an HTML Input Button
We can use the disabled property to disable or enable an HTML input button.
For instance, we can write:
document.querySelector("button").disabled = true;
to disable the button.
Also, we can write:
document.querySelector("button").disabled = false;
to enable the button.
Display All Methods of an Object
We can use getOwnPropertyNames to get all methods of an object.
For instance, we can write:
const objMethodNames = Object.getOwnPropertyNames(obj).filter((p) => {
return typeof obj[p] === 'function';
})
We get the property names with obj .
Then we call filter to return the property names that are the name of functions.
Get a UTC Timestamp
To get the UTC timestamp of a Date instance, we can call the getTime method.
For example, we can write:
const date = new Date().getTime();
or we can write:
const date = Date.now();
Output an ISO 8601 Formatted String in JavaScript
We can use the toISOString method to convert a Date instance to an ISO 8601 formatted string.
For example, we can write:
const date = new Date();
date.toISOString();
Then we get:
"2020-06-03T23:29:15.666Z"
Change the “this” Context in setTimeout Callback
We can set the value of this in the callback using the bind method.
It only works with regular functions.
For instance, we can write:
const obj = {
destroy(){
//...
}
}
`setTimeout(`obj`.destroy.bind(`obj`), 1000);`
We have obj with the destroy method.
We call bind to bind the destroy method to obj .
Then the value of this in obj.destroy should be obj for sure.
Make Google Chrome JavaScript Console Log Persistent
By default, the Google Chrome console log is cleared when we refresh the page or load a new page.
To prevent this from happening, we can click Preserve log in the console to stop it from clearing when we refresh the page or load a new one.
Conclusion
We can make the Chrome console log persistent.
bind returns a new function with the value of this we want.
We can use toISOString to format the date-time into a string.
Also, we can use getOwnPropertyNames to get all the keys and filter to return the keys that are keys of methods.
