Day 8 : What is an Array? And how many types of an Array Methods in javascript?

Array

An array is a special variable, which can hold more than one value. An array can hold many values under a single name, and you can access the values by referring to an index number.

Syntax:-

const array_name \= [item1, item2, ...];

Example:-

const cars = ["Saab", "Volvo", "BMW"];

const cars = [];

cars[0]= "Saab";

cars[1]= "Volvo";

cars[2]= "BMW";

const cars = new Array("Saab", "Volvo", "BMW");

Array length:-

The length property of an array returns the length of an array (the number of array elements).

Example:-

const fruits = ["Banana", "Orange", "Apple", "Mango"];

let length = fruits.length; // 4

Array Push:-

The easiest way to add a new element to an array is using the push() method. The push() method returns the new array length.

Example:-

const fruits = ["Banana", "Orange", "Apple"];

fruits.push("Lemon"); // Adds a new element (Lemon) to fruits

New element can also be added to an array using the length property: const fruits = ["Banana", "Orange", "Apple"];

fruits[fruits.length] = "Lemon"; // Adds "Lemon" to fruits

Array Pop:-

The pop() method removes the last element from an array. The pop() method returns the value that was "popped out".

Example:-

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.pop(); // Mango

Array Shift:-

The shift() method removes the first array element and "shifts" all other elements to a lower index.

The shift() method returns the value that was "shifted out". Example:-

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.shift(); // Orange,Apple,Mango

Array Unshift:-

The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements.

The unshift() method returns the new array length.

Example:-

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.unshift("Lemon"); // Lemon,Banana,Orange,Apple,Mango

Array Changing Elements:-

Array elements are accessed using their index number.

Example:-

const fruits = ["Banana", "Orange", "Apple", "Mango"];

Fruits[0] = "Kiwi"; // Kiwi,Orange,Apple,Mango

Array Merging(Concatenating):-

The concat() method creates a new array by merging (concatenating) existing arrays.

Example:-

const myGirls = ["Cecilie", "Lone"];

const myBoys = ["Emil", "Tobias", "Linus"];

const myChildren = myGirls.concat(myBoys);

// Cecilie,Lone,Emil,Tobias,Linus

The concat() method can take any number of array arguments. Example:-

const arr1 = ["Cecilie", "Lone"];

const arr2 = ["Emil", "Tobias", "Linus"];

const arr3 = ["Robin", "Morgan"];

const myChildren = arr1.concat(arr2, arr3);

// Cecilie,Lone,Emil,Tobias,Linus,Robin,Morgan

The concat() method can also take strings as arguments.

Example:-

const arr1 = ["Emil", "Tobias", "Linus"];

const myChildren = arr1.concat("Peter");

// Emil,Tobias,Linus,Peter

Array Splice():-

The splice() method adds new items to an array.

Example:-

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.splice(2, 0, "Lemon", "Kiwi");

// Banana,Orange,Lemon,Kiwi,Apple,Mango

The first parameter (2) defines the position where new elements should be added (spliced in). The second parameter (0) defines how many elements should be removed. The rest of the parameters ("Lemon" , "Kiwi") define the new elements to be added.

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.splice(2, 2, "Lemon", "Kiwi");

// Original Array:- Banana,Orange,Apple,Mango

New Array:- Banana,Orange,Lemon,Kiwi

Removed Items:- Apple,Mango

With clever parameter setting, you can use splice() to remove elements without leaving "holes" in the array.

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.splice(0, 1); // Orange,Apple,Mango

The first parameter (0) defines the position where new elements should be added (spliced in). The second parameter (1) defines how many elements should be removed. The rest of the parameters are omitted.No new elements will be added.

Array Slice():-

The slice() method slices out a piece of an array into a new array. The slice() method creates a new array.

The slice() method does not remove any elements from the source array. Example:-

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; const citrus = fruits.slice(1);

// Orange,Lemon,Apple,Mango

The method then selects elements from the start argument, and up to (but not including) the end argument.

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; const citrus = fruits.slice(1, 3);

// Orange,Lemon

