Javascript Arrays In Brief.

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, numis 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

200.gif

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

200w.gif

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

well-done-despicable-me.gif Thank you........