All about arrays in javascript

For beginners this article will be good lesson and for experts it would a good revision so that you don't google things again. After reading this article you won't encounter any problem related to javascript arrays.Let's consider there is an array,
array = ['html', 'css', 'javascript']

Accessing array

1. array[1] will give you the element at index 1 which is 'css'.

2. array[array.length - 1] will give you the last element if you don't know the lengt of the array.

3. array.indexOf('css') will return the index of element 'css' which is 1.

Adding elements

1. array.push('react') will add 'react' at the end of the array.You can add as many items as you want, just separate them with a comma.

2. array.unshift('react') will add 'react' at the start of the array (i.e. at index = 0).You can add as many items as you want, just separate them with a comma.

3. array.splice(2, 0, 'react') will delete 0 items starting from index 2 and then add 'react' at index 2.

Removing elements

1. array.pop() removes the last element from array.

2. array.shift() removes the first element from array.

3. array.splice(1, 2) will remove 2 elements starting from index 1.

4. array.slice(0, 1) will return a copy of portion of array (i.e. ['html', 'css'] in this case).

NOTE: delete array[0] will make the item at index 0 as undefined. So better use pop() and shift() instead.

Looping through arrays

1. array.forEach(item => console.log(item)) will loop through every element of the array.

2. array.map() is similar to array.forEach() only difference being, map creates a new array and then perform opertations on it whereas forEach performs only the original array.

3. array.filter(item => item.length > 3) will return another array with elements whose length is greater than 3.
   The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Comments

[Pieter Epeüs Wigboldus]

If you like to do more with array's, there is a package that extend the array, where you can do some stuff that isn't available by default: npmjs.com/package/array-helpers
Code is clean and easy to understand.

[HARSH VATS]

The package has functions that can really help. Will definitely make an article on it soon.

[Nick]

As mentioned already, great revision sheet. It collects some of the most common methods we'll use in a simple example with a simple explanation.
Love it!

[HARSH VATS]

Sounds like I should keep posting revision sheets on different topics. :)

[Nick]

Not a bad idea if you ask me! Plus, if you ever feel like writing a more in depth article on all or some of these methods that's an easy link to pop in here!

"If you want a more in-depth look at push check out my other article." or something along those lines with a link there.

[HARSH VATS]

Great advice. Thanks. I will update this with links to more detailed explanation articles. :)

[Sri Sai Jyothi]

This article is helpful as a quick revision sheet 😊
Adding what happens to the length of the array after using these methods would make it perfect 👌

[HARSH VATS]

I will definitely edit it. Thank you for your review. When people like what I write I get encouraged to write more. :)

[Habeebullahi01]

Thanks Harsh. I learned something new by reading your post. Good job.

[HARSH VATS]

Happy to hear that. :)

[Mike Ross 🇺🇸]

Be careful with Javascript arrays. Some wonky stuff can happen sometimes with memory management. dev.to/volomike/comment/f1f8 Know when to use an object, versus an array.