Construct Array
Javascript array can be constructed in 3 way
- Array literal
- Creating an instance of Array directly (using the new keyword)
- Using an Array constructor (using the new keyword)
Let's take a look at all 3 ways to construct an array
Array literal
const arr = ['One' , 'Two' , 'Three' , 'Four']
// output
// ['One' , 'Two' , 'Three' , 'Four']
Creating an instance of Array
const arr = new Array()
arr[0] = 'One'
arr[1] = 'Two'
arr[2] = 'Three'
arr[3] = 'Four'
//output
// ['One' , 'Two' , 'Three' , 'Four']
Using Array Constructor
const arr = new Array('One' , 'Two' , 'Three' , 'Four')
//output
// ['One' , 'Two' , 'Three' , 'Four']
Search in the current array
Lets a look at some of the most used array objects for searching the element in the array
find()
Syntex :
array.find(value , index , array )
Array method find returns the first element that satisfies the provided function condition
example :
const arr = [ 4 ,6 , 7 , 8 , 21 ]
arr.find(element => element % 7 === 0 );
// output
// 7
filter()
Syntex :
array.filter(value , index , array )
Array method filter returns a shallow copy of an element that pass the test implemented by the provided function.
example :
const arr = [ 4 ,6 , 7 , 8 , 21 ]
arr.filter(element => element % 7 === 0 );
// output
// [7 , 21]
indexOf()
Syntex :
array.indexOf()
The array method index returns the index of the first element that matches the element inside the array if the element is not present then it will return -1.
example :
const arr = [ 4 ,6 , 7 , 8 , 7 ]
arr.indexOf(7);
// output
// [2]
const arr = [ 4 ,6 , 7 , 8 , 7 ]
// start from index 3
arr.indexOf(7 , 3);
// output
// [4]
Some()
Syntex :
array.some(value , index , arr)
Array method some test at list one element in the array pass the function condition and return true, if the condition does not matches then it will return false.
example :
const arr = [ 4 ,6 , 7 , 8 , 7 ]
arr.some( e => e ===7 );
// output
// true
const arr = [ 4 ,6 , 7 , 8 , 7 ]
arr.some( e => e ===3);
// output
// false
every
Syntex :
array.every()
The array method checks that every element in the array pass the test implemented by the provided function.
example :
const arr = [ 4 ,6 , 7 , 8 , 7 ]
arr.every( e => e %2 === 0 );
// output
// false
const arr = [ 4 ,6 , 2 , 8 , 10 ]
arr.every( e => e %2 === 0 );
// output
// true
Edit Current Array
Let's see how to manipulate the javascript array
join()
Syntex : array.join()
Array method join(), contact all the elements of an array with a specific string or separated by "," and returns the string, If the array contains only one element then it will return the element without any separation, Let's see an example
const arr= ['one' , 'Two' , 'Three' ];
arr.join()
//output
// 'one,Two,Three'
arr.join(" ")
//output
// 'one two three'
Concat and Spread Operator
Concat :
array method Concat() merge the two or more arrays into one array it will return new array
Syntex:
array.concat(value1)
array.concat(value2,...valueN)
const arr1 = ['one' , 'two' , 'three' ]
const arr2 = ['four' , 'five' , 'six']
const arr3 = ['seven' , 'eight' , 'nine']
const arr4 = arr1.concat(arr2,arr3)
// output
// ['one', 'two', 'three', 'four', 'five', 'six', 'seven' , 'eight' , 'nine' ]
Spread operator
javascript spread operate allows us to quickly copy all elements of two or more array by spreading using (...) and inserting into a new array,We can use the spread operator with objects too.
Syntex:
[...array]
{ ...obj , ...obj}
const arr1 = ['one' , 'two' , 'three' ]
const arr2 = ['four' , 'five' , 'six']
const arr3 = ['seven' , 'eight' , 'nine']
const arr4 = [...arr1, ...arr2 , ...arr3 ]
// output
// ['one', 'two', 'three', 'four', 'five', 'six', 'seven' , 'eight' , 'nine' ]
push()
Syntex:
array.push()
Array method push(), insert one or more elements at the end of the original array and returns the new length of an array
const arr = [`one` , `two` , 'three' ]
const add = arr.push('four')
console.log(add)
console.log(arr)
// 4
// [ 'one' , 'two' ,'three','four']
pop()
Syntex:
array.pop()
Array method pop removes the last element of an array and returns the removed element
const arr = [`one` , `two` , 'three' ]
const add = arr.push()
console.log(add)
console.log(arr)
// 'three'
// [ 'one' , 'two']
shift()
syntax:
array.shift()
Array method shift removes the first element of an array and returns the removed element
const arr = [`one` , `two` , 'three' ]
const add = arr.shift()
console.log(arr)
console.log(add)
// [ `two` , 'three' ]
// `one`
unshift()
syntax:
array.unshift()
The array method unshift inserts one or more elements at beginning of an array and returns the new length of an array
const arr = ['one' , 'two' , 'three' ]
const add = arr.shift('four' , 'five')
console.log(arr)
console.log(add)
// [ 'four' , 'five','one' ,'two' , 'three' ]
// 5
splice
syntex:
splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)
Array method splice() change the elements of an array by removing,adding, and replacing elements of an array Let's seen the example
: Add 2 in array [ 1, 3, 4, 5 ,6 ] at index 1
const arr = [ 1, 3, 4, 5 ,6 ]
arr.splice(1,0,2)
console.log(arr)
// remove 0 element before index 1 and add 2
//output
//[1,2,3,4,5,6]
Remove 3 from array [1,2,3,4,5,6]
const arr= [1,2,3,4,5,6]
arr.splice( 2,1)
console.log(arr)
//output
//[1,2,4,5,6]
replace 5 by '5' at position -2
const arr= [1,2,3,4,5,6]
arr.splice(-2,1,'5')
console.log(arr)
//output
//[1,2,3,4,'5',6]
slice
syntex:
slice()
slice(start)
slice(start, end)
array method splice() remove an element from start(start removing element from index N) to end(remove till element before index N) where the end is not included. return new array of the original array remains same
let's take an example
Select only 1,2 form array [1,2,3,4,5 ]
const arr = [1,2,3,4,5]
splice(2)
//output
// [1,2]
I’ve covered the most important topics of Arrays in JavaScript along with mostly used methods in it. If you want to read more about the methods follow the MDN documentation.