DEV Community

talent
talent

Posted on

4 Helpful Javascript Array tricks you should know

An array is one of the most common concepts of Javascript, which gives us a lot of possibilities to work with data. Check these tricks which can be very helpful!

๐Ÿ‘‰ ๐—Ÿ๐—ฒ๐˜โ€™๐˜€ ๐—ด๐—ฒ๐˜ ๐˜€๐˜๐—ฎ๐—ฟ๐˜๐—ฒ๐—ฑ ๐Ÿง‘โ€๐Ÿ’ป

๐ŸŒถ๏ธ ๐—›๐—ผ๐˜„ ๐˜๐—ผ ๐—ฟ๐—ฒ๐—บ๐—ผ๐˜ƒ๐—ฒ ๐—ณ๐—ฎ๐—น๐˜€๐˜† ๐˜ƒ๐—ฎ๐—น๐˜‚๐—ฒ๐˜€ ๐—ณ๐—ฟ๐—ผ๐—บ ๐—ฎ๐—ป ๐—ฎ๐—ฟ๐—ฟ๐—ฎ๐˜† ๐—ถ๐—ป ๐—๐—ฎ๐˜ƒ๐—ฎ๐—ฆ๐—ฐ๐—ฟ๐—ถ๐—ฝ๐˜.
In #javascript falsy values are false, 0, โ€ ", null, NaN, undefined. Now we can find out how to remove this kind of value from our array. To achieve this, we are going to use the .filter().๐Ÿš€

๐ŸŒถ๏ธ ๐—›๐—ผ๐˜„ ๐˜๐—ผ ๐—ด๐—ฒ๐˜ ๐—ฎ ๐—ฟ๐—ฎ๐—ป๐—ฑ๐—ผ๐—บ ๐—ฒ๐—น๐—ฒ๐—บ๐—ฒ๐—ป๐˜ ๐—ณ๐—ฟ๐—ผ๐—บ ๐—ฎ๐—ป ๐—ฎ๐—ฟ๐—ฟ๐—ฎ๐˜† ๐—ถ๐—ป ๐—๐—ฎ๐˜ƒ๐—ฎ๐—ฆ๐—ฐ๐—ฟ๐—ถ๐—ฝ๐˜.
Sometimes we need to select a value from the array randomly. To create it, we can get a random index number according to the array length.๐Ÿš€

๐ŸŒถ๏ธ ๐—›๐—ผ๐˜„ ๐˜๐—ผ ๐—ฆ๐—ต๐˜‚๐—ณ๐—ณ๐—น๐—ฒ ๐—ฎ๐—ป ๐—”๐—ฟ๐—ฟ๐—ฎ๐˜† ๐—ถ๐—ป ๐—๐—ฎ๐˜ƒ๐—ฎ๐—ฆ๐—ฐ๐—ฟ๐—ถ๐—ฝ๐˜
Shuffling is easy with the sort method. As long as it returns a random number, positive or negative, we can sort it with a random order.๐Ÿš€

๐ŸŒถ๏ธ ๐—›๐—ผ๐˜„ ๐˜๐—ผ ๐—™๐—ถ๐—ป๐—ฑ ๐˜๐—ต๐—ฒ ๐—ถ๐—ป๐˜๐—ฒ๐—ฟ๐˜€๐—ฒ๐—ฐ๐˜๐—ถ๐—ผ๐—ป ๐—ผ๐—ณ ๐˜๐˜„๐—ผ ๐—ฎ๐—ฟ๐—ฟ๐—ฎ๐˜†๐˜€ ๐—ถ๐—ป ๐—๐—ฎ๐˜ƒ๐—ฎ๐—ฆ๐—ฐ๐—ฟ๐—ถ๐—ฝ๐˜.
We can use a Set() to ensure that values in the array we are checking are not duplicated, and we will use .filter and .includes methods. As a result, we will get the array with values that were presented in both arrays.๐Ÿš€

Image description

Top comments (5)

Collapse
 
adam_cyclones profile image
Adam Crockett ๐ŸŒ€

Better to do

[].filter(Boolean)
Enter fullscreen mode Exit fullscreen mode

As the Boolean constructor is called on falsey values and returns false to filter them.

Although the absolutely best way is to not allow falsey values into an array for processing, then no work is needed

Collapse
 
codemaker2015 profile image
Vishnu Sivan

Good article. IT helps JavaScript developers to do some array operations in much better way.

Collapse
 
moopet profile image
Ben Sinclair

Hi, can I suggest that you put your code into a code block rather than using a screenshot? If you paste it in between three-backticks you get something like this:

console.log("Why hello there");
Enter fullscreen mode Exit fullscreen mode

and that's something that'll help you with:

  • searchability on the page with ctrl/cmd+F
  • searchability through something like Google
  • accessibility (screen-reader users currently see your code as "image description" which is the placeholder Markdown uses here)
  • people wanting to copy/paste your code to try it out for themselves
Collapse
 
talenttinaapi profile image
talent

Thanks Ben for the heads up,much appreciated!!

Collapse
 
jonrandy profile image
Jon Randy ๐ŸŽ–๏ธ • Edited

Remove falsy values from an array:

arr.filter(x=>x)
Enter fullscreen mode Exit fullscreen mode

Why convert to a Boolean when JS is going to do that anyway? That's the whole point of truey/falsy values