Introduction
The Falsy Bouncer challenge tasks us with removing all falsy values from a given array—without mutating the original array. It is an easy coding challenge. We will be given a function with one argument, an array [7, "ate", "", false, 9]. Our job is to remove all the falsy values from this array. Falsy values in JavaScript include false, null, 0, "", undefined, and NaN. This should be done without mutating the original array (i.e., without changing the structure or content of the array by adding, removing, or modifying values). It is an easy coding challenge. If this feels confusing now, don't worry—everything will become clear as we break it down step by step. We will first solve it theoretically for better understanding and then practically by using code. You can check these examples:
Examples
bouncer([7, "ate", "", false, 9])
// output: [7, "ate", 9]
bouncer(["a", "b", "c"])
// output: ["a", "b", "c"]
bouncer([false, null, 0, NaN, undefined, ""])
// output []
bouncer([null, NaN, 1, 2, undefined])
// output [1, 2]This coding challenge can be solved in any programming language, and there are also countless ways to solve a specific problem or challenge in coding.
Theoretically solve
Step 1: We need to check the array to determine how many falsy values are present. Falsy values in JavaScript include false, null, 0, "", undefined, and NaN.
Step 2: We only need to remove falsy values from the array, leaving the non-falsy values intact:
bouncer([7, "ate", "", false, 9])
// output: [7, "ate", 9]As seen in the example above, we removed only the falsy values and returned an array with the non-falsy values.
Step 3: We need to solve this without mutating the original array.
Step 4: Return an empty array [] if the original array contains only falsy values.
Practically Solve
function bouncer(arr) {
let elementToRemove = [false, null, 0, "", undefined, NaN]
let filterArray = arr.filter(x => !elementToRemove.includes(x))
return filterArray;
}
bouncer([7, "ate", "", false, 9]);Breaking Up Solution
Let's break down this solution to gain an even better understanding
Above, we have a function called bouncer with one parameter, arr, where our array ([7, "ate", "", false, 9]) will be stored. This is a simple function, it doesn't need to be simplified further.
As we understand the function now, it is time to start solving it. As we know, we only need to remove falsy values from the array and return the array with only non-falsy values. For this purpose, we created a new array elementsToRemove containing all falsy values: ([false, null, 0, "", undefined, NaN]). Later on, we will use this array to remove all these values from our original array.
let elementToRemove = [false, null, 0, "", undefined, NaN];Now it is time to remove falsy values from our given array without mutating it. We achieve this using the filter method in JavaScript, which is used for filtering elements within an array.
let filterArray = arr.filter(x => !elementToRemove.includes(x))We created a new variable, filterArray, which is an array where our non-falsy values will be stored after filtering from the original array, arr. In the filter method, we used the condition x => !elementsToRemove.includes(x).
x is used to iterate over elements from the array, similar to how we use i in a for loop. We can use any variable name instead of x.
In JavaScript, ! is known as the logical NOT operator.
elementsToRemove is the array declared at the beginning of the solution, where all our falsy values are stored.
includes is a method in JavaScript that checks whether a value exists in an array. We use it as follows: arr.includes(ourValue).
let filterArray = arr.filter(x => !elementToRemove.includes(x))Finally, we return filterArray, which now contains only non-falsy values