Javascript Arrays In Brief.
JavaScript Arrays and how to use them in your coding with Array Methods.
Array
An array is a single variable that is used to store different elements. Arrays are a powerful and comprehensive tool of Javascript.
Example
let num = 10;
Here, num
is a variable and 10
is a value. Now, we want to store multiple values in a variable so, we do this with the help of Arrays.
Let's Learn
Declaring an Array
let lco = [];
let lco = new Array();
An array in JavaScript can hold different elements We can store Numbers, Strings and Boolean in a single array.
let Ineuron = ["Javascript", "BootCamp", 500, true];
Indexing
let num = [10, 20, 30];
10 = 0
20 = 1
30 = 2
Javascript Array Methods
slice()
splice()
isArray()
indexOf()
lastIndexOf()
sort()
reverse()
push()
pop()
shift()
unshift()
join()
find()
forEach()
tostring()
valueOf()
fill()
filter()
reduce()
map()
indexOf()
The indexOf() method returns the first index of occurance of an array element, or -1 if it is not found. Example
let languages = ["Java", "JS", "Python", "JS"];
// get the index of the first occurrence of "JavaScript"
let index = languages.indexOf("JS");
console.log(index);
Output
1
slice()
The slice() method returns a shallow copy of a portion of an array into a new array object.
syntax
Here arr is Array
arr.slice(start, end)
Example
let developer =["JavaScript", "tailwind", "html", "css", "react"];
// slicing the array (from start to end)
let new_arr = developer.slice();
console.log(new_arr);
// slicing from the third element
let new_arr1 = developer.slice(2);
console.log(new_arr1);
// slicing from the second element to fourth element
let new_arr2 = developer.slice(1, 4);
console.log(new_arr2);
Output
[ 'JavaScript', 'tailwind', 'html', 'css', 'react' ]
[ 'html', 'css', 'react' ]
[ 'tailwind', 'html', 'css' ]
splice()
The splice() method returns an array by changing (adding/removing) its elements in place. Splice is a very useful method as it can remove and add elements from a particular location.
syntax
arr.splice(start, deleteCount, item1, ..., itemN)
Example
// Removing an adding element at a particular location
// in an array
// Declaring and initializing arrays
var number_arr = [ 20, 30, 40, 50, 60 ];
var string_arr = [ "amit", "sumit", "anil", "prateek" ];
// splice()
// deletes 3 elements starting from 1
// number array contains [20, 60]
number_arr.splice(1, 3);
// doesn't delete but inserts 3, 4, 5
// at starting location 1
number_arr.splice(2, 0, 4, 5, 6);
// deletes two elements starting from index 1
// and add three elements.
// It contains ["amit", "lco", "student 1", "student 2", "prateek"];
string_arr.splice(1, 2, "lco", "student 1", "student 2");
// Printing both the array after performing splice operation
console.log("After splice op " + number_arr);
console.log("After splice op " + string_arr);
Output
After splice op 20,60,4,5,6
After splice op amit,lco,student 1,student 2,prateek
pop()
The pop() method removes the last element from an array and returns that element.
syntax
arr.pop()
Example
let brands = ["adidas", "puma", "nike", "shivnaresh"];
// remove the last element
let removedBrands = brands.pop();
console.log(brands)
console.log(removedBrands); // shivnaresh
Output
[ 'adidas', 'puma', 'nike' ]
shivnaresh
sort()
The sort() method sorts the items of an array in a specific order (ascending or descending).
Syntax
arr.sort(compareFunction)
Example
// sorting an array of strings
var names = ["krishna", "anurag", "hitesh", "vikas", "pawan"];
// returns the sorted array
console.log(names.sort());
// modifies the array in place
console.log(names);
var listItems = [74, 50, 6, 7, 91];
listItems.sort();
// Number is converted to string and sorted
console.log(listItems);
[ 'anurag', 'hitesh', 'krishna', 'pawan', 'vikas' ]
[ 'anurag', 'hitesh', 'krishna', 'pawan', 'vikas' ]
[ 50, 6, 7, 74, 91 ]
Reverse()
The reverse() method returns the array in reverse order. It reverse the array by given order according to the compare() function. If the method is omitted then the array is sorted in ascending order.
syntax
arr.reverse()
Example
let courses = ["JavaScript", "Python", "C++", "Java", "kotlin"];
// reversing the order of courses array
let reversedArray = courses.reverse();
console.log("Reversed Array: ", reversedArray);
// modifies the original array
console.log("Original Array: ", courses);
Output
Reversed Array: [ 'kotlin', 'Java', 'C++', 'Python', 'JavaScript' ]
Original Array: [ 'kotlin', 'Java', 'C++', 'Python', 'JavaScript' ]
push()
The push() method adds zero or more elements to the end of the array.
syntax
arr.push(element1, element2, ..., elementN)
Example
let banks = ["state bank of india", "punjab national bank", "ICICI"];
// add "hdfc" to the array
banks.push("hdfc");
console.log(banks);
Output
[ 'state bank of india', 'punjab national bank', 'ICICI', 'hdfc' ]
Shift()
The shift() method removes the first element from an array and returns that element.
syntax
arr.shift()
Example
let banks = ["state bank of india", "punjab national bank", "ICICI"];
// remove the first element of array
let first = banks.shift();
console.log(first)
console.log(banks);
Output
state bank of india
[ 'punjab national bank', 'ICICI' ]
unshift()
Add in first in Array act just opposite to the shift()
join()
The join() method returns a new string by concatenating all of the elements in an array, separated by a specified separator.
syntax
arr.join(separator)
Example
let message = ["Ineuron", "is", "working" , "great" , "in" , "affordable" , "education"];
// join all elements of array using space
let joinedMessage = message.join(" ");
console.log(joinedMessage);
Output
Ineuron is working great in affordable education
isArray()
The isArray() method checks whether the passed argument is an array or not. Example
let numbers = [1, 2, 3, 4];
// checking whether numbers is an array or not
console.log(Array.isArray(numbers));
Output
true
map()
The map() method creates a new array with the results of calling a function for every array element.
syntax
arr.map(callback(currentValue), thisArg)
Example
let numbers = [2, 4, 6, 8, 10];
// function to return the square of a number
function square(number) {
return number * number;
}
// apply square() function to each item of the numbers list
let square_numbers = numbers.map(square);
console.log(square_numbers);
Output
[ 4, 16, 36, 64, 100 ]
find()
The find() method returns the value of the first array element that satisfies the provided test function. Example
let num = [10 , 23 , 19 , 20]
If we want to find a number more than 18 and it return 23 , 19 , 20
so, here find() is doing what it catches only 1st value in this23
Example
let numbers = [1, 3, 4, 9, 8];
// function to check even number
function isEven(element) {
return element % 2 == 0;
}
// get the first even number
let evenNumber = numbers.find(isEven);
console.log(evenNumber);
Output
4
Thank you........