Arrays are one of the important elements you must understand if you want to become a professional JavaScript developer. Again, it is one of the core features you will need to write simple and complex programs.

What are JavaScript Arrays?

A single variable in a JavaScript array can contain values of different types. And with the definition you just read, you might be picturing a JavaScript object. But an array differs greatly from an object, even though they both store different variables.

const array_example = [] 


const object_example = {}

Notably, the brackets and mode of data storage can be used as the first two ways to distinguish an array from an object.

const object_example = {RoomOne: " Simon", RoomOne: " Rita"]

Furthermore, number, string, boolean, and null-type elements can all be stored in a JavaScript array. Besides, an array’s size is dynamic and self-expanding, so its volume is unknown as soon as it is created.

Again, the array index, which starts at zero, is a number that is associated with each element in an array and allows you to access it.

How to Create Simple JavaScript Arrays

There are many ways to create a JavaScript array for the first time, but the simplest is to use the Array constructor.

let myFirst_arr = new Array();

Currently, this array is empty and holds zero values. But by including entities in Array(), you can add values to this array.

For example:

let myFirst_arr = new Array(10);

Again, by adding a value to this array, we say you have created an array with an initial size.

let myFirst_arr = new Array(1, 3, 4, 5, 2);

Furthermore, the second way to create an array is one of the popular ways you might see in different programming tutorials.

For example

const home_gadgets = ["washing machine", "oven", "refrigerator"," Television ", " fan"];

This is the preferred way to create an array in JavaScript. Additionally, the square brackets [] in the array literal form are what you can use to enclose an element list that is separated by commas.

You can also create an empty array that can be updated later to contain values. But, to create an empty array, you use square brackets without specifying any elements, like this:

let ArrayIsEmpy = [];

How to Access the Elements of an Array in JavaScript

As we mentioned earlier, JavaScript arrays are zero-based indexed. This means that the first element of an array starts at index 0, the second element starts at index 1, and so on.

Therefore, you must use this zero-first numbering pattern to access an element in an array.

// The following demonstrates how to use the oven and refrigerator from the array of home appliances.

const home_gadgets = ["washing machine", "oven", "refrigerator"," Television ", " fan"] ;

console.log(home_gadgets[1]) //output......... oven
console.log(home_gadgets[2]) //output........oven

//bto get all elements in the array
console.log(home_gadgets); //output........ (5) ['washing machine', 'oven', 'refrigerator', ' Television ', ' fan']

How to Change an Array Element in JavaScript

You have the option to alter an array element after declaring it and giving it a value. However, you will need to know the index of the array element you wish to replace to change the element.

For example

const home_gadgets = ["washing machine", "oven", "refrigerator"," Television ", " fan"];

// In the array above, we want to replace "oven," which is at index 1 with "home theater."

// To do this, follow the steps below.

home_gadgets[1] =  "home theater";

// Output the full array to see the changes

console.log(home_gadgets); // output ........(5) ['washing machine', 'home theater', 'refrigerator', ' Television ', ' fan']

How to Access the First and the Last Element of An Array 

Using the index value, you can get to any element in an array, whether it be the first, second, or last element. So, with index 0, you can access the first element, while index -1 gives you access to the last element.

For example:

const home_gadgets = ["washing machine", "oven", "refrigerator"," Television ", " fan", "bed", "iron", "cupboard", "cooker", "cushion", "table"];

//code to fetch the first element
console.log(home_gadgets[0]) //output............washing machine

//fetch the last element
console.log(home_gadgets[home_gadgets.length -1]); //output............table

Again, using one of the components or properties of an array, you can also determine how many elements there are overall in the home_gadgets arrays. 

For example

const home_gadgets = ["washing machine", "oven", "refrigerator"," Television ", " fan", "bed", "iron", "cupboard", "cooker", "cushion", "table"];

// To know the count of elements in the array above, we use the length property.

let arr_len = home_gadgets.length
console.log(arr_len)
 //output is ...0

Conclusion 

You gained knowledge of JavaScript arrays in this article. Keep in mind that while JavaScript objects use named indices, arrays use numbered indices. Consequently, arrays are the best if the names of the program’s elements are numbers, while objects are preferred if they are strings. 

Categorized in:

JavaScript