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.
Check if a Textbox has Changed
We can check if a textbox has changed by listening to the input event.
For instance, we can write:
$('#text-box').on('input', () => {
// ...
});
We call on to listen to the input event.
Then we run the code in the callback to do what we want.
Detect a Touch Screen Device Using JavaScript
We can use the Modernizr library to detect whether a device is a touch screen device or not.
It provides us with the touch and no-touch classes which are added to the html element.
Therefore, we can use that to do whatever we want depending on whether the device is touch screen or not.
The Correct Way to Modify State Arrays in React
There is a correct way to modify state arrays in React.
If we’re using class components, we use setState by passing in a callback that takes the previous value.
Then we return a new value based on that.
For instance, we can write:
this.setState(prevState => ({
arr: [...prevState.arr, 'foo']
}))
We added the 'foo' string as the last element of the arr state.
If we’re using hooks, we do the same thing but we pass the callback into the state change function.
For instance, we write:
`setArr(`arr => [...arr, 'foo']`)`
assuming setArr is the state change function returned by useState .
Check if a Number is NaN
To check if a number is NaN , we need to use the isNaN function.
For instance, we can write:
isNaN('foo')
It’ll check by converting the string to a number and then do the check.
So it’ll return true since it’ll be converted to NaN .
Finding the Max Value of a Property in an Array of Objects
We can use the Math.max and the array map methods to find the max value of a property in an array of objects.
For instance, we can write:
Math.max(...array.map(o => o.y))
We get the max value of the y property of the entries by call map to return an array of numbers with the values.
Then we use the spread operator to spread the array entries into the Math.max method as arguments.
How to Toggle a Boolean
We can toggle a boolean by using the ! operator.
We just write:
bool = !bool;
to change bool to the value opposite of the current one.
Create a Date with a Set Timezone Without Using a String Representation
We can create a Date object with a set timezone without using a string by using the setUTCHours method to set the UTC hour of a Date instance.
For instance, we can write:
new Date().setUTCHours(2)
Then we get the timestamp of the date with the hour set to the given UTC hour.
We can also set the minutes, seconds, and milliseconds values.
Also, we can write:
const date = `new Date(Date.UTC(year, month, day, hour, minute, second))`
Date.UTC returns a timestamp with the UTC date set with the given year, month, day, hour, minute, and seconds.
When we pass that into the Date constructor, we get the date with the same value.
Looping Through Key-Value Pairs
To loop through key-value pairs, we can use Object.entries with the for-of loop.
For instance, we can write:
for (const [key, value] of Object.entries(obj)) {
console.log(key, value);
}
to do that.
obj is an object.
Scroll Automatically to the Bottom of the Page
To scroll automatically to the bottom of the page, we can use the window.scrollTo method.
For example, we can write:
window.scrollTo(0, document.body.scrollHeight);
We scroll to the x and y coordinates given in the argument.
document.body.scrollHeight is the bottom of the page.
Conclusion
window.scrollTo lets us scroll to anywhere on our page.
The right way to modify an array state in React is to pass in a callback and return a new array derived from the old one.
We can watch the input event of a text area to watch the value as we type.
We can use Math.max to find the max value of an array of numbers.
