Javascript Array Objects enable the storage of keyed sets of values.  However, we frequently find ourselves in need of an organized collection, with a first, second, third element, and so on. We could need it to keep a list of stuff, such as users, HTML elements, goods, and so on.

It is inconvenient to use an object here since it does not give methods for managing the order of elements. We cannot add a new property "between" the ones that already exist. Objects are just not intended for such use.

To create ordered collections, you can use a particular data structure called Array. This article will teach you all you need to know about JavaScript arrays.

const cars = ["Lamborghini", "Audi", "McLaren"];

Characteristics of Javascript Array

A JavaScript Arrays has the following properties:

• For starters, an array can include values of many sorts.
• Secondly, an Array's size is dynamic and grows on its own. This means that you do not have to declare the array size in advance.

Creating Javascript Arrays

You can create Javascript arrays using two methods. You can create an array using a new keyword or an array literal. Firstly, we'll be taking a look at how to create Javascript arrays using an array literal, and then we'll head on to how you can create a Javascript arrays using a new keyword.

1. Creating JS Arrays Using an Array Literal

Using an arrays literal [] is the most straightforward approach to generating a Javascript arrays.

The syntax for building an array with an array literal is as follows:

var arrayname=[value1,value2.....valueN];  

Example

const array1 = ["bath", "read"];

2. Creating JS Arrays Using a New Keyword

You may also use the new keyword in JavaScript to construct an array. However, using an array literal to generate an array is still advised.

The syntax for constructing an array using the New Keyword is as follows:

var arrayname=new Array();  

Let's look at an example of using the New Keyword to generate an array.

Example

<script>  
var i;  
var emp = new Array();  
emp[0] = "Carl";  
emp[1] = "Jimmy";  
emp[2] = "Chandler";  
  
for (i=0;i<emp.length;i++){  
document.write(emp[i] + "<br>");  
}  
</script>  

Here are some more examples of Javascript arrays:

// an empty array
const myList = [ ];

// array of numbers
const numberArray = [ 3, 6, 9, 12];

// array of strings
const stringArray = [ 'wake', 'bath', 'dress'];

// array with mixed data types
const newData = ['sleep', 'travel', 1, true];

A Javascript arrays can also include arrays, functions, as well as other things. Check this out:

const newData = [
    {'task1': 'travel'},
    [1, 2 ,3],
    function hello() { console.log('hello')}
];

Accessing Elements of a Javascript Arrays

Array items can be accessed using indices (0, 1, 2, 3,4). As an example;

const myArray = ['f', 'e', 'a', 's', 't'];

// first element
console.log(myArray[0]);  // "f"

// second element
console.log(myArray[1]); // "e"

A Javascript array's index starts with zero, not one.

Getting the Size of a Javascript Arrays

The length property of a Javascript array typically returns the no. of elements. The length property is demonstrated in the following example:

let mountains = ['Tables', 'Chairs', 'Whiteboard'];
console.log(objects.length); // 3

Basic operations on Javascript Arrays

1. Adding Elements to the beginnings of Javascript arrays

To do this, use the unshift() Method:

let mountains = ['Everest', 'Fuji', 'Kilimanjaro', 'Blanc'];
mountains.unshift('Fitz Roy');

console.log(mountains);

2. Adding Elements to the end of Javascript arrays

To do this, use the push() Method:

let mountains = ['Everest', 'Fuji', 'Kilimanjaro', 'Blanc'];
mountains.push('Fitz Roy');

console.log(mountains);

3. Removing Elements from the beginnings of Javascript arrays

To do this, use the shift() Method

let mountains = ['Kilimanjaro', 'Fuji', 'Everest', 'Blanc'];
const firstElement = mountains.shift();

console.log(firstElement);

4. Removing Elements from the end of Javascript arrays

To do this, use the pop() Method:

let mountains = ['Kilimanjaro', 'Fuji', 'Everest', 'Blanc'];
const lastElement = mountains.pop();

console.log(lastElement);

let everydayActivities = ['wake', 'brush', 'bath', 'work'];

// remove the last element
everydayActivities.pop();
console.log(dailyActivities); // ['wake', 'brush', 'bath']

// remove the last element from ['wake', 'brush', 'bath']
const removedElement = dailyActivities.pop();

//get removed element
console.log(removedElement); // 'bath'
console.log(everydayActivities);  // ['wake', 'brush']

5. Checking if a Value is a Javascript Arrays

To do this, use Array.isArray() Method:

console.log(Array.isArray(mountains)); // true

6. Finding an index of an element in a Javascript arrays

To do this, use the indexOf() Method:

let mountains = ['Fuji', 'Kilimanjaro', 'Everest', 'Blanc'];
let index = mountains.indexOf('Everest');

console.log(index); // 2

Javascript Arrays Methods

Method	Description
concat()	joins more than one Javascript array and returns a result
indexOf()	looks through an array's element and returns its position
find()	returns the first value of a Javascript array element that passes a test
findIndex()	returns the first index of a Javascript array element that passes a test
forEach()	calls a function for every element
includes()	runs checks to see if a Javascript array has a particular element
push()	adds a new element at the end of a Javascript array and then returns the new length of the array
unshift()	this adds a fresh element at the beginning of a Javascript array and then returns the new length of the array
pop()	removes the last element of a Javascript array and then returns the removed element
shift()	removes the first element of a Javascript array and then returns the removed element
sort()	sorts all elements in alphabetical order in strings as well as in ascending order
slice()	selects parts of a Javascript array and then returns the new array
splice()	removes existing elements and adds new elements

Exercise

Get the value "McLaren" from the supercars array.

const supercars = ["Lamborghini", "McLaren", "Ferrari"];
let x = 
;

For more javascript methods click here