Javascript Introduction to Arrays

In this lesson, we will learn about an array and how to create it.

What is an Array?

An array in JavaScript is a special type of object that holds multiple values ​​called elements. The stored values ​​can be of any data type, such as string, number, boolean, array, or object.

Methods of creating arrays in JavaScript

There are two main ways to create an array in Javascript: Array Literal and Array constructor.

The first way:

Syntax:

          let arryName = [item1, item2, item3];
        

To create an array, follow these steps:

• Start with the let keyword followed by the name of the array
• Then use the assignment operator =
• Then we put square brackets [] and put inside the square brackets the elements that we want to add to the array.
• Separate the items with a comma ,.

Example:

          let students = ['John', 'Jeff', 'Jack'];
        

In this example, we’ve created an array named students that contains three elements: John, Jeff, and Jack.

The second way to create an array is called Array constructor.

You can also create an array using the Array constructor. This method is less commonly used than the previous one but may be useful in specific cases.

Syntax:

          let arr = new Array(item1, item2, item3);
        

You can pass elements directly inside the parentheses when creating an array with this constructor.

Example:

          let students = new Array('John', 'Jeff', 'Jack');
        

In this example, we used the new Array() constructor to create the students array with the same elements as in the previous example.

Note: Arrays in JavaScript can hold elements of different data types.

          let data = ['John', 15, true];
        

In this example, we have three different types of values: a string (John), a number (15), and a boolean value (true).

If you print the name of the array in the console, it will return the entire array with all its elements.

Example:

          let students = ['John', 'Jeff', 'Jack'];
console.log(students); // Output: Array(3) [ "John", "Jeff", "Jack" ]
        

In this example, we created an array named students, then we printed the name of the array in the console and found that the array was returned complete with all its elements.

Accessing array elements

We can access any element inside the array through the element's index. Each element inside the array has a unique number called an index. The index refers to the position of the element within the array. The index starts from 0. This means that the index of the first element in the array is 0, the index of the second element is 1, the index of the third element is 2, and so on. If we want to access the first element inside the array, we will write the name of the array, then place square brackets [] and write inside the square brackets the index number of the element we want to access.

Example:

          let students = ['John', 'Jeff', 'Jack'];
console.log(students[0]); // Accessing the first element: John
        

In this example, I created an array and then accessed the first element inside the array by using the array name, which is students, and then I placed square brackets [] and wrote inside them the index number of the element I wanted to access. In this example, I wanted to access the first element, so I wrote the index number 0.

Example:

          let students = ['John', 'Jeff', 'Jack'];
console.log(students[2]); // Accessing the third element: Jack
        

In this example, I wanted to access the third element, so I wrote the name array, which is strudents, placed square brackets, and wrote the number 2 inside it (indicating the third element).

Change or update array elements

The value of an element inside the array can be changed using its index, as follows:

• First, write the name of the array followed by square brackets containing the index number of the element whose value we want to change.
• Then the assignment operator =.
• Then the new value we want for this element.

Example:

          let students = ['John', 'Jeff', 'Jack'];
students[1] = 'Jeffrey'
console.log(students); // Output: ['John', 'Jeffrey', 'Jack'];
        

In this example, the second element (Jeff) was replaced with Jeffrey.

Nested Array

An array can contain other arrays as its elements. These are called nested arrays.

Example:

          let students = ['John', 'Jeff', 'Jack', ['James', 'Steven']];
        

In this example, we find that the array contains 4 elements. If we look at the fourth element, we find that it is an array containing two elements.

Note: If we print the fourth element in console, it will return the array

          let students = ['John', 'Jeff', 'Jack', ['James', 'Steven']];
console.log(students[3]);  // Accessing the nested array

// Output:  [James, Steven]
        

Accessing items in a nested array

We can access a specific element inside the nested array. By adding other square brackets and adding the index number of the element we want to access.

Example:

          let students = ['John', 'Jeff', 'Jack', ['James', 'Steven']];
console.log(students[3][0]); // Accessing the first element of the nested array
// Output: James
        

In this example, I typed the name of the array and then added square brackets [] and wrote inside them the index number of the element I wanted to access. In this example, I typed index 3, which refers to the nested array. Then I added other square brackets [] and wrote inside them 0 to access the first element in the nested array.

Length property

There is a property in the array called length. Represents the number of elements in the array.

Example:

          let friends = ['John', 'Jeff', 'Jack'];
console.log(friends.length); // Output: 3
        

In this example, length returns the number of elements in the array, which is 3 elements.

Example:

          let fruits = ['Blueberry', 'Pineapple'];
console.log(fruits.length); // Output: 2
        

In this example, length returns the number of elements in the array, which is 2 elements.

The length property is not limited to knowing the number of elements in the array.

In the following example, we have three fruits, but I can say that the length of the fruits could be two.

          const fruits = ['apple', 'grape', 'orange'];
fruits.length = 2;
console.log(fruits); // Array(2) [ "apple", "grape"]