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.
Get the Selected Radio Button’s Value
To get the selected radio button’s value, we can use the checked and value properties.
For instance, if we have the following HTML:
<input type="radio" name="gender" value="female" checked="checked">Female</input>
<input type="radio" name="gender" value="male">Male</input>
We can get the the the radio buttons by name with getElementsByName :
const radios = document.getElementsByName('gender');
for (const radio of radios) {
if (radio.checked) {
console.log(radio.value);
}
}
We loop through the radio buttons retrieved with the for-of loop.
Then we use the checked property to see if it’s checked.
Then we get the value of the value attribute with the value property.
Create Our own assert Function in JavaScript
There’s no assert function in client-side JavaScript.
In Node, there’s the assert module.
To make our own assert function without a library, we can create our own function:
const assert = (condition, message) => {
if (!condition) {
throw new Error(message || "Assertion failed");
}
}
The function only checks if condition is truthy.
If it’s not, then we throw an error with our own message if we like.
Add a New Value to an Existing Array in JavaScript
We can all the push method to add a new value to an existing JavaScript array.
For instance, we can write:
const arr = [];
arr.push('foo');
arr.push('bar');
We can use unshift to add values to the beginning:
const arr = [];
arr.unshift('foo');
We can also set the value by its index directly since JavaScript arrays are dynamically sized:
const array = [];
array[index] = "foo";
How to Check if 2 Arrays are Equal with JavaScript
We can check if 2 arrays are equal with JavaScript by looping through all the entries to see if they’re all equal.
For instance, we can write:
const arraysEqual = (a, b) => {
if (a === b) { return true; }
if (a === null || b === null) { return false; }
if (a.length !== b.length) { return false; }
for (let i = 0; i < a.length; i++) {
if (a[i] !== b[i]) {
return false;
}
}
return true;
}
This works with arrays that only have primitive values because we can’t compare object contents directly with === or !== .
We check if a references the same object as b .
If it’s so, then we return true .
If one or more of them are null , we return false .
If their lengths aren’t equal, we return false .
Then we compare the contents if we get past all those checks.
In the loop body, if any entry aren’t equal to each other, then we return false .
If it goes through the loop without returning false , then all entries are equal so we return true .
If we need to check object contents, then we need to recursively traverse all the properties of the object and check their content.
Turn a string into a JavaScript Function Call
We can pass in the name string to the object with the function that we want to call to call the function.
For instance, we can write:
const fn = obj[functionName];
if (typeof fn === 'function') {
fn(id);
}
We pass the functionName string into the brackets after obj to and assign the returned value to fn .
Then we use typeof to check if it’s a function.
If it’s a function, then we call it.
Remove Array Element Based on Object Property
To remove an array element based on an object property, we can use the filter method.
For instance, we can write:
arr = arr.filter(obj => obj.name !== 'james');
The code above returns an array with all the entries where the name property isn’t 'james' .
Since it returns a new array, we’ve to assign it to arr to replace its value.
Conclusion
We can use the value property to get the value of the value attribute of a checkbox.
To create an assert function, we can throw an error if a condition isn’t met.
There are methods to add items to an array.
We can compare each entry of an array to see if they’re equal.
