ReasonJun

javascript : Array methods that do not mutate the original array 본문

Frontend/Javasciprt

javascript : Array methods that do not mutate the original array

ReasonJun 2023. 6. 8. 17:46
728x90

In JavaScript, there are several array methods that do not mutate the original array. Instead of modifying the array in place, they return a new array with the desired modifications. Here are some commonly used array methods that have non-mutating behavior:

  1. concat: The concat() method is used to merge two or more arrays and returns a new array without modifying the existing arrays.
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const newArray = array1.concat(array2);
console.log(newArray); // Output: [1, 2, 3, 4, 5, 6]

2. slice: The slice() method returns a shallow copy of a portion of an array into a new array. It takes two optional parameters: start (inclusive) and end (exclusive) indices.

const array = [1, 2, 3, 4, 5];
const newArray = array.slice(2, 4);
console.log(newArray); // Output: [3, 4]

3. map: The map() method creates a new array by applying a callback function to each element of the original array. It returns an array of the same length as the original, with each element transformed by the callback function.

const array = [1, 2, 3];
const newArray = array.map((element) => element * 2);
console.log(newArray); // Output: [2, 4, 6]

4. filter: The filter() method creates a new array with all elements that pass a test implemented by a provided callback function. It returns an array containing only the elements for which the callback function returns true.

const array = [1, 2, 3, 4, 5];
const newArray = array.filter((element) => element % 2 === 0);
console.log(newArray); // Output: [2, 4]

5. reduce: The reduce() method applies a callback function to reduce the array to a single value. It iterates over each element of the array and accumulates a value based on the logic defined in the callback function.

const array = [1, 2, 3, 4, 5];
const sum = array.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); // Output: 15

6. join: The join() method creates and returns a new string by concatenating all the elements in an array using a specified separator.

const array = [1, 2, 3];
const joinedString = array.join("-");
console.log(joinedString); // Output: "1-2-3"

7. indexOf and lastIndexOf: The indexOf() method returns the first index at which a given element is found in the array, and the lastIndexOf() method returns the last index at which the element is found. Both methods do not mutate the original array.

const array = [1, 2, 3, 4, 2];
console.log(array.indexOf(2)); // Output: 1
console.log(array.lastIndexOf(2)); // Output: 4

8. find: The find() method returns the first element in the array that satisfies a provided testing function. It returns undefined if no element is found.

const array = [1, 2, 3, 4, 5];
const foundElement = array.find((element) => element > 3);
console.log(foundElement); // Output: 4

9. findIndex: The findIndex() method returns the index of the first element in the array that satisfies a provided testing function. If no element is found, it returns -1.

const array = [1, 2, 3, 4, 5];
const foundIndex = array.findIndex((element) => element > 3);
console.log(foundIndex); // Output: 3

10. some: The some() method tests whether at least one element in the array satisfies the provided testing function. It returns true if any element passes the test, otherwise false.

const array = [1, 2, 3, 4, 5];
const hasEvenNumber = array.some((element) => element % 2 === 0);
console.log(hasEvenNumber); // Output: true

11. every: The every() method tests whether all elements in the array satisfy the provided testing function. It returns true if every element passes the test, otherwise false.

const array = [1, 2, 3, 4, 5];
const allPositive = array.every((element) => element > 0);
console.log(allPositive); // Output: true

12. slice (with no arguments): When called without any arguments, the slice() method returns a shallow copy of the entire array.

const array = [1, 2, 3, 4, 5];
const newArray = array.slice();
console.log(newArray); // Output: [1, 2, 3, 4, 5]

13. flat and flatMap: The flat() method creates a new array with all sub-array elements concatenated into a single array. The flatMap() method combines mapping and flattening by first applying a mapping function to each element and then flattening the result into a new array.

const array = [1, [2, 3], [4, [5]]];
const flattenedArray = array.flat();
console.log(flattenedArray); // Output: [1, 2, 3, 4, [5]]

const doubledArray = array.flatMap((element) => [element, element * 2]);
console.log(doubledArray); // Output: [1, 2, 2, 4, 3, 6, 4, [5], [5], [10]]
const array = [1, [2, 3], [4, [5]]];
const flattenedArray = array.flat(Infinity);

console.log(flattenedArray);
// Output: [1, 2, 3, 4, 5]
728x90
Comments