[1]. 🔎자바스크립트 배열내장함수 정리 (2)

🔊 자바스크립트의 배열내장함수를 복습하고 정리하기 위한 글입니다.

6.💡 find

find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 리턴합니다. 만약 없으면 undefined를 리턴합니다.

간단하게 코드로 확인합니다.

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);

결과 값: 12

판별함수가 요소가 10보다 큰 값을 반환하고 있지만 find 메서드는 첫 번째 요소만을 반환하기 때문에 12만 반환된 것을 확인할 수 있습니다.

7.💡 findIndex

findIndex() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 그렇지 않다면 -1를 반환합니다.
인덱스를 반환한다는 것은 판별 함수에 만족하는 첫 번째 값의 '순서'를 반환한다고 볼 수 있습니다.

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));

다음과 같은 코드가 있습니다. 배열에서 판별 함수 isLargeNumber에 해당하는 첫 번째 요소가 130입니다. 130의 index는 3이기 때문에 이 코드의 콘솔로그에는 '3'이 출력될 것 입니다.

8.💡 flat

flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성합니다. 깊이의 default는 1이며 따로 지정이 가능합니다.

중첩 배열 평탄화

const arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

배열.flat(깊이 지정)의 형태이며 지정한 깊이에 따라 하위 배열부터 차례로 이어붙히게 됩니다. 또한 flat은 비어있는 배열의 구멍도 제거하게 됩니다.

9.💡 flatMap

flatMap()은 각 요소에 대해 map 수행 후, 결과를 새로운 배열로 평탄화합니다. 설명이 어려워 예제를 보며 확인합니다.

Map과 flatMap의 차이

let arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 한 레벨만 평탄화됨
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

flatMap이 몇 레벨로 평탄화를 할 지에 따라 배열의 분리가 달라진 것을 볼 수 있습니다.

let arr1 = ["it's Sunny in", "", "California"];

arr1.map(x=>x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]

arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in","California"]

map() 메서드와 flatMap()메서드의 차이를 볼 수 있습니다. map은 평탄화가 이루어 지지 않고 공백도 배열 요소중 하나로 껴 있지만 flatMap()은 한 배열로 평탄화가 이루어져 있는 것을 확인할 수 있습니다.

10.💡 forEach

forEach()메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다. 배열 요소 각 개개의 모든 값을 따로 따로 실행하게 됩니다.

const array1 = ['b', 'y', 'e'];

array1.forEach(element => console.log(element));

// expected output: "b"
// expected output: "y"
// expected output: "e"

array1의 요소들이 각각 따로 출력이 된 것을 확인할 수 있습니다.
forEach는 배열을 변형하지 않지만 콜백함수가 변형할 수는 있습니다. forEach는 콜백함수를 오름차순으로 한 번씩 실행하며 삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않습니다.

const arraySparse = [1,3,,7]
let numCallbackRuns = 0

arraySparse.forEach(function(element){
  console.log(element)
  numCallbackRuns++
})

console.log("numCallbackRuns: ", numCallbackRuns)

// 1
// 3
// 7
// numCallbackRuns: 3
// 3과 9 사이의 없는 배열은 forEach가 생략하는 것을 볼 수 있습니다.

함수를 살펴보면 forEach가 배열을 순회하며 각각의 값을 출력하고 순회할 때마다 numCallbackRuns가 1씩 상승합니다. 하지만 마지막에 출력되는 값이 3인것을 확인하여 비어있는 배열은 forEach가 생략을 하고 순회하는 것을 살펴볼 수 있습니다.

우리는 이 forEach를 사용하여 배열을 순회할 때 for문 대신 간편하게 forEach문으로 대신할 수 있을 것 입니다.

const items = ['item1', 'item2', 'item3'];
const copy = [];

// 이전
for (let i=0; i<items.length; i++) {
  copy.push(items[i]);
}

// 이후
items.forEach(function(item){
  copy.push(item);
});

간단하게 콜백함수로 item들을 각각 copy배열에 푸쉬할 수 있습니다.

11.💡 includes

includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다.

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

include함수의 매개변수는 다음과 같습니다.

arr.includes(valueToFind[, fromIndex])

valueToFind는 탐색할 요소이고 fromIndex는 어디서 부터 검색을 시작할 지 정하는 매개변수 입니다. 만약 fromIndex가 음수이면 전체 검색을 시작하게 됩니다. fromIndex가 배열의 크기보다 크면 false를 반환하게 됩니다. 예제를 봅니다.

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

3번과 4번을 보면 3번은 3은 배열안에 포함되어 있지만 fromIndex가 3이므로 배열의 크기보다 크므로 false가 리턴되고 4번은 fromIndex가 -1이기 때문에 전역 검색을 하게 되어 3을 찾아 true가 리턴된 것을 볼 수 있습니다.

📃 참고문헌

Mozilla MDN