DEV Community

Cover image for Array Cheatsheet in JavaScript๐Ÿš€
Tejendra Singh Rajawat
Tejendra Singh Rajawat

Posted on โ€ข Edited on

4 2

Array Cheatsheet in JavaScript๐Ÿš€

In any programming language if we have a collection of elements or items, then we will define them as array. they can store data such as string, numbers, object as an collection of element and we can retrieve them whenever and however we want.
I will discuss about what can we do using array in JavaScript. so first of all let's create a array in JavaScript.
There are many ways to create array in JavaScript i.e. -

1. Basic Way

`const animals = ['๐Ÿ™ˆ','๐Ÿ™‰','๐Ÿ™Š','๐Ÿต']`
Enter fullscreen mode Exit fullscreen mode

2. Array Constructor

`const food = new Array('๐Ÿ‡','๐Ÿˆ','๐Ÿ‰','๐ŸŠ','๐ŸŒ')`
Enter fullscreen mode Exit fullscreen mode

3. Empty Array

`const emptyArray = []`
Enter fullscreen mode Exit fullscreen mode

Now, we know how to create an array in JavaScript and now let's dive into some methods of Array.

1. indexOf() - we can find an item's index

`const animals = ['๐Ÿถ','๐Ÿฑ','๐Ÿฆ','๐Ÿท']
animals.indexOf('๐Ÿฆ')     //2 `
Enter fullscreen mode Exit fullscreen mode

2. join() - create a string from array items and also can add words between them like 'and','or'.

`const animals = ['๐Ÿถ','๐Ÿฑ','๐Ÿฆ','๐Ÿท']
animals.join('loves')   // '๐Ÿถ loves ๐Ÿฑ loves ๐Ÿฆ loves ๐Ÿท' `
Enter fullscreen mode Exit fullscreen mode

3. slice() - split an array at given index(es)

`const animals = ['๐Ÿถ','๐Ÿฑ','๐Ÿฆ','๐Ÿท']
animals.slice(1);    //['๐Ÿฑ','๐Ÿฆ','๐Ÿท']
animals.slice(1,2);   //[ '๐Ÿฑ' ]
console.log(animals)  //[ '๐Ÿถ', '๐Ÿฑ', '๐Ÿฆ', '๐Ÿท' ] `
Enter fullscreen mode Exit fullscreen mode

4. splice() - same as slice and you can also insert new items

`const animals = ['๐Ÿถ','๐Ÿฑ','๐Ÿฆ','๐Ÿท']
animals.splice(1,2, '๐ŸŠ') )   //[ '๐Ÿฑ', '๐Ÿฆ' ]
console.log(animals)  //[ '๐Ÿถ', '๐ŸŠ', '๐Ÿท' ]`
Enter fullscreen mode Exit fullscreen mode

_as you can see that slice and splice looks similar but slice don't overwrite or change original array but splice does. _

5. forEach() - loop over an array and access each item

`const animals = ['๐Ÿถ','๐Ÿฑ','๐Ÿฆ','๐Ÿท']
animals.forEach(pet => console.log(pet))`
Enter fullscreen mode Exit fullscreen mode

6. Map() - loop over an array and access each item and return value without mutating original array

`const animals = ['๐Ÿถ','๐Ÿฑ','๐Ÿฆ','๐Ÿท']
animals.map(pet => console.log(`${pet} is cute`))`
Enter fullscreen mode Exit fullscreen mode

As you can see in first glance both forEach and map method are same, but as you can see in map method we are mutating array instead we are creating a new array and using map we can return something.

7. flat()- It flatten an array to a single dimension.

`const animals = ['๐Ÿถ','๐Ÿฑ','๐Ÿฆ', ['๐Ÿ™Š','๐Ÿ™‰'],'๐Ÿท']`
Enter fullscreen mode Exit fullscreen mode

as you can see we have array under an array , so how do we get a single dimension array.

`console.log(animals.flat()) //['๐Ÿถ','๐Ÿฑ','๐Ÿฆ','๐Ÿ™Š','๐Ÿ™‰','๐Ÿท']`
Enter fullscreen mode Exit fullscreen mode

8. filter() - create a new array based on a filter.

`const animals = ['๐Ÿถ','๐Ÿฑ','๐Ÿฆ','๐Ÿถ']
const dog = animals.filter(dog => dog === '๐Ÿถ') 
console.log(dog)`
Enter fullscreen mode Exit fullscreen mode

9. reduce() - run a callback on each item and reduce the array to a single value.

`const numbers = [1,6,7,1,3,4]
const total = numbers.reduce((total,currentval) => total + currentval);   //22 `
Enter fullscreen mode Exit fullscreen mode

Ok, so what's happening here is we are taking every number one by one which is our currentval and adding it into our total.

10. findIndex() - finds the index of an item based on a condition

`const animals = ['๐Ÿถ','๐Ÿฑ','๐Ÿฆ','๐Ÿ™‰']
const lionIndex = animals.findIndex(lion => lion === '๐Ÿฆ')
console.log(lionIndex)   //2`
Enter fullscreen mode Exit fullscreen mode

Conclusion

So they are the most used array methods which I use in my code and I hope you will find them useful and we are all learning, I missed a lot of methods here but doing research is a part of the process ๐Ÿง‘โ€๐Ÿ’ป๐Ÿง‘โ€๐Ÿ’ป

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free โ†’

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay