Arrays in JavaScript

In this article, we will learn about Arrays in JavaScript

What are Arrays in JavaScript?

An Array is an object which is used to store multiple values at once. Let’s understand array with example

// Example of Array 
let arr = ['Recursive', 'Minds', 1, 2];

In above example arr is an array. arr is storing 4 values.

Ways to create Array

There are two ways to create arrays in JavaScript

Using an array literal
Using the new keyword

1. Using an array literal

array literal is the easiest way to create an array in JavaScript. Let’s see the example

// Creating Array using literal
let arr = ['recursive', 'minds'];

2. Using the new keyword

In JavaScript, you can also create an array with new keyword. Let’s see how to create an array with new keyword

// Creating array using new keyword
let arr = new Array('recursive', 'minds');

In the above examples, we created both arrays with two elements.

Note:It is recommended to use array literal

Some more examples of Arrays in javascript

// Empty array
const arr1 = [ ];

// Array of numbers
const arr2 = [ 1, 2, 3, 4, 5];

// Array of Strings
const arr3 = ['Recursive', 'Minds', 'by', 'Amit'];

// We can create array of multiple datatypes in JavaScript
// Array with mixed datatypes
const arr4 = ['Recursive', 'Minds', 7, false];

You can also store objects, functions, and another array inside a JavaScript array. Let’s see below

// Array of object, array and function
const newData = [
    {name: 'Amit Kumar'},
    [1, 2 ,3],
    function recursiveMinds() { console.log('Recursive Minds')}
];

How to access array elements

You can access array elements using array indices (0, 1, 2, 3, …). For Example

// Example of how to access array elements
const arr = [1, 2, 'Recursive', 'Minds', true];

// first element
console.log(arr[0]);  // 1

// second element
console.log(arr[1]); // 2

// Third element
console.log(arr[2]); // 'Recursive'

// Forth element
console.log(arr[3]); // 'Minds'

// fifth element
console.log(arr[4]); // true

Arrays in JavaScript — **Visual Representation of Array**

Note: Array's index always starts with 0, not 1

How to add elements in Array

There are two built-in methods in JavaScript to add elements to an array push() and unshift()let’s discuss them one by one

The push() method adds an element to the end of an array. For example

// Example of push() method in array
let arr = ['apple', 'mango'];

// add an element at the end
arr.push('banana');

console.log(arr); //  ['apple', 'mango', 'banana']

The unshift()method adds an element to the beginning of an array. For example

// Example of unshift() method in array
let arr = ['apple', 'mango'];

// add an element at the beginning
arr.unshift('banana');

console.log(arr); //  ['banana','apple', 'mango']

How to remove elements from an array

There are two built-in methods to remove elements from an array pop() and shift. Let’s discuss them one by one

The pop() method removes the last element from an array. For example

// Example of pop() method in array
let arr = ['apple', 'mango', 'banana'];

// add an element at the end
let element = arr.pop();

console.log(element); // 'banana'
console.log(arr); //  ['apple', 'mango']

The shift()method removes the first element from an array. For example

// Example of shift() method in array
let arr = ['apple', 'mango', 'banana'];

// add an element at the end
let element = arr.shift();

console.log(element); // 'apple'
console.log(arr); //  ['mango', 'banana'']

How to change elements of an array

You can easily change elements of an array using their indices. Let’s understand using example

let arr = ['apple', 'mango', 'banana'];

// This will add the new element 'exercise' at the 3 index
arr[3] = 'orange';

console.log(arr); // ['apple', 'mango', 'banana', 'orange']

Suppose the array has three elements and you are trying to add an element at 4th index (5th position). The value of 4th element becomes undefined. For example

let arr = ['apple', 'mango', 'banana'];

// This will add the new element 'exercise' at the 4th index
arr[4] = 'orange';

console.log(arr); // ['apple', 'mango', 'banana', undefined  ,'orange']

Thank you so much for reading

Happy coding

For more details visit MDN Docs