Arrays in JavaScript : An in-depth Guide

Arrays in JavaScript : An in-depth Guide

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 its default is 0.
end means End Position, and its default is the last 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'
]
Β