Array Sort():-

The sort() method sorts an array alphabetically.

Example:-

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.sort();

// Apple,Banana,Mango,Orange

Numeric Sort:-

default, the sort() function sorts values as strings.

This works well for strings ("Apple" comes before "Banana").

However, if numbers are sorted as strings, "25" is bigger than "100", because "2" is bigger than "1".

Because of this, the sort() method will produce incorrect results when sorting numbers.

You can fix this by providing a compare function.

Example:-

const points = [40, 100, 1, 5, 25, 10];

points.sort(function(a, b){return a - b});

// 1,5,10,25,40,100

Array Reverse():-

The reverse() method reverses the elements in an array. Example:-

const fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort();

fruits.reverse();

// Orange,Mango,Banana,Apple

Array Max():-

The Math.max.apply to find the highest number in an array. Example:-

function myArrayMax(arr) {

return Math.max.apply(null, arr);

}

const points = [40, 100, 1, 5, 25, 10];

myArrayMax(points);

// The highest number is 100.

Array Min():-

The Math.min.apply to find the lowest number in an array. Example:-

function myArrayMin(arr) {

return Math.min.apply(null, arr);

}

const points = [40, 100, 1, -5, 25, 10];

myArrayMin(points);

// The lowest number is -5.

Array forEach():-

The forEach() method calls a function (a callback function) once for each array element.

Example:-

const numbers = [45, 4, 9, 16, 25];

let txt = "";

numbers.forEach(myFunction);

function myFunction(value, index, array) {

txt += value + " ";

}

// 45,4,9,16,25

Array map():-

The map() method creates a new array by performing a function on each array element.

The map() method does not execute the function for array elements without values.

The map() method does not change the original array.

Example:-

const numbers1 = [45, 4, 9, 16, 25];

const numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {

return value * 2;

}

// 90,8,18,32,50.

Array filter():-

The filter() method creates a new array with array elements that pass a test. Example:-

const numbers = [45, 4, 9, 16, 25];

const over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {

return value > 18;

}

// 45,25.

Array reduce():-

The reduce() method runs a function on each array element to produce (reduce it to) a single value.

The reduce() method works from left-to-right in the array. See also reduceRight().

Example:-

const numbers = [45, 4, 9, 16, 25];

const sum = numbers.reduce(myFunction);

function myFunction(value, index, array) {

return total + value;

}

// 99.

Array reduceRight():-

The reduceRight() method runs a function on each array element to produce (reduce it to) a single value.

The reduceRight() works from right-to-left in the array.

Example:-

const numbers = [45, 4, 9, 16, 25];

let sum = numbers.reduceRight(myFunction);

function myFunction(total, value, index, array) {

return total + value;

}

// 99.

Array every():-

The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

Example:-

const numbers = [45, 4, 9, 16, 25];

let allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {

return value > 18;

}

// false.

Array some():-

The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn't modify the array.

Example:-

const numbers = [45, 4, 9, 16, 25];

let someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {

return value > 18;

}

// true.

Array find():-

The find() method returns the first element in the provided array that satisfies the provided testing function.

If no values satisfy the testing function, undefined is returned. Example:-

const numbers = [4, 9, 16, 25, 29];

let first = numbers.find(myFunction);

function myFunction(value, index, array) {

return value > 18;

}

// 25

Array findIndex():-

The findIndex() method returns the index of the first element in an array that satisfies the provided testing function. If no elements satisfy the testing function, -1 is returned.

Example:-

const numbers = [4, 9, 16, 25, 29];

let first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {

return value > 18;

} // 3

Array entries():-

The entries() method returns a new Array Iterator object that contains the key/value pairs for each index in the array.

Example:-

const array1 = ['a', 'b', 'c'];

const iterator1 = array1.entries();

console.log(iterator1.next().value); // [0, "a"]

console.log(iterator1.next().value); // [1, "b"]

Array includes():-

The Array.includes() to arrays. This allows us to check if an element is present in an array (including NaN, unlike indexOf).

The Array.includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.

Example:-

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.includes("Mango"); // is true