Introduction to JavaScript Array

INTRODUCTION

Arrays in JavaScript are a fundamental and useful concept to understand in JavaScript. Their data structure enables us to store multiple values in a single variable. In this tutorial, we’ll look into some basics of JavaScript arrays, like how to create an array, access array elements, change array elements, and convert an array.

PREREQUISITES

To get the most out of this article, you must have basic knowledge of JavaScript variables and basic data-type knowledge.

Array definition

An array is a data type used to store multiple data types or elements in one variable.

importance of arrays in JavaScript programming

• Arrays can store data types like strings, numbers, Boolean, and other arrays.

• Arrays allow you to store and manipulate collections of data, which makes it easy to work with data sets.

• Arrays have many built-in methods available to manipulate your array variables as you like.

• Arrays can grow or reduce as elements are added or removed, which makes them dynamic.

• Arrays can be easily looped through or iterated, which makes it simple to perform operations on different elements.

There is much more importance in arrays, but they won’t be useful for this beginner’s guide to JavaScript arrays.

Creating arrays

There are three major ways of creating arrays: the array literal method, the javascript constructor notation, and the Array.of() method. Let’s explore these methods below:

Array literal method

This is the most common method of creating an array in JavaScript. It works by putting either elements of the same or different data types in an enclosed bracket.

SYNTAX:

let array1 = [element1, element2, ..., elementN];

EXAMPLE:

let array2 = [1, 2, 3, 4, 5, 6];

This example creates a new array, array2, with six elements: 1, 2, 3, 4, 5, and 6.

USE CASES:

• To create a list of items stored in a variable.

• To store data in a collection.

EXAMPLE:

let monthsOfTheYear = ['january', 'february', 'march', 'april'];

let daysOfTheWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday',  'Friday', 'Saturday', 'Sunday'];

JavaScript constructor notation

This involves creating an array using the ‘Array’ constructor function with the ‘new’ keyword.

SYNTAX:

let array1 = new Array(element, element2, ..., elementN);

This example creates a new array, array2, with six elements: 1, 2, 3, 4, 5, and 6.

USE CASES AND EXAMPLES

• To create an array with multiple elements:

let days = new Array('monday', 'tuesday', 'wednesday');

• Create an array with a numeric argument:

let array1 = new Array(5);

• Create an array with dynamic length:

let length = 6;

• Create an array with elements of different data types

let mixedArray = new Array(1, 'two', true, {name:"dotun" });

Array.of() method:

This is a static method of the Array constructor in JavaScript. It creates a new array instance from a variable number of arguments, regardless of the number or type of the arguments.

SYNTAX:

• Array.of(element1, element2,... elementN);

Array.of(1, 2 , 3, 4, 5);

This creates a new array [1, 2, 3, 4, 5].

USE CASES AND EXAMPLES

• Creating an array from a variable number of arguments.

let array1 = Array.of(1, 2, 3, 4, 5);

• Creating an array with mixed data types

let array1 = Array.of(1, "two", true, {name: "dotun"});

• Creating an empty array.

let array1 = Array.of();

Accessing array elements

After creating an array, the elements can be accessed through indexing.

Indexing:

In JavaScript, the first element of an array is counted as zero. This means arrays are zero-indexed.

Syntax:

let array1 = [1, 2, 3, 4, 5, 6];
console.log(array1[0]);

The output of the example above will be 1;

Elements can be accessed at different indices, including, i.e,

• Positive indices: array1[0], array1[1], etc.

• Negative indices: array1[-1]

• Indices that are out of range: occur when you try to access an index that is not in the array, e.g., array1[6]; This will return undefined because there are only 6 elements with index 0–5.

CONVERTING ARRAYS

As much as arrays are very fundamental in JavaScript, from time to time we need to convert them to other data types to suit the use-case or requirements. In this section, we’ll explore the various methods for converting arrays in JavaScript.

These are the basic methods to convert arrays: toString() method, join() method, and JSON.stringify() method. These are the three methods we will talk about below.

• toString() method

This method converts an array into a string. This method is useful when you need to display array elements. It is useful to convert arrays to strings when they must be displayed or stored in a text file.

EXAMPLE:

let array1 = [1, 2, 3, 4, 5];
console.log(array1.toString());

This program above outputs: “1,2,3,4,5”

• join() method:

This method concatenates array elements into a string using a specified separator.

EXAMPLE:

let array1 = [1, 2, 3, 4, 5];
console.log(array1.join(' '));

This program above outputs: “1 2 3 4 5”

• JSON.stringify() method:

This method is used for converting an array into a JSON string. JSON strings are mainly useful when working with APIs or storing data in a database.

EXAMPLE:

let array1 = [1, 2, 3, 4, 5];
console.log(JSON.stringify(array1));

This program above outputs: “[1, 2, 3, 4, 5]”.

CONCLUSION

In this article, we covered the introduction to arrays, including array definition, the different methods of creating arrays, accessing array elements, and converting arrays to string datatypes. As a beginner JavaScript developer, understanding JavaScript arrays is needed for building efficient and scale-able applications. Keep practicing and experimenting with the different methods taught for better understanding.