Home » Tutorials » Learn Javascript » JavaScript Arrays

Learn Javascript

 Prev

JavaScript Arrays

An Array in JavaScript is an object that can store multiple values. In a simpler sense, JavaScript Arrays are containers that can store more than one value.

We already studied about JavaScript having two data types: Primitive Data Types and Objects, in our JavaScript Data Types lesson. Array belongs to the Object data type.

NOTE: Don’t worry about Objects for now. You’ll learn that later on our JavaScript Objects lesson.

Syntax:

const students = ['Steve', 'Tony', 'Bruce', 'Natasha'];

In the above code, students, is an array storing values: ‘Steve‘, ‘Tony‘, ‘Bruce‘ and ‘Natasha‘.

Why is Array Required? 🤔

Suppose, if we have a lot of data or values, let’s say about 5 values, that we want to store somewhere, then storing each of them in a separate variable or a constant might be very time consuming to do. Thus, we have arrays.

Example using variables

let friend1 = 'Harry';
let friend2 = 'Sam';
let friend3 = 'Sophie';
let friend4 = 'John';
let friend5 = 'Emily';

Here, instead of storing each of the values in an individual variable, we could save us a lot of time by using an array instead.

Example using array

const friends = ['Harry', 'Sam', 'Sophie', 'John', 'Emily'];

NOTE: What if we had 100 values? Using an array would be saving us a lot of time than using variables or constants.

Creating arrays in JavaScript

There are two ways which we can create an array in JavaScript.

  1. Using an array literal.
  2. Using the new keyword.

Using an array literal 🤓

An array can simply be created using big brackets [ ] and assigning them to a constant.

Example

const students = ['Steve', 'Tony', 'Bruce', 'Natasha'];

In the above code, students, is an array, storing values: ‘Steve‘, ‘Tony‘, ‘Bruce‘, ‘Natasha‘.

Using the new keyword 😎

The recommended way of creating an array is to use the new keyword.

Example

const students = new Array('Steve', 'Tony', 'Bruce', 'Natasha');

Here, the new keyword along with the Array keyword created an array called students, having values: ‘Steve‘, ‘Tony‘, ‘Bruce‘ and ‘Natasha‘.

Accessing elements in an array

Elements in an array are the values that are stored in it. Each element in an array is automatically assigned an index number, which is used to access it.

The index number always starts with 0, which means that the first element in an array will always have an index of 0, second element will have an index of 1 and so on.

Example

const students = ['Steve', 'Tony', 'Bruce', 'Natasha'];

console.log(students[0]); // Displays 'Steve'
console.log(students[1]); // Displays 'Tony'

Output

Steve
Tony

Changing or Updating elements in an array

We can also change the value of any element in an array. We do it using the index of that element which we need to change.

Example

const students = ['Steve', 'Tony', 'Bruce', 'Natasha'];

// Displays 'Steve'
console.log(students[0]);

// Changing the first element from 'Steve' to 'Nick'
students[0]='Nick';

// Displays 'Nick'
console.log(students[0]);

// We can also console.log the entire array
console.log(students);

Output

Steve
Nick
[ 'Nick', 'Tony', 'Bruce', 'Natasha' ]

Difference between JavaScript Arrays with let and const 😲

We can create arrays not only by using the const keyword, but also using the let keyword.

Arrays created with const cannot be reassigned or entirely changed whereas arrays created with let can be reassigned or entirely changed.

Example using const

const fruits = ['Apple', 'Mango', 'Watermelon'];

// Entirely changing the array "fruits" is not possible because it was created with "const".
fruits=['Apple', 'Banana', 'Orange'];

// This gives error.
console.log(fruits);

Example using let

let fruits = ['Apple', 'Mango', 'Watermelon'];

console.log(fruits);

// Entirely changing the array "fruits" is possible because it was created with "let".
fruits=['Apple', 'Banana', 'Orange'];

// This does not give error.
console.log(fruits);

Output

[ 'Apple', 'Mango', 'Watermelon' ]
[ 'Apple', 'Banana', 'Orange' ]

NOTE: However, it is recommended to use const instead of let while creating an array.

In this way, arrays in JavaScript help us store multiple values of the same data type in a single container.

Next