Learning JavaScript Arrays

Many times when you're writing an application, you will encounter a list of data that need to be used. For example: a list of items inside a shopping cart or a list of users email. To deal with list, we can use an array. In JavaScript, array is a data structure that is used to hold a group of data in one definition. You can think of array as a set of empty boxes that can hold values in an orderly fashion.


An array is written as a list of values between square brackets and separated by commas. To access an array value, you have to call it using the arrayName[index] syntax

  // example of an array
  let listOfNumbers = [7,8,9,0];
  console.log(listOfNumbers[0]); // array index 0 is 7, so it will print out 7
  
  console.log(listOfNumbers[3]); // print out 0
  
  listOfNumbers[2] = 3; // replace 9 with 3

An array can contain any data type you can think of, from strings, numbers, objects, and even another array.

  // put every imaginable thing here!
  let dogObject = {name:"Russ"};
  let listOfRandoms = [7,'cow', dogObject, [1,2,3], 9.5 ];
  // try console.log() and see what is being printed out!

Array has many powerful data manipulation features that are used commonly for data problems. Here I will list some of the most common methods of dealing with array data.

Array length

Count how many data an array is holding at the moment in number.

  let listOfNumbers = [7,8,9,0];
  console.log(listOfNumbers.length); // print out 4

Adding new data to an array

At the beginning of array

Use unshift to add at the beginning of an array

  let listOfNumbers = [7,8,9,0];
  listOfNumbers.unshift(3,3);
  console.log(listOfNumbers); // [3,3,7,8,9,0]

At the end of an array

Use push and like unshift, you can add more than one value.

  let listOfNumbers = [7,8,9,0];
  listOfNumbers.push(3);
  console.log(listOfNumbers); // [3,3,7,8,9,0]

Removing an item from array

From the last index

Use the pop method. No parameter accepted.

  let listOfNumbers = [7,8,9,0];
  listOfNumbers.pop();
  console.log(listOfNumbers); // [7,8,9]

From the beginning

  let listOfNumbers = [7,8,9,0];
  listOfNumbers.shift();
  console.log(listOfNumbers); // [8,9,0]

At a specific index

  listOfNumbers.splice(1,2); // from index 1, remove 2 items

Join multiple arrays

  let a = [7,8];
  let b = [1,2];
  a.concat(b); // [7,8,1,2]

Search for a value

indexOf will return the index of the value put in the parameter, while lastIndexOf will give you the last index of the matching values.

  let a = [7,8,9,7];
  a.indexOf(7); // return 0
  a.lastIndexOf(7); // return 3
  a.indexOf(0); // return -1 because no match was found. Same with lastIndexOf

Get a portion of an array

The slice keyword can have 2 parameters. the starting index and the end index. End index is not sliced. Slice also returns a copy of the array, which means the original array won't be affected.

  let a = [7,8,9,7];
  a.slice(2); // 9,7
  a.slice(1,3); // 8,9 not including the last 7

I might update this list in the future, please do let me know if I miss anything useful.


Get my weekly newsletter ✉️
Let's explore the exciting world of React together.
No Spam. Unsubscribe anytime