JavaScript Arrays

JavaScript arrays are used to store multiple values in a single variable.

Example : var name= [“Irfan”, “Ullah”, “Munna”];

• What is an Array?

An array is a special variable, which can hold more than one value at a time. If you have a list of items (a list of people names, for example), storing the people in single variables could look like this :

var name1 = “Irfan”;

var name2 = “Ullah”;

var name3 = “Munna”

• Creating an Aarray

Using an arrayy literal is the easiest way to create a JavaScript Array.

Syntax : var array_name = [item1, item2, item3, …..];

Common Operations

• Create an Array

Example:

let nums = [1,2,3,4,5];

console.log(nums.length); // 5

• Access an Array item using the index position

Example:

let first = nums[0]; // 1

let last = nums[nums.length — 1]; // 5

• Loop over an Array

nums.forEach(function(item, index, array) {

console.log(item, index);

})

// result: 1 index:0, 2 index: 1

• Add an item to the end of an Array

let newLength = nums.push(6);

// result: 1,2,3,4,5,6

• Remove an item from the end of an Array

let last = nums.pop() // remove 5 from the end

// result: 1,2,3,4

• Remove an item from the beginning of an Array

let first = nums.shift(); // remove 1 from the front

// result: 2,3,4,5

• Add an item to the beginning of an Array

let newLenght = nums.unshift(6); // add to the front

// result: 6,1,2,3,4,5

• Find the index of an item in the Array

nums.push(6) // 1,2,3,4,5,6

let position = nums.indexOf(2); // 1

• Remove an item by index position

let removedItem = nums.splice(position, 1); // this is how to remove an item

Array Methods

• concat() : Joins two or more arrays, and returns a copy of the joined arrays

Example:

var num1= [1,2,3];

var num2= [4,5,6];

var num= hege.num1(num2);

This method does not change the existing arrays, but returns a new array, containing the values of the joined arrays.

• copyWithin() : Copies array elements within the array, to and from specified positions
• entries() : Returns a key/value pair Array Iteration Object
• every() : Checks if every element in an array pass a test

The every() method checks if all elements in an array pass a test (provided as a function).This method executes the function once for each element present in the array:

1. If it finds an array element where the function returns a false value, every() returns false (and does not check the remaining values)
2. If no false occur, every() returns true

• fill() : Fill the elements in an array with a static value
• filter() : Creates a new array with every element in an array that pass a test

The filter() method creates an array filled with all array elements that pass a test (provided as a function).

Note: filter() does not execute the function for array elements without values.

Note: filter() does not change the original array.

• find() : Returns the value of the first element in an array that pass a test

The find() method returns the value of the first element in an array that pass a test (provided as a function).

The find() method executes the function once for each element present in the array:

1. If it finds an array element where the function returns a true value, find() returns the value of that array element (and does not check the remaining values)
2. Otherwise it returns undefined

Note: find() does not execute the function for empty arrays.

Note: find() does not change the original array.

• findIndex() : Returns the index of the first element in an array that pass a test

The findIndex() method returns the index of the first element in an array that pass a test (provided as a function). This method executes the function once for each element present in the array:

1. If it finds an array element where the function returns a true value, findIndex() returns the index of that array element (and does not check the remaining values)
2. Otherwise it returns -1

Note: findIndex() does not execute the function for array elements without values.

Note: findIndex() does not change the original array.

• forEach() : Calls a function for each array element
• includes() : Check if an array contains the specified element
• indexOf() : Search the array for an element and returns its position

Example:

var num = [1,2,3,4,5,6];

var index= num.indexOf(4);

The indexOf() method searches the array for the specified item, and returns its position. The search will start at the specified position, or at the beginning if no start position is specified, and end the search at the end of the array. Returns -1 if the item is not found. If the item is present more than once, the indexOf method returns the position of the first occurence.

Note: The first item has position 0, the second item has position 1, and so on.

• join() : Joins all elements of an array into a string

var num= [1,2,3,4,5];

var nums= num.join(,4,);

The join() method returns the array as a string.The elements will be separated by a specified separator. The default separator is comma (,).

Note: this method will not change the original array.

• lastIndexOf() : Search the array for an element, starting at the end, and returns its position

The lastIndexOf() method searches the array for the specified item, and returns its position.The search will start at the specified position, or at the end if no start position is specified, and end the search at the beginning of the array. Returns -1 if the item is not found.

If the item to search for is present more than once, the lastIndexOf method returns the position of the last occurence.

• map() : Creates a new array with the result of calling a function for each array element

The map() method creates a new array with the results of calling a function for every array element. This method calls the provided function once for each element in an array, in order.

Note: map does not execute the function for array elements without values.

Note: this method does not change the original array.

• pop() : Removes the last element of an array, and returns that element

var nums = [1,2,3,4,5];

nums.pop();

The pop() method removes the last element of an array, and returns that element.

Note: This method changes the length of an array.

• push() : Adds new elements to the end of an array, and returns the new length

var nums = [1,2,3,4,5];

nums.push(6);

The push() method adds new items to the end of an array, and returns the new length.

Note: The new item(s) will be added at the end of the array.

Note: This method changes the length of the array.

• reduce() : Reduce the values of an array to a single value (going lest-to-right)
• reduceRight() : Reduce the values of an array to a single value (going right-to-left)
• reverse() : Reverses the order of the elements in an array

var nums = [1,2,3,4,5];

nums.reverse();

The reverse() method reverses the order of the elements in an array.

Note: this method will change the original array.

• shift() : Removes the first element of an array, and returns that elements

var nums = [1,2,3,4,5];

nums.shift();

The shift() method removes the first item of an array.

Note: This method changes the length of the array.

Note: The return value of the shift method is the removed item.

Note: this method will change the original array.

• slice() : Selects a part of an array, and returns the new array

var nums = [1,2,3,4,5,6];

var number = nums.slice(1,3);

The slice() method returns the selected elements in an array, as a new array object. This method selects the elements starting at the given start argument, and ends at, but does not include, the given end argument.

Note: The original array will not be changed.

• some() : Checks if any of the elements in an array pass a test

The some() method checks if any of the elements in an array pass a test (provided as a function). This method executes the function once for each element present in the array:

1. If it finds an array element where the function returns a true value, some() returns true (and does not check the remaining values)
2. Otherwise it returns false

Note: some() does not execute the function for array elements without values.

Note: some() does not change the original array.

• sort() : Sorts the elements of an array

var nums = [1,2,5,4,3];

nums.sort();

The sort() method sorts the items of an array.

The sort order can be either alphabetic or numeric, and either ascending (up) or descending (down).

By default, the sort() method sorts the values as strings in alphabetical and ascending order. 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 an incorrect result when sorting numbers. You can fix this by providing a “compare function” (See “Parameter Values” below).

Note: This method changes the original array.

• splice() : Adds/Removes elements of an array

var nums = [1,2,3,4,5];

nums.splice(2,0,6,7);

The splice() method adds/removes items to/from an array, and returns the removed item(s).

Note: This method changes the original array.

• toString() : Converts an array to a string, and returns the result
• unshift() : Adds new elements to the beginning of an array, and returns the new length
• valueOf() : Returns the primitive value of an array