Arrays in JavaScript : An in-depth Guide

A Software Engineer with 2+ years of Experience focused on developing scalable, intuitive user interfaces using React.js, JavaScript, and React Hooks. Aim is to ensure seamless user experiences through modern web optimization techniques and frontend frameworks.
What is Array [ ] ?
An array is a type of variable that uses a specific syntax to store multiple values. An array can be created with either an array literal or the Array constructor syntax.
const languages = ["C", "C++", "Python", "Java"];
Why Use Arrays?
If you have a list of items, storing the cars in single variables could look like this:
let language1 = "C";
let language2 = "C++";
let language3 = "Python";
let language4 = "Java";
But what if you want a specific one? There are thousands of languages available.
An array is a solution!
An array can store many values under a single name, and the values can be accessed by referring to an index number.
Creating an Array
The simplest way to create a JavaScript Array is to use an array literal.
Syntax
const array_name = [item1, item2, ...];
JavaScript Array Methods
π push()
The
push()method adds new items to the end of an array.The
push()method changes the length of the array.The
push()method returns the new length.
Example
const languages = ["C", "C++", "Java", "Python"];
languages.push("JavaScript");
console.log(languages);
Console Output:
['C', 'C++', 'Java', 'Python', 'JavaScript']
π pop()
The
pop()method removes (pops) the last element of an array.The
pop()method changes the original array.The
pop()method returns the removed element.
Example
const languages= ["C", "C++", "Java", "Python"];
console.log(languages.pop());
console.log(languages);
Console Output:
Python
['C', 'C++', 'Java']
π toString()
The JavaScript method toString() converts an array to a string of array values.
Example
const languages= ["C", "C++", "Java", "Python"];
console.log(languages.toString());
Console Output:
C,C++,Java,Python
π indexOf()
The
indexOf()method returns the first index of a specified value.The
indexOf()method returns -1 if the value is not found.The
indexOf()method starts at a specified index and searches from left to right.
Example
const languages= ["C", "C++", "Java", "Python"];
console.log(languages.indexOf("Java"));
Console Output:
2
πincludes()
The
includes()method returns true if an array contains a specified value.The
includes()method returns false if the value is not found.The
includes()method is case sensitive.
Syntax
array.includes(element, start)
Example
const languages = ["C", "C++", "Java", "Python", "JavaScript"];
console.log(languages.includes("JavaScript"));
Console Output:
true
π concat()
The
concat()method concatenates (joins) two or more arrays.The
concat()method returns a new array, containing the joined arrays.The
concat()method does not change the existing arrays.
Syntax
array1.concat(array2, array3, ..., arrayx)
Example
const arr1 = [1, 2, 3, 4];
const arr2 = [5, 6, 7, 8];
const arr3 = arr1.concat(arr2);
console.log(arr3);
Console Output
[
1, 2, 3, 4,
5, 6, 7, 8
]
π slice()
The
slice()method returns selected elements in an array, as a new array.The
slice()method selects from a given start, up to a given end.The
slice()method does not change the original array.
Syntax
array.slice(start, end)
Here, start means
Start Position, and itsdefault is 0.
end meansEnd Position, and its default is thelast element.
Example
const languages = ["C", "C++", "Python", "Java", "JavaScript"];
const favlang = languages.slice(1, 3);
console.log(favlang );
Console Output:
C++, Python
π splice()
The
splice()method adds and/or removes array elements.The
splice()method overwrites the original array.
Syntax
array.splice(index, item1, ....., itemX)
Example
const languages = ["C", "C++", "Python", "Java", "JavaScript"];
const favlang = languages.splice(1, 3);
console.log(favlang);
Console Output:
[ 'C++', 'Python', 'Java' ]
π shift()
The
shift()method removes the first item of an array.The
shift()method changes the original array.The
shift()method returns the shifted element.
Example
const languages = ["C", "C++", "Java", "Python", "JavaScript"];
console.log(languages.shift());
console.log(languages);
Console Output:
C
[ 'C++', 'Java', 'Python', 'JavaScript' ]
πsplit()
The
split()method splits a string into an array of substrings.The
split()method returns the new array.The
split()method does not change the original string.If (" ") is used as a separator, the string is split between words.
let str = "javascript";
let splitstr = str.split("");
console.log(splitstr);
Console Output:
[
'j', 'a', 'v', 'a',
's', 'c', 'r', 'i',
'p', 't'
]




