Table of contents
Arrays are used to store multiple values in a single variable. It is often used when we want to store a list of elements and access them by a single variable. In JavaScript, an array can contain elements of different datatypes 🤩
Here is an example:
let array = [11, "twelve", true, ....];
Let's see another example 👇
A variable 'names' is declared using the keyword let and 5 names (elements) are stored in it. Each item in an array has a number attached to it, called index value that allows you to access the elements in the array. In JavaScript array starts at the index 0 and can be manipulated with various methods.
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
The index value of 'Shon' is 0 , the index value of 'Shine is 1 and so on.
Let's console log the above code and see the output.
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
console.log(names);
// output [ 'Shon', 'Shine', 'Sharone', 'Bhavya', 'Preksha' ]
Before diving into the array methods, let's walk through some of the array properties
Properties of Array
Length property
The length property of an array shows the number of elements in that array.
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
console.log(names.length);
// output: 5
Index value
We will now see how can we access the individual elements in the array with the help of the index value
Accessing individual elements in an array
To access the individual elements of an array, use the variable 'names' followed by the element's index in square brackets. Array indexes start at 0 and end at its length-1.
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
console.log(names[3]);
// output: Bhavya
Accessing the last element of an array when you don't know the length of the array
To get the last item of an array when you don't know the length of that array yet JavaScript arrays start from 0.So if we want to figure out the index of the last item in a JavaScript array, we can subtract 1 from the length of the array:
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
console.log(names[names.length - 1]);
// output: Preksha
Replacing an element of an array
In the below example, we are accessing and replacing 'Sharone' with 'Rithu' by using the index value.
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
names[2] = "Rithu";
console.log(names);
// output [ 'Shon', 'Shine', 'Rithu', 'Bhavya', 'Preksha' ]
Array Methods
Push() method
The push() method adds one element to the end of an array. push() the method modifies the original array
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
names.push("Vyom");
console.log(names);
// output: [ 'Shon', 'Shine', 'Sharone', 'Bhavya', 'Preksha', 'Vyom' ]
Slice() method
The slice() method is used to fetch the selected elements of the array and returns them in a new array. The slice() method selects from a given start, up to a not inclusive given end. The original array will not be modified.
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
console.log(names.slice(0, 3));
// output [ 'Shon', 'Shine', 'Sharon' ]
Splice()method
The splice() method changes the contents of an array by removing or replacing existing elements and adding new elements in place. splice() method modifies the original array
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
names.splice(2, 1, "Rithu", "Ivin");
console.log(names);
// output [ 'Shon', 'Shine', 'Rithu', 'Ivin', 'Bhavya', 'Preksha' ]
The first argument ie 2 says from where the adding of new elements should start in the array. And the optional second argument says how many elements should be removed from the array
Concatenation
The concat() method joins two or more arrays. It does not modify the original array.
let avengers = ["Hawkeye", "Thor", "Captain America"];
let weapons = ["Bow", "Hammer", "Shield"];
console.log(avengers.concat(weapons));
// output: ['Hawkeye','Thor','Captain America','Bow','Hammer','Shield']
Fill() method
The fill() method changes all elements in an array to a static value, from a start index(default 0) to an end index (default array.length). It modifies the original array.
let array = [1, 2, 3, 4, 5];
console.log(array.fill("shon"));
//output: [ 'shon', 'shon', 'shon', 'shon', 'shon' ]
You can specify the start and end position as in the example given below.
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
arr.fill("shon", 2, 4);
console.log(arr);
// output [1, 2 'shon', 'shon', 5, 6, 7, 8, 9]
The start argument is 2 and the end argument is 4. So the numbers 3 and 4 which are at the index of 2 and 3 are replaced by 'shon'. The end argument is not inclusive.
includes() method
The includes() method returns true if an array contains a specified value. It returns false if the value is not found.
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
console.log(names.includes("Shon"));
// output: true
IndexOf()
The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
console.log(names.indexOf("Shon"));
// output : 0
console.log(names.indexOf("Ethan"));
// output -1
isArray()
The Array.isArray() static method determines whether the passed value is an array.
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
console.log(Array.isArray(names));
// output: true
let name = "Shon";
console.log(Array.isArray(name));
//output: false
The join()
The join() method creates and returns a new string by concatenating all of the elements in an array, separated by commas or specified separator strings. It does not modify the original array.
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Preksha"];
console.log(names.join());
// output : Shon,Shine,Sharone,Bhavya,Preksha
console.log(names.join(""));
//output: ShonShineSharoneBhavyaPreksha
console.log(names.join(" "));
// output : Shon Shine Sharone Bhavya Preksha
console.log(names.join("-"));
// output : Shon-Shine-Sharone-Bhavya-Preksha
LastIndexOf
The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present.
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Shon", "Preksha"];
console.log(names.lastIndexOf("Shon");
// output : 4
console.log(names.lastIndexOf("Ethan"));
//output: -1
map() method
The map() creates a new array calling a function for every array element.
map() calls a function once for each element in an array. map() doesn't modify the original array.
let nums = [1, 2, 3, 4, 5];
console.log(nums.map((x) => x + 10));
// output [10, 20, 30, 40, 50]
Pop() method
The pop() method removes the last element from an array and returns that element. This method changes the length of the array.
let names = ["Shon", "Shine", "Sharone", "Bhavya", "Shon", "Preksha"];
console.log(names.pop());
// output : Preksha
reverse() method
The reverse() method reverses the order of the elements in an array.
It rewrites the original array.
let numberNames = ["one", "two", "three", "four", "five"];
console.log(numberNames.reverse());
//output: [ 'five', 'four', 'three', 'two', 'one' ]
shift() method
The shift() method removes and returns the first item of an array. This method modifies the original array.
let order = ["first", "second", "Third"];
console.log(order.shift());
// output : first
sort()method
The sort() method sorts the elements of an array in ascending order. The default sort order is ascending,
let words = ["dog", "bull", "alpaca", "camel"]
console.log(words.sort());
// output : ['alpaca', 'bull', 'camel', 'donkey']
If you want to sort your array in descending order, then first reverse() the array and then sort()
let words = ["dog", "bull", "alpaca", "camel"]
console.log(words.reverse(words.sort()));
//output: [ 'dog', 'camel', 'bull', 'alpaca' ]
The sort() method changes the original array.
unshift() method
The unshift method adds one or more elements to the beginning of the array and returns a new length of the array. The unshift() method overwrites the original array.
let names = ["shon", "shine"];
console.log(names.unshift("ethan"));
// output : 3
console.log(names);
// output : [ 'ethan', 'shon', 'shine' ]
reference:
MDN
W3 Schools
Thank you,
Shon