All about arrays in javascript
HARSH VATS

HARSH VATS @harshvats2000

About: Web developer from India who thinks he is funny. Proud IITian. And a lover of PWAs😍. Web Developer with an eye for design. Frontend Engineer @Sotaog

Location:
India
Joined:
Jul 9, 2020

All about arrays in javascript

Publish Date: Jul 13 '20
36 11

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 11 total

  • Sri Sai Jyothi
    Sri Sai JyothiJul 13, 2020

    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
      HARSH VATSJul 13, 2020

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

  • Mike Ross 🇺🇸
    Mike Ross 🇺🇸Jul 13, 2020

    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.

  • Nick
    NickJul 13, 2020

    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
      HARSH VATSJul 13, 2020

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

      • Nick
        NickJul 13, 2020

        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
          HARSH VATSJul 13, 2020

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

  • Pieter Epeüs Wigboldus
    Pieter Epeüs WigboldusJul 13, 2020

    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
      HARSH VATSJul 13, 2020

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

  • Lawal Habeebullahi
    Lawal HabeebullahiJul 14, 2020

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

Add comment