JavaScript Array

JavaScript Array

ยท

7 min read

Arrays in JavaScript.

Array is one of the most fundamental block in the structure of JavaScript. If you have been into some programming you know that array is part of every programming language. In some languages it is called list, but it is basically the same thing.

Now, the question arises, what is an array?

In JavaScript, an array is an ordered list that stores values.

Ordered list means, each element of the list is given a unique number know as index. index is similar to roll-number we got in school.

In JavaScript, array has some unique properties:

  • We don't need to specify array size before creating an array. Thus it is dynamically growing.
  • Array can hold the element of any datatype at once, this means it is not compulsory that all the elements should be of a single datatype.
let arr1 = ['JavaScript', 'Java', 3, 5.4, true];

in the above example we can see that, we did not declare the size of the the array arr1 upfront and the elements stored in the array are of different data types.

Creating arrays

In JavaScript there are two ways to create an array.

First method

  • let arr1 = new Array();

here we are creating array arr1 by initializing new object of Array class. arr1 is currently an empty array.

  • let arr1 = new Array(10, 'Jack', true);

we can create array like this if we know the element of array.

Second Method

In JavaScript you will be creating arrays mostly by this method.

let arr1 = [10, 'Jack', true, 10.50];

Output

[ 10, 'Jack', true, 10.5 ]

this will be the output of the above array.

Array is created using [ ] brackets

We can also create an empty array by this method, by not passing anything inside the array

let emptyArray = [];

This is the most convenient way to create array in JavaScript.


Accessing elements of the array

As we know, an index number is given to each element, starting with 0

objects-tenElementArray.gif

syntax: arrayName[index]

Now, suppose we have an array and we want to access the first element of the array, we can do that by passing the index of the required element.

let arr1 = [10, 'Jack', true, 10.50];
console.log(arr1[0]) // returns first element 10

Output will be 10

in the same way

console.log(arr1[1]) --> Jack

console.log(arr1[2]) --> true

console.log(arr1[3]) --> 10.50


Length of array

To find the length of the array i.e how many elements are stored inside the array.

syntax: arr1.length

let arr1 = [10, 'Jack', true, 10.50];

console.log(arr1.length)  // returns 4

Find the index of element

To find the index of element we have .indexOf() method

syntax: arr1.indexOf(element)

let arr1 = [10, 'Jack', true, 10.50];

console.log(arr1.indexOf('Jack'))  // returns 1 (index of 'Jack')

Modifying the array

we can modify the array by adding element, removing the elements, replacing the elements and much more. So lets start with it.

1) Sorting the array

To sort the array in ascending order we have .sort() method.

To sort the array in reverse order we have .reverse() method.

.sort() and .reverse() method modifies the original array

syntax: arr1.sort() arr1.reverse()

let arr1 = [10, 'Jack', true, 10.50];

arr1.sort();
console.log(arr1); // [ 10, 10.5, 'Jack', true ]

arr1.reverse();
console.log(arr1); // [ 10.5, true, 'Jack', 10 ]

2) Concating the array

To join two or more we can use .concat() method

.concat returns a new array with all the elements from the concatenated arrays

syntax: array1.concat(array2, array3, ...)

let arr1 = [10, 'Jack', true, 10.50];
let arr2 = [20, 'Jill', false, 20.50];

let newArray = arr1.concat(arr2);

console.log(newArray); [10, 'Jack', true, 10.5, 20, 'Jill', false, 20.5]

3) Join array elements

.join() joins the array elements and combine them into a string, and it returns a new array and does not modifies the original array

syntax: .join(separator)

let arr1 = [10, 20, 30, 40];

let newArray = arr1.join(', ');

console.log(newArray);    // 10, 20, 30, 40

4) Replacing array elements

We can replace element of an array just by assigning a new value that we want to the index.

arr1[0] = 'first element';

Output

let arr1 = [10, 'Jack', true, 10.50];

arr1[0] = 'first element';
console.log(arr1)    // output [ 'first element', 'Jack', true, 10.5 ]

as we can see the first element 10 is replaced by first element.

5) Adding elements in array

Adding elements at the end of the array

to add the element at the end we use .push() method

arrayName.push(element)

let arr1 = [10, 'Jack', true, 10.50];

arr1.push('added element');

console.log(arr1); // [ 10, 'Jack', true, 10.5, 'added element' ]

as we can see added element is added at the end of the array.

Adding elements at the beginning of the array

to add the element at the beginning of the array we use unshift() method

arrayName.unshift('added element)

let arr1 = [10, 'Jack', true, 10.50];

arr1.unshift('added element');

console.log(arr1);  // [ 'added element', 10, 'Jack', true, 10.5 ]

as we can see added element is added at the beginning of the array.

6) Removing elements from the array

Removing elements from the end of the array

to add the element at the end we use .pop() method

arrayName.pop()

let arr1 = [10, 'Jack', true, 10.50];

arr1.pop();

console.log(arr1);  // [ 10, 'Jack', true ]

as we can see .pop() removed 10.50 from the array.

Removing elements from the beginning of the array

to add the element at the end we use .shift() method

arrayName.shift()

let arr1 = [10, 'Jack', true, 10.50];

arr1.shift();

console.log(arr1);  // [ 'Jack', true, 10.5 ]

as we can see .shift() removed 10 from the array.

7) Manipulating part of array

By this I mean we can get a portion of array and use it for our need

1) slice() method

the .slice() gives a copy of array with the elements that we mentioned in the .slice method by passing the index

arr1.slice(starting index, the index of element till where we want the element + 1)

arr1.slice(1, 3)

here first index (1) is inclusive but second index (3) is exclusive

let arr1 = [10, "Jack", true, 10.5];

let arr2 = arr1.slice(1, 3);

console.log(arr1);  // [ 10, 'Jack', true, 10.5 ]
console.log(arr2);  // [ 'Jack', true ]

arr1 is still the same after running the slice() method on it thus we can say that slice() does not modifies the original array and creates a copy of array.

Jack is at index 1 so it was included but 10.50 that is at index 3 is not included and element at one index before is included.

2) splice() method

the .splice() manipulates the original array by removing or replacing existing elements and adding new elements on which this method is applied and return the required array.

arr1.splice(starting index, deleteCount, [replacing element])

the replacing elements replace the number that is mentioned in the deleteCount

suppose deleteCount = 2 and replacing element is 'hello' then 'hello' will replace two elements and instead fo those two elements only one 'hello' will be there

let arr1 = [10, "Jack", true, 10.5];
console.log(arr1); // [ 10, 'Jack', true, 10.5 ]

arr1.splice(1, 2, 'hello');
console.log(arr1);  // [ 10, 'hello', 10.5 ]

Looping through the array

There are several methods to loop through the array. Following are some of those

for (let x = 0; x < arr1.length; x++) {
  const element = arr1[x];
  console.log("For Loop - ", element);
}

// Output
For Loop -  10
For Loop -  20
For Loop -  30
For Loop -  40

ForOf Loop

for (item of arr1) {
  console.log("For of loop - ", item);
}

// Output
ForOf loop -  10
ForOf loop -  20
ForOf loop -  30
ForOf loop -  40

This was an article on Arrays in JavaScript that covers most of the array methods that will come handy in everyday programming. Thank you for reading ๐Ÿ˜ƒ.

ย