JavaScript Array and It's Methods.
All About Array and it's Methods in JavaScript.
Table of contents
- Array:
- Array Methods:
- Add/remove items
- Push and Pop Method:
- Output:
- Shift and Unshift Method:
- Output:
- length, reverse() & sort() Methods:
- Output:
- Slice & Splice Methods:
- Output:
- fill(), join() & concat() Methods:
- Output:
- toString() , Array of() & isArray() Methods:
- Output:
- indexOf() & lastIndexOf Methods:
- Output:
- findIndex() & find() Methods:
- Output:
- includes(), map() , keys() & values() Method:
- Output:
- for-of ,forEach(), every &some() Method:
- Output:
- Array filter(),entries() &constructor Method:
- Output:
- copyWithin(),toLocaleString() Method:
- Output:
- Array flatMap(), reduceRight() & reduce() Method:
- Output:
- Thankyou for reading this blog
- Reference of this Blog Content:
Array:
An array is a special variable, which can hold more than one value If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300?
The solution is an array!
An array can hold many values under a single name, and you can access the values by referring to an index numbers.
//Array in js
let arr = ['rak', 'anis', 'raj', 'sami', 'adil', 'anam'];
console.log(arr);
//Array can be defined like this too!---it's by using Javascript keyword new.
const cars = new Array("Saab", "Volvo", "BMW");
Array Methods:
Arrays provide a lot of methods. To make things easier, in this chapter they are split into groups. In JavaScript, Array
is a built-in global object that allows you to store multiple elements at once.
Array methods are functions built-in to JavaScript that we can apply to our arrays — Each method has a unique function that performs a change or calculation to our array and saves us from writing common functions from scratch.
Add/remove items
These are used to add or delete the array item.
arr.push(...items)
– adds items to the end,arr.pop()
– extracts an item from the end,arr.shift()
– extracts an item from the beginning,arr.unshift(...items)
– adds items to the beginning.
Push and Pop Method:
JavaScript Array pop(): Removes and returns the last array element
JavaScript Array push() :Adds elements to end of array & returns its length
//Array in js
let arr = ['rak', 'anis', 'raj', 'sami', 'adil', 'anam'];
//printing the whole array
console.log(arr);
//push array---it add the value in array at last
arr.push('anas' , 'rahat');
console.log(arr);
// //pop array ----it deletes the last value of array
arr.pop();
console.log(arr);
Output:
//output of printing array.
[ 'rak', 'anis', 'raj', 'sami', 'adil', 'anam' ]
//push array---it add the value in array at last
[
'rak', 'anis',
'raj', 'sami',
'adil', 'anam',
'anas', 'rahat'
]
//pop array ----it deletes the last value of array
[
'rak', 'anis',
'raj', 'sami',
'adil', 'anam',
'anas'
]
Shift and Unshift Method:
JavaScript Array shift() : Removes and returns the first array element
JavaScript Array unshift(): Adds elements to start of array and returns length
//shift in array it delete the first element in array
let Arraynew=['amir','shobi','8', 'sumit', 'simmi', 'jimmy'];
Arraynew.shift();
console.log(Arraynew);
//unshift in array ----add new element at the starting of array
Arraynew.unshift("rakii");
console.log(Arraynew);
Output:
//shift
[ 'shobi', '8', 'sumit', 'simmi', 'jimmy' ]
//unshift
[ 'rakii', 'shobi', '8', 'sumit', 'simmi', 'jimmy' ]
length, reverse() & sort() Methods:
JavaScript Array length : Returns the number of elements in an array
JavaScript Array reverse() : Returns the array in reverse order
JavaScript Array sort() : Sorts the elements of an array in specific order
//Array in js
let arr = ['rak', 'anis', 'raj', 'sami', 'adil', 'anam'];
//printing the whole array
console.log(arr);
//string at index 2
console.log(arr[2]);
//lenght of array
console.log(arr.length);
//reverse array
console.log(arr.reverse());
// sort array
console.log(arr.sort());
Output:
//printing the whole array
[ 'rak', 'anis', 'raj', 'sami', 'adil', 'anam' ]
//string at index 2
raj
//lenght of array
6
//reverse array
[ 'anam', 'adil', 'sami', 'raj', 'anis', 'rak' ]
// sort array
[ 'adil', 'anam', 'anis', 'raj', 'rak', 'sami' ]
Slice & Splice Methods:
JavaScript Array slice(): Returns a shallow copy of a portion of an array
JavaScript Array splice(): Returns an array by changing its elements in place
//Array in js
let arr = ['rak', 'anis', 'raj', 'sami', 'adil', 'anam'];
//slice in array _(start, end)-end index will not shown in output
let newarr= arr.slice(2,4);
console.log(newarr);
//splice __(start, no of index) ---start index and no--how many elements will get delted
let newarr1= arr.splice(3,4);
console.log(newarr1);
console.log(arr);
// start with index1 --change the value of index 1 with 18.
let newarr2= arr.splice(1,1, 18);
console.log(arr);
Output:
//Array in js
[ 'rak', 'anis', 'raj', 'sami', 'adil', 'anam' ]
//slice in array _(start, end)-end index will not shown in output
[ 'raj', 'sami' ]
//splice __(start, no of index) ---start index and no--how many elements will get delted
[ 'sami', 'adil', 'anam' ]
['rak', 'anis', 'raj' ]
// start with index1 --change the value of index 1 with 18.
[ 'rak', 18, 'raj' ]
fill(), join() & concat() Methods:
JavaScript Array fill(): Returns array by filling elements with given value
Javascript Array join() : Concatenates the array elements to a string
JavaScript Array concat(): Returns array by merging given value and/or arrays
//Other methods would be applied in new array;
let arraynew=['amir','shobi','ankit', 'sumit', 'simmi', 'jimmy'];
console.log(arraynew);
//fill in array --value, start index, end index but..end index will be exlusive
arraynew.fill("mahi", 2 , 3);
console.log(arraynew);
//array concat it's add the two or more array in one
arr1new= ['1','2','3','4'];
arr2new=['5','6', '7','8'];
arr3new= arr1new.concat(arr2new);
console.log(arr3new);
//array join-this join the elments of array with the given value
arr4new= arr3new.join(" ")
console.log(arr4new);
Output:
[ 'amir', 'shobi', 'ankit', 'sumit', 'simmi', 'jimmy' ]
//fill in array --value, start index, end index but..end index will be exlusive
[ 'amir', 'shobi', 'mahi', 'sumit', 'simmi', 'jimmy' ]
//array concat it's add the two or more array in one
[
'1', '2', '3',
'4', '5', '6',
'7', '8'
]
//array join-this join the elments of array with the given value
1 2 3 4 5 6 7 8
toString() , Array of() & isArray() Methods:
Javascript Array toString(): Returns the string representation of an array
Javascript Array isArray(): Checks if the given value is a JavaScript Array
JavaScript Array of() Method :Creates a new Array instance from given arguments
Javascript Array.from() : The from()
method creates a new array from any array-like or iterable object.
// toString in array
stringarray = ['mahi',8,'rani',10];
stringarray1= stringarray.toString();
console.log(stringarray);
console.log(stringarray1);
//isArray of array
let numarray=[ 1,8,7,8,6,4]
console.log(Array.isArray(numarray));
//Arrayof Method in array
// creating an array named alphabets with elements A,B,C
let alphabets = Array.of("A", "B", "C");
// display contents of alphabet'
console.log(alphabets);
//Array.from() in array
let newArray = Array.from("abc"); // creating a new array from string
console.log(newArray);
Output:
//array original
[ 'mahi', 8, 'rani', 10 ]
// toString in array
mahi,8,rani,10
//isArray of array
true
//Array.of in array
[ 'A', 'B', 'C' ]
//Array.from in array
[ 'a', 'b', 'c' ] // Output:
indexOf() & lastIndexOf Methods:
JavaScript Array indexOf() : Returns the first index of occurrence of element
JavaScript Array lastIndexOf() : Returns the last index of occurrence of an element
let Arraynew=['amir','shobi','8', 'rakii', 'simmi', 'jimmy'];
console.log(Arraynew);
//indexOf array--specify the value of first-index of elements
let index= Arraynew.indexOf('shobi');
console.log(index);
//lastindexOf of array---give the index of last same elements
let index1= Arraynew.lastIndexOf("rakii");
console.log(index1);
Output:
//array list
[ 'amir', 'shobi', '8', 'rakii', 'simmi', 'jimmy' ]
//indexOf array--specify the value of first-index of elements
1
//lastindexOf of array---give the index of last same elements
3
findIndex() & find() Methods:
JavaScript Array findIndex(): Returns index of element that satisfies condition
JavaScript Array find() : Returns first element that satisfies a condition
let Arraynew=['amir','shobi','8', 'sumit', 'simmi', 'jimmy'];
console.log(Arraynew);
//findIndex of array---return the index of first array elemts
function isEven(elements){
return elements%2==0;
}
findindex= Arraynew.findIndex(isEven);
console.log(findindex);
//find of array----find the element which satisfy the condition
let numarray=[ 1,8,7,8,6,4]
function isEven1(elements){
return elements%2==0;
}
let findarr= numarray.find(isEven1);
console.log('first even no in array' , findarr);
Output:
[ 'amir', 'shobi', '8', 'sumit', 'simmi', 'jimmy' ]
//findIndex of array---return the index of first array element that satisfies the condition
2
//find of array----find the element which satisfy the condition
first even no in array 8
includes(), map() , keys() & values() Method:
JavaScript Array includes() : Checks if a value exists in an array
JavaScript Array map() : Returns array by mapping elements using given function
JavaScript Array keys(): Returns an iterator containing keys of array items
JavaScript Array values(): The values()
method returns a new Array Iterator object that contains the values for each index in the array.
let numarray=[ 1,8,7,8,6,4]
console.log(numarray);
//includes in array-----this checks that this method is include or not.
if(numarray.includes(7)){
console.log('yes');
}
else{
console.log('no');
}
//keys in array
let numarr1= numarray.keys();
for (let key of numarr1){
console.log(key);
}
//values in array
let languages = ["JavaScript", "Java", "C++"];
let iteratorObject = languages.values();
// looping through iterator
for (let value of iteratorObject) {
console.log(value);
}
//map in array
let numarray1=[ 1,64,9,16,25,4]
console.log(numarray1.map(Math.sqrt));
Output:
//output of array
[ 1, 8, 7, 8, 6, 4 ]
//includes in array-----this checks that this method is include or not.
yes
//keys in array
0
1
2
3
4
5
//values in array
JavaScript
Java
C++
//map in array
[ 1, 8, 3, 4, 5, 2 ]
for-of ,forEach(), every &some() Method:
Javascript Array for-of loop() :This is a loop of Array , which makes the work easy.
Javascript Array forEach() : Executes the given function on array elements
Javascript Array some(): Tests if any element passes given test function
Javascript Array every() :The JavaScript Array every() method checks if all the array elements pass the given test function.
//for of in array...
let names= ['mahi' , 'tayyaba', 'falak', 'raki'];
let uppercase= [];
for (const value of names){
uppercase.push(value.toUpperCase());
}
console.log(uppercase);
//for each
function square(num){
console.log(num * num) ;
}
let numarray1=[ 1,64,9,16,25,4]
console.log(numarray1.forEach(square));
//The some() method tests whether any of the array elements pass the given test function.
function isodd(num1){
return num1 % 2==1;
}
console.log(numarray1.some(isodd));
//every in array
function checkAdult(age) {
return age >= 18;
}
const ageArray = [34, 23, 20, 26, 12];
let check = ageArray.every(checkAdult); // false
if (!check) {
console.log("All members must be at least 18 years of age.")
}
// using arrow function
let check1 = ageArray.every(age => age >= 18); // false
console.log(check1);
Output:
//for of in array...
[ 'MAHI', 'TAYYABA', 'FALAK', 'RAKI' ]
//for each
1
4096
81
256
625
16
//The some() method tests whether any of the array elements pass the given test function.
true
//every output
All members must be at least 18 years of age.
false
Array filter(),entries() &constructor Method:
Javascript Array filter():Returns array by filtering elements on given test
Javascript Array entries() :Returns iterator containing key/value pair array
Javascript Array constructor :Returns the constructor function for the array
//filter method in array
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// function to check even numbers
function checkEven(number) {
if (number % 2 == 0)
return true;
else
return false;
}
// create a new array by filter even numbers from the numbers array
let evenNumbers = numbers.filter(checkEven);
console.log(evenNumbers);
//entries method in array
let newaarray= ["raki", "sani", "rashi"]; //array
let iterator= newaarray.entries(); //entries in array
for (let entry of iterator){ //iterating for each item
console.log(entry);
}
//Constructor in array
let array = [1, 2, 3, 4, 5];
let constructor = array.constructor;
console.log(constructor)
Output:
//filter method output
[ 2, 4, 6, 8, 10 ]
//entry method output
[ 0, 'raki' ]
[ 1, 'sani' ]
[ 2, 'rashi' ]
//constructor method output
[Function: Array]
copyWithin(),toLocaleString() Method:
Javascript Array copyWithin() : Copies and overwrites elements within the array
Javascript Array toLocaleString() :The toLocaleString()
method returns a string representing the elements of the array in a particular locale.
JavaScript Array flat():Flattens the nested array to given depth
//copyWithin Method in Array
let newaarray= ["raki", "sani", "rashi", "mahir"]; //array
newaarray.copyWithin(1,3); //copy index 1 with the index 3
console.log(newaarray)
//tolocaleString
let arr=["naitik", 5];
let newa= arr.toLocaleString();
console.log(newa);
// 3 nested arrays
let numbers = [1, 2, [3, 4, [5, 6, [7, 8, [9,56]]]]];
// reducing nesting by flattening the array to depth 2
let flattenArray = numbers.flat(2);
// new flatten array
console.log(flattenArray);
Output:
//output of copyWithin methid
[ 'raki', 'mahir', 'rashi', 'mahir' ]
//output of toLocaleString method
naitik,5
//output of flat method
[ 1, 2, 3, 4, 5, 6, [ 7, 8, [ 9, 56 ] ] ]
Array flatMap(), reduceRight() & reduce() Method:
JavaScript Array flatMap():Returns new array by mapping and flattening array
Javascript Array reduceRight() :Reduces array to single value from right to left
Javascript Array reduce():Reduces array to single value from left to right
//flatmap method
// defining an array
let numbers1 = [1, 2, 3, 4, 5];
// each element of the array is squared and later flattened
const resultingArray = numbers1.flatMap((x) => [x ** 2]);
console.log(resultingArray);
//reduce method
let array1= ["Rakhshanda ", "is ", "a ", "student "];
function reducer(accumulator, currentValue){
return accumulator+currentValue;
}
let result= array1.reduce(reducer);
console.log(result);
//Rightreduce method
let array2= ["me ", "see ", "can ", "you "];
function Rightreduce(accumulator, currentValue){
return accumulator+currentValue;
}
let opp= array2.reduceRight(Rightreduce);
console.log(opp);
Output:
// output of flatmap method
[ 1, 4, 9, 16, 25 ]
// output of reduce method
Rakhshanda is a student
// output of reduceRight method
you can see me