Skip to main content

Command Palette

Search for a command to run...

4 Helpful Javascript Array tricks you should know

Published
โ€ข1 min readโ€ขView as Markdown
T

I am a developer from Cape Town,South Africa

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.๐Ÿš€cx0157ri78ndf06kwl0i.jpeg

More from this blog

Javascript E๐—บ๐—ฝ๐˜๐˜† ๐—ผ๐—ฏ๐—ท๐—ฒ๐—ฐ๐˜ ๐—ฎ๐˜€ ๐—ฎ ๐—ณ๐—ฎ๐—น๐—น๐—ฏ๐—ฎ๐—ฐ๐—ธ ๐˜„๐—ต๐—ถ๐—น๐—ฒ ๐—ฑ๐—ฒ๐˜€๐˜๐—ฟ๐˜‚๐—ฐ๐˜๐˜‚๐—ฟ๐—ถ๐—ป๐—ด

As explained in one of my posts in the Javascript series, you can use the optional chaining operator to simplify and avoid breaking code So the below code: ๐˜ค๐˜ฐ๐˜ฏ๐˜ด๐˜ต ๐˜ถ๐˜ด๐˜ฆ๐˜ณ = { ๐˜ฏ๐˜ข๐˜ฎ๐˜ฆ: '๐˜‹๐˜ข๐˜ท๐˜ช๐˜ฅ' }; ๐˜ค๐˜ฐ๐˜ฏ๐˜ด๐˜ต ๐˜ด๐˜ต๐˜ณ๐˜ฆ๐˜ฆ๐˜ต๐˜•๐˜ข๐˜ฎ๐˜ฆ = ๐˜ถ๐˜ด๐˜ฆ๐˜ณ....

Jun 7, 20221 min read
Javascript E๐—บ๐—ฝ๐˜๐˜† ๐—ผ๐—ฏ๐—ท๐—ฒ๐—ฐ๐˜ ๐—ฎ๐˜€ ๐—ฎ ๐—ณ๐—ฎ๐—น๐—น๐—ฏ๐—ฎ๐—ฐ๐—ธ ๐˜„๐—ต๐—ถ๐—น๐—ฒ ๐—ฑ๐—ฒ๐˜€๐˜๐—ฟ๐˜‚๐—ฐ๐˜๐˜‚๐—ฟ๐—ถ๐—ป๐—ด

The simplest and modern to avoid an error while displaying fetched data in Javascript

๏ฟฝ ๐—ง๐—ต๐—ฒ ๐˜€๐—ถ๐—บ๐—ฝ๐—น๐—ฒ๐˜€๐˜ ๐—ฎ๐—ป๐—ฑ ๐—บ๐—ผ๐—ฑ๐—ฒ๐—ฟ๐—ป ๐˜„๐—ฎ๐˜† ๐˜๐—ผ ๐—ฎ๐˜ƒ๐—ผ๐—ถ๐—ฑ ๐—ฒ๐—ฟ๐—ฟ๐—ผ๐—ฟ ๐˜„๐—ต๐—ถ๐—น๐—ฒ ๐—ฑ๐—ถ๐˜€๐—ฝ๐—น๐—ฎ๐˜†๐—ถ๐—ป๐—ด ๐—ณ๐—ฒ๐˜๐—ฐ๐—ต๐—ฒ๐—ฑ ๐—ฑ๐—ฎ๐˜๐—ฎ ๐—ถ๐˜€ ๐˜‚๐˜€๐—ถ๐—ป๐—ด ๐—ก๐˜‚๐—น๐—น๐—ถ๐˜€๐—ต ๐—ฐ๐—ผ๐—ฎ๐—น๐—ฒ๐˜€๐—ฐ๐—ถ๐—ป๐—ด ๐—ผ๐—ฝ๐—ฒ๐—ฟ๐—ฎ๐˜๐—ผ๐—ฟ (??) โœ”๏ธ ๐˜›๐˜ฉ๐˜ฆ ๐˜ฏ๐˜ถ๐˜ญ๐˜ญ๐˜ช๐˜ด๐˜ฉ ๐˜ค๐˜ฐ๐˜ข๐˜ญ๐˜ฆ๐˜ด๐˜ค๏ฟฝ...

Jun 3, 20221 min read
The simplest and modern to avoid an error while displaying fetched data in Javascript
G

GenesisDigitalZA

5 posts