DEV Community

Cover image for Array Cheatsheet in JavaScriptπŸš€
Tejendrasrajawat
Tejendrasrajawat

Posted on • Updated on

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)