JavaScript Array and It’s Methods Explained in Short

In this blog, I’ve tried to clear the javascript array fundamental in a very short way with the help of different examples, Let’s dive into that. I recommend you to hand on practice along with this tutorial.

Javascript Array

In JavaScript, Array is basically collection of data items of any data type represented with square brackets [ ] and each data items are separated by comma( , )

let fruits = ['apple', 'mango' ,'banana'] //data items of same type
let mixed = ['car', 2021, true] // data items of different types

The position of each element is called Index and it starts from [0] and increase by 1.
From the example above : we can get the value of selected index.

console.log(fruits[0]) // returns apple
console.log(fruits[1]) // returns mango

Different Ways to Create Array

In javascript there are different ways to create an Array but Normally we create an array using square brackets and assigning it to a variable.

1. using square brackets and assigning it to a variable

var car = ['Suzuki', 'Hyundai', 'Toyota', 'Volvo']

2. using array constructor

var car = new Array('Suzuki', 'Hyundai', 'Toyota', 'Volvo')

Note: Avoid to put single element using new Array otherwise it will throw error empty element

3. using Array.of function

var car = Array.of('Suzuki', 'Hyundai', 'Toyota', 'Volvo')

4. create an array then provide elements

var car = []
car[0] = 'Suzuki';
car[1] = 'Hyundai';
car[3] = 'Toyota';
car[4] = 'Volvo';

Accessing Elements from Array

You can retrieve the data elements using index[ ] method and there are some other method which I’ve described further.

const phone =['motorola', 'samsung', 'apple'];
console.log(phone[1]);
// output => samsung

Array Methods in JavaScript

Now you will know different array methods which were introduced after ES5 release, This methods help you to write your code in a concise way.

1. push()

You can use push() method to insert item into array. push() inserts elements at the end of array elements

const phone =['motorola', 'samsung', 'apple'];
phone.push('pixel');
console.log(phone) // ['motorola', 'samsung', 'apple', 'pixel']

2. unshift()

You can also use unshift() method to insert item into array. unshift() inserts elements at the start of array elements

const phone =['motorola', 'samsung', 'apple'];
phone.unshift('pixel');
console.log(phone) // ['pixel', 'motorola', 'samsung', 'apple']

3. pop()

You can use pop() method to remove an item from array. After each call it removes single element from an array. pop() remove an element from last of the array index

const phone =['motorola', 'samsung', 'apple'];
phone.pop();
console.log(phone) // ['motorola', 'samsung']

4. shift()

You can use shift() method also to remove an item from array. After each call it removes single element from an array. shift() remove an element from beginning of the array index

const phone =['motorola', 'samsung', 'apple'];
phone.shift();
console.log(phone) // ['samsung', 'apple']

5. map()

map() method iterates on existing array and create a new array using Callback function.

//this code return square of each element
let num = [1,2,4,6,8];
let result = num.map((e)=> e**2);
console.log(result); //[1, 4, 16, 36, 64]

6. filter()

filter() method creates a new array with the elements that meets the given condition into existing array.

//returns even element numbers
let num = [1,2,4,7,8];
let result = num.filter((e)=> (e%2)==0);
console.log(result);//[2, 4, 8]

7. find()

It is very similar to find() method but it return only single element which is found first and when nothing is found it returns undefined

//returns even element numbers
let num = [1,2,4,7,8];
let result = num.find((e)=> e == 2;
console.log(result);//[2]

4. fill()

fill() method fill/replace the original array element with the specified static value for the defined range.

let num = ['python', 'php', 'java', 'asp']
console.log(num.fill('javascript'))
//output=> ['python','javascript','javascript','javascript']
console.log(num.fill('javascript', 1,3))//from index 1 to 3
//output=> ['python','javascript','javascript','asp' ]

8. some()

some() method is used to check any array if one or more element satisfies the given condition. If satisfied then it returns true otherwise false

let num = ['python','php','java','python']
let result = num.some((e) => e === 'python');
console.log(result) // true

9. every()

every() method checks the original array, if all elements satisfy the given condition then it returns true otherwise false

let num = [2,5,6,8,10]
let result = num.every((e) => (e % 2) == 0);
console.log(result) // false

10. join()

join() method is used to join all the elements of array into string. Strings can be separated by specified character and default is comma ( , )

let num = [2,5,6,8,10]
let result = num.join(' ☕ ');
console.log(result) 
//output=> 2 ☕ 5 ☕ 6 ☕ 8 ☕ 10

let num = [2,5,6,8,10]
let result = num.join();
console.log(result)
//output => 2,5,6,8,10

11. concat()

concat() method merge two or more array into a new copy of original array

let num1 = [2,5,6,8,10]
let num2 = [12,16,22,34]
let result = num1.concat(num2)
console.log(result) //[2, 5, 6, 8, 10, 12, 16, 22, 34]

Last Thought ! Throughout the tutorial I have tried to explain all the concept of the javascript array in simple words, You should do hand on practice for better understanding. And thank you for reading the article !

let num1 = [2,5,6,8,10]
let num2 = [12,16,22,34]
let result = num1.concat(num2)
console.log(result) //[2, 5, 6, 8, 10, 12, 16, 22, 34]

INTERESTED IN OS INTERVIEW QUESTIONS