JavaScript Array Functions Flashcards
study JS array functions
Array.map()
The map() method is one of the most commonly used functions in JavaScript, particularly when working with arrays. It allows you to create a new array by applying a function to each element in an existing array. In this way, you can easily transform an array’s values in a concise and readable way.
The basic syntax for using the map() method is as follows:
array.map(function(currentValue, index, array) {
// Function body
}, thisArg);
The first argument is a callback function that will be called for each element in the array. The callback function can take up to three arguments:
currentValue: The value of the current element being processed in the array.index: The index of the current element being processed in the array.array: The array that map() was called upon.
The **second argument **(thisArg) is optional and sets the value of this inside the callback function.
// Code const list = [1, 2, 3, 4]; list.map((el) => el * 2); // [2, 4, 6, 8]
Array.filter()
The array.filter() method allows you to create a new array by filtering out elements that don’t meet a specific condition. The filter() method does not modify the original array and returns a new array with the filtered elements.
The syntax for using the filter() method is as follows:
array.filter(callback(element[, index[, array]])[, thisArg])
Let’s break down the different parts of this syntax:
array: The array that you want to filtercallback: A function that is called for each element in the array, taking in three arguments:
1. element: The current element being processed in the array
2. index (optional): The index of the current element being processed
3. array (optional): The array that filter() was called uponthisArg (optional): An object that specifies the value of this within the callback function
The callback() function should return a Boolean value. If it returns true, the element will be included in the new filtered array. If it returns false, the element will be excluded.
// Code const list = [1, 2, 3, 4]; list.filter((el) => el % 2 === 0); // [2, 4]
Array.reduce()
Reduce the array to a single value. The value returned by the function is stored in an *accumulator *(result/total).
~~~
const list = [1, 2, 3, 4, 5];
list.reduce((total, item) => total + item, 0); // 15
~~~
Array.reduceRight()
Array.reduceRight() is a built-in function in JavaScript that is used to apply a function to each element of an array from right to left, and reduce the array to a single value. It is similar to Array.reduce(), but it processes the elements of the array from right to left instead of from left to right.
The syntax for using Array.reduceRight() is:
array.reduceRight(callback[, initialValue])
The callback function takes four arguments:
-
accumulator- the accumulated value, which is either the initial value passed toArray.reduceRight()or the previous value returned by the callback function. -
currentValue- the value of the current element being processed. -
currentIndex- the index of the current element being processed.
array - the original array thatreduceRight()was called on. - The
initialValueargument is optional, and if it is provided, it is used as the initial value for the accumulator. If it is not provided, the last element of the array is used as the initial value for the accumulator, *and *the reduction starts from the second-to-last element.
// Code const list = [1, 2, 3, 4, 5]; list.reduceRight((total, item) => total + item, 0); // 15
Array.fill()
Array.fill() is a method in JavaScript that allows you to** fill all the elements of an array with a static value**. This method is particularly useful when you need to create an array with a specific size and initialize all its elements with the same value.
~~~
// Code
const list = [1, 2, 3, 4, 5];
list.fill(0); // [0, 0, 0, 0, 0]
const arr = new Array(5); // Creates an empty array of length 5
arr.fill(0); // Fills the array with zeros
console.log(arr); // Output: [0, 0, 0, 0, 0]
const arr2 = [1, 2, 3, 4]
arr2.fill(‘x’, 1, 3)
console.log(arr2) // Output : [ 1, “x”, “x”, 4 ]
~~~
Array.find()
The arr.find() method in JavaScript returns the value of the first element in an array that satisfies a provided testing function. It is similar to the arr.filter() method, but instead of returning an array of all elements that satisfy the condition,** it returns only the first element that satisfies the condition**. If no element satisfies the condition, undefined is returned.
The syntax for find() is as follows:
find(function (element, index, array) { /* … */ }, thisArg)
The callback function takes up to three arguments:
1. element: The current element being processed in the array.
2. index: The index of the current element being processed in the array.
3. array: The array that the find() method was called upon. The callback function should return a truthy value if the current element satisfies the condition.
thisArg (optional): An object to which this keyword can refer in the callback function. If it is not provided, this keyword refers to the global object.
// Code const list = [1, 2, 3, 4, 5]; list.find((el) => el === 3); // 3 list.find((el) => el === 6); // undefined
Array.indexOf()
Array.indexOf is a built-in JavaScript method that allows you to find the index of a specified element in an array. The method returns the index of the first occurrence of the specified element in the array,or -1 if the element is not found.
The syntax for using Array.indexOf is as follows:
array.indexOf(searchElement) array.indexOf(searchElement, fromIndex)
The first syntax searches the entire array for the specified element and returns the **index of the first occurrence. **
The second syntax allows you to start the search from a specific index, specified by the fromIndex parameter.
// Code const list = [1, 2, 3, 4, 5]; list.indexOf(3); // 2 list.indexOf(6); // -1
Array.lastIndexOf()
Returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.
// Code const list = [1, 2, 3, 4, 5]; list.lastIndexOf(3); // 2 list.lastIndexOf(3, 1); // -1
Array.findIndex()
The Array.findIndex Instead of returning a new array with all elements that pass a test, Array.findIndex returns the index of the first element in the array that passes the test. If no elements pass the test, Array.findIndex returns -1.
The syntax for find() is as follows:
find(function (element, index, array) { /* … */ }, thisArg)
The callback function takes up to three arguments:
1. element: The current element being processed in the array.
2. index (optional): The index of the current element being processed in the array.
3. array (optional): The array findIndex was called upon.
The callback function should return true if the current element satisfies the test, and false otherwise.
Optionally, you can provide a thisArg parameter, which will be used as the this value inside the callback function.
const numbers = [2, 4, 6, 8, 10]; const firstEvenIndex = numbers.findIndex(num => num % 2 === 0); console.log(firstEvenIndex); // Output: 0
// Code const array = [5, 12, 8, 130, 44]; array.findIndex((element) => element > 13);
Array.includes()
Array.includes() is a built-in JavaScript method that returns a **boolean **value indicating whether an array includes a certain element.
// Code
const list = [1, 2, 3, 4, 5];
list.includes(3); // true
list.includes(6); // false
const arr = ["apple", "banana", "orange"];
console.log(arr.includes("banana")); // Output: true
console.log(arr.includes("BANANA")); // Output: false
console.log(arr.includes("grape")); // Output: false
Array.pop()
Removes the last element from an array and returns that element.
// Code const list = [1, 2, 3, 4, 5]; list.pop(); // 5 list; // [1, 2, 3, 4]
Array.push()
Appends new elements to the** end** of an array, and returns the new length.
~~~
// Code
const list = [1, 2, 3, 4, 5];
list.push(6); // 6
list; // [1, 2, 3, 4, 5, 6]
~~~
Array.shift()
The shift() method removes the first element from an array and returns that element.
This method modifies the original array.
// Code const list = [1, 2, 3, 4, 5]; list.shift(); // 1 list; // [2, 3, 4, 5] const myArray = [1, 2, 3, 4]; const firstElement = myArray.shift(); console.log(myArray); // prints [2, 3, 4] console.log(firstElement); // prints 1
Array.unshift()
The unshift() method adds one or more elements to the beginning of an array and** returns the new length** of the array.
This method modifies the original array.
// Code const list = [1, 2, 3, 4, 5]; list.unshift(0); // 6 list; // [0, 1, 2, 3, 4, 5] const myArray = [1, 2, 3, 4]; myArray.unshift(0); console.log(myArray); // prints [0, 1, 2, 3, 4]
Array.splice()
The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
This method modifies the original array
~~~
// Code
const list = [1, 2, 3, 4, 5];
list.splice(1, 2); // [2, 3]
list; // [1, 4, 5]
const myArray = [1, 2, 3, 4];
myArray.splice(2, 1, “a”, “b”);
console.log(myArray); // prints [1, 2, “a”, “b”, 4]
~~~
Array.slice()
Returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included).
The original array will not be modified.
// Code const list = [1, 2, 3, 4, 5]; list.slice(1, 3); // [2, 3] list; // [1, 2, 3, 4, 5] const myArray = [1, 2, 3, 4]; const newArray = myArray.slice(1, 3); console.log(newArray); // prints [2, 3] console.log(myArray); // prints [1, 2, 3, 4]
Array.join()
Array.join() is a method that can be used to concatenate all elements of an array into a single string, separated by a specified separator.
This method does not change the original array, but rather returns a new string that is the result of joining the elements of the array.
The basic syntax of Array.join() is as follows:
array.join(separator)
Here, separator is the character that will be used to separate the elements of the array. If no separator is specified, the default separator is a comma (,).
// Code
const list = [1, 2, 3, 4, 5];
list.join(', '); // "1, 2, 3, 4, 5"
Array.reverse()
Reverses the order of the elements in an array.
~~~
// Code
const list = [1, 2, 3, 4, 5];
list.reverse(); // [5, 4, 3, 2, 1]
list; // [5, 4, 3, 2, 1]
~~~
Array.sort()
Sorts the elements of an array** in place** and** returns the array**.
The default sort order is according to string Unicode code points.
// This make more sense 🤔 const array = ['D', 'B', 'A', 'C']; array.sort(); // 😀 ['A', 'B', 'C', 'D'] // OR const array = [4, 1, 3, 2, 10]; array.sort(); // 😧 [1, 10, 2, 3, 4] array.sort((a, b) => a - b); // 😀 [1, 2, 3, 4, 10]
Array.some()
Returns true if at least one element in the array passes the test implemented by the provided function.
~~~
// Code
const list = [1, 2, 3, 4, 5];
list.some((el) => el === 3); // true
list.some((el) => el === 6); // false
~~~
Array.every()
a1.every(fn)
array.every is a built-in JavaScript method that checks if all elements in an array pass a certain condition, returning a boolean value of true or false. It takes in a callback function that returns a boolean value for each element in the array.
If all of these values are true, then array.every returns true. If at least one value is false, then it returns false.
// Code const list = [1, 2, 3, 4, 5]; list.every((el) => el === 3); // false const list = [2, 4, 6, 8, 10]; list.every((el) => el%2 === 0); // true const numbers = [2, 4, 6, 8]; const areAllEven = numbers.every(num => num % 2 === 0); console.log(areAllEven); // true
Array.from()
**Creates ** a new array from an array-like or iterable object.
NEEDS: examples
Array.of()
Creates a new array with a variable number of arguments, regardless of number or type of the arguments.
// Code
const list = Array.of(1, 2, 3, 4, 5);
list; // [1, 2, 3, 4, 5]
Array.isArray()
Returns true if the given value is an array.
~~~
// Code
Array.isArray([1, 2, 3, 4, 5]); // true
Array.isArray(5); // false
~~~
Array.at()
Returns a value at the specified index.
// Code const list = [1, 2, 3, 4, 5]; list.at(1); // 2 list.at(-1); // 5 list.at(-2); // 4
Array.copyWithin()
copyWithin() is a built-in JavaScript function that copies part of an array to another location.
This function modifies the original array in place and returns the modified array.
// Code const myArray = [1, 2, 3, 4, 5, 6]; // Copy elements from position 0 to position 3 myArray.copyWithin(3); console.log(myArray); // Output: [1, 2, 3, 1, 2, 3] // Copy elements from position 1 to position 4 myArray.copyWithin(4, 1); console.log(myArray); // Output: [1, 2, 3, 1, 2, 3] // Copy elements from position 1 to position 3 myArray.copyWithin(3, 1, 3); console.log(myArray); // Output: [1, 2, 3, 2, 3, 3]
Array.flat()
Returns a new array with all sub-array elements concatenated into it recursively up to the specified depth.
// Code const list = [1, 2, [3, 4, [5, 6]]]; list.flat(Infinity); // [1, 2, 3, 4, 5, 6] // Example 1 const arr = [1, 2, [3, 4]]; const flattened = arr.flat(); console.log(flattened); // Output: [1, 2, 3, 4] // Example 2 const arr = [1, [2, [3, [4]]]]; const flattened = arr.flat(); console.log(flattened); // Output: [1, 2, [3, [4]]] //Example 3 const arr = [1, [2, [3, [4]]]]; const flattened = arr.flat(Infinity); console.log(flattened); // Output: [1, 2, 3, 4]
Array.flatMap()
Array.prototype.flatMap() is a powerful array method that allows you to map and flatten an array in one step.
It works similarly to Array.prototype.map(), but it also **flattens the resulting array to a depth of 1.
**
This can be very useful when working with arrays of arrays or arrays of objects.
Here’s the syntax for Array.prototype.flatMap():
flatMap(function (element, index, array) { /* … */ }, thisArg)
The** callback** function takes three arguments: currentValue, index, and array. The thisArg parameter is optional, and it sets the this value of the callback function.
// Code const list = [1, 2, 3]; list.flatMap((el) => [el, el * el]); // [1, 1, 2, 4, 3, 9]
NEEDS: better example
Array.concat()
a1.concat(a2)
The concat() method creates a new array that contains the elements from the original array followed by the elements from the arguments passed to the method.
The original array is not modified.
// Code const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const newArr = arr1.concat(arr2); console.log(newArr); // Output: [1, 2, 3, 4, 5, 6]
a1.join(separator)
Join all elements of array a1 into a string separated by separator arg
a1.slice(start, end)
Extract a section from start to end of array a1 and return a new array
a1.indexOf(obj)
Return first index of obj within array a1
Array.lastIndexOf()
a1.lastIndexOf(obj)
Array.lastIndexOf is a built-in method in JavaScript that returns the index of the last occurrence of a specified value in an array.
This method searches the array from right to left, which means it starts from the end of the array and moves towards the beginning.
The syntax of Array.lastIndexOf is as follows:
array.lastIndexOf(searchValue) array.lastIndexOf(searchValue, fromIndex)
Here, array is the array that you want to search in, searchValue is the value you want to find, and fromIndex (optional) is the index from which the search should begin. The fromIndex parameter specifies the starting position of the search. If fromIndex is **not **specified, the search starts from the end of the array.
If searchValue is found, Array.lastIndexOf returns the index of the last occurrence of the value. If the value is not found, the method returns -1.
a1.every(fn)
Return true if every element in array a1 satisfies provided testing function fn
Array.forEach()
a1.forEach(fn)
Array.prototype.forEach() is an array method that allows you to** loop through** each element of an array and perform a function on each element. This method can be useful for a variety of tasks, such as transforming data or logging information.
Syntax:
array.forEach(callback(currentValue, index, array), thisArg)
Here, array is the array that you want to loop through, callback is the function to be executed on each element of the array, and thisArg is the optional value to be used as this when executing the callback function.
The callback function takes** three parameters**: currentValue, index, and array. currentValue represents the value of the current element being processed, index represents the index of the current element being processed, and array represents the array that forEach() is being called on.
a1.some(fn)
Return true if at least one element in array a1 satisfies provided testing function fn
a1.map(fn)
Create a new array with results of calling function fn on every element in array a1
a1.filter(fn)
Create a new array with all elements of array a1 which pass the filtering function fn
a1.reduce(fn)
Apply a function fn against an accumulator and each value (from left to right) of the array as to reduce it to a single value
a1.reduceRight(fn)
Apply a function fn against an accumulator and each value (from right to left) of the array as to reduce it to a single value
a1.pop()
The pop() method removes the last element from an array and returns that element.
This method modifies the original array.
// Code const myArray = [1, 2, 3, 4]; const lastElement = myArray.pop(); console.log(myArray); // prints [1, 2, 3] console.log(lastElement); // prints 4
a1.push(obj)
The push() method adds one or more elements to the end of an array and** returns the new length** of the array.
// Code const myArray = [1, 2, 3, 4]; myArray.push(5); console.log(myArray); // prints [1, 2, 3, 4, 5]
a1.reverse()
Reverse order of elements of array a1 in place
a1.sort()
Sort the elements of array a1 in place
a1.splice(start, deleteCount, items)
Change content of array a1 by removing existing elements and/or adding new elements
`a1.unshift(obj)
Add obj to start of array a1 and return new length
Array.toString()
a1.toString()
Array.toString() is a built-in JavaScript method that returns a string representation of an array.
The returned string contains the elements of the array** separated by commas**, with no spaces between the elements.
//Example const fruits = ['apple', 'banana', 'cherry']; const fruitsString = fruits.toString(); console.log(fruitsString); // "apple,banana,cherry"
a1.toLocaleString()
Return a localized string representing array a1 and its elements (similar to a1.join(','))
Array.isArray(var)
Return true if var is an array
a1.length
The length property of an array returns the number of elements in the array. This property is** read-only**, which means that you can’t assign a new value to it.
~~~
// Code
const myArray = [1, 2, 3, 4];
console.log(myArray.length); // prints 4
myArray.length = 10; //throws an error
~~~
a1[0]
Access first element of array a1
Array.entries()
array.entries() is an array method in JavaScript that returns an iterator object which contains key-value pairs of the array.
The key-value pairs are returned as arrays where the** first element of the array is the index** and the second element is the value.
~~~
//Code
const fruits = [‘apple’, ‘banana’, ‘orange’];
const iterator = fruits.entries();
console.log(iterator.next().value); // [0, ‘apple’]
console.log(iterator.next().value); // [1, ‘banana’]
console.log(iterator.next().value); // [2, ‘orange’]
~~~
Array.keys()
Array.keys() method returns an array iterator object that contains the keys for each index in the array. In other words, it returns an array of the indices of the given array.
Array.keys() can be called with** three different syntaxes**:
~~~
Syntax 1: Array.keys()
Syntax 2: Array.keys().next()
Syntax 3: Array.keys().map()
~~~
Syntax 1: Array.keys()
The simplest syntax for Array.keys() is to call it with no arguments. This** returns an iterator object that contains the keys for each index in the array.**
Example:
~~~
const myArray = [‘apple’, ‘banana’, ‘orange’];
const keys = myArray.keys();
for (const key of keys) {
console.log(key);
}
~~~
Syntax 2: Array.keys().next()
You can also call next() on the iterator object returned by Array.keys(). This returns an object that contains the value and done properties. The value property is the next key in the iterator, and the done property is a boolean that indicates whether the end of the iterator has been reached.
Example:
~~~
const myArray = [‘apple’, ‘banana’, ‘orange’];
const keys = myArray.keys();
let key = keys.next();
while (!key.done) {
console.log(key.value);
key = keys.next();
}
~~~
Syntax 3: Array.keys().map()
Finally, you can also call map() on the iterator object returned by Array.keys(). This returns an array of the keys in the iterator.
Example:
const myArray = ['apple', 'banana', 'orange']; const keys = myArray.keys(); const keyArray = Array.from(keys).map(key => key * 2); console.log(keyArray); //[0, 2, 4]
In this example, we call Array.from() on the iterator object returned by Array.keys() to convert it into an array. We then call map() on this array, which returns a new array containing each key multiplied by 2.
