JavaScript Arrays Tutorial

Arrays are an essential data structure in JavaScript that allow you to store and manipulate multiple values within a single variable. Arrays can hold a mix of different data types and are particularly useful for tasks involving collections of items.

Specifically: An array is an object that holds values (of any type) not particularly in named properties/keys, but rather in numerically indexed positions.

Creating Arrays

You can create arrays using square brackets and separating elements with commas. We are formatting the array to look just like the objects that it is:

var arrayVariable = [
    "John",
    "Doe",
    30,
    false
];

Accessing Array Elements:
Array elements are accessed using zero-based indexing:
arrayVariable[0];       // "John"
arrayVariable[1];       // Doe
arrayVariable[2];       // 30
arrayVariable[3];       // false
arrayVariable.length;   // 4

Pictorially, here is how arrays are saved in memory:


We do not have to write arrays like objects, we conventionally write them on a straight line like the ones below:

  const numbers = [1, 2, 3, 4, 5];
  const fruits = ["apple", "banana", "orange"];
  const mixed = [1, "hello", true, null];

Accessing Array Elements

Once again, array elements are accessed using zero-based indexing:

  console.log(numbers[0]);    // 1
  console.log(fruits[1]);     // "banana"
  console.log(mixed[2]);      // true
  

Modifying Array Elements

You can modify array elements by assigning new values to specific indices:

  fruits[0] = "pear";
  console.log(fruits);         // ["pear", "banana", "orange"]
  

Array Length

The length property provides the number of elements in an array:

  console.log(numbers.length);     // 5
  

Adding Elements

You can add elements to the end of an array using the push method:

  fruits.push("grape");
  console.log(fruits);       // ["pear", "banana", "orange", "grape"]
  

Removing Elements

To remove elements from an array, you can use the pop method to remove the last element or the splice method to remove specific elements:

  fruits.pop();              // Removes "grape"
  console.log(fruits);       // ["pear", "banana", "orange"]
  
  fruits.splice(1, 1);       // Removes one element starting at index 1
  console.log(fruits);       // ["pear", "orange"]
  

Iterating through Arrays

You can use loops like for or forEach to iterate through array elements:

  for (let i = 0; i < numbers.length; i++) {
      console.log(numbers[i]);
  }
  
  fruits.forEach(function(fruit) {
      console.log(fruit);
  });
  

Array Methods

JavaScript provides a variety of useful array methods, such as map, filter, and reduce, for performing advanced operations on arrays.

  const doubledNumbers = numbers.map(function(num) {
      return num * 2;
  });
  
  const evenNumbers = numbers.filter(function(num) {
      return num % 2 === 0;
  });
  
  const sum = numbers.reduce(function(acc, num) {
      return acc + num;
  }, 0);
  

Array Destructuring

Destructuring allows you to extract array elements into individual variables:

  const [first, second, ...rest] = numbers;
  console.log(first); // 1
  console.log(second); // 2
  console.log(rest); // [3, 4, 5]
  

Some JavaScript Array Methods

const numbers = [1, 2, 3];
numbers.push(4);
numbers.pop();

const fruits = ['apple', 'banana'];
fruits.unshift('orange');
fruits.shift();

const array1 = [1, 2];
const array2 = [3, 4];
const merged = array1.concat(array2);

const fruits = ['apple', 'banana'];
const fruitString = fruits.join(', ');

const numbers = [1, 2, 3, 4, 5];
const subArray = numbers.slice(1, 4);

const numbers = [1, 2, 3, 4, 5];
numbers.splice(2, 1, 6, 7);

const numbers = [1, 2, 3, 4, 3];
const index1 = numbers.indexOf(3);
const index2 = numbers.lastIndexOf(3);

const numbers = [1, 2, 3, 4, 5];
const hasThree = numbers.includes(3);

const numbers = [1, 2, 3, 4, 5];
const even = numbers.find(num => num % 2 === 0);
const evenIndex = numbers.findIndex(num => num % 2 === 0);

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);

const numbers = [1, 2, 3];
const squaredNumbers = numbers.map(num => num * num);

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);

const fruits = ['apple', 'banana'];
fruits.forEach(fruit => console.log(fruit));

const numbers = [3, 1, 4, 2, 5];
numbers.sort();

const numbers = [1, 2, 3, 4, 5];
numbers.reverse();

const numbers = [1, 2, 3, 4, 5];
const allEven = numbers.every(num => num % 2 === 0);
const someEven = numbers.some(num => num % 2 === 0);

const nestedArray = [1, [2, 3], [4, [5]]];
const flatArray = nestedArray.flat();
const doubledArray = nestedArray.flatMap(num => num * 2);

const numbers = [1, 2, 3];
const isArr = Array.isArray(numbers);

const numbers = [1, 2, 3];
const numString = numbers.toString();
const localizedString = numbers.toLocaleString();

const numbers = [1, 2, 3, 4, 5];
numbers.fill(0, 2, 4);

const numbers = [1, 2, 3, 4, 5];
numbers.copyWithin(0, 3);

const numbers = [1, 2, 3];
const keys = numbers.keys();
const values = numbers.values();
const entries = numbers.entries();

const iterable = 'hello';
const arrayFromIterable = Array.from(iterable);

const newArray = Array.of(1, 2, 3);