map()

arr.map(function(element, index, array){  }, this);

콜백함수 function()은 각 배열 요소에 대해 호출되며, map() 메소드는 언제나 현재의 element와 그것의 index, 그리고 전체 array 객체를 해당 요소에 전달합니다.

this인수는 콜백함수 내부에서 사용되게 됩니다. 기본적으로 이 값은 undefined입니다. 예를 들어, this값을 숫자 80으로 변경하는 방법은 다음과 같습니다:

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
	console.log(this) // 80
}, 80);

어떤 배열에 있는 모든 요소들의 값을 변경해서 만든 새로운 배열을 써야 할 때가 있습니다.

그 때 루프를 사용하여 배열에 대해 수동으로 반복 처리하는 대신, 간단히 기본 제공 Array.map() 메소드를 사용하면 됩니다.

이 Array.map() 메소드는 콜백 함수를 이용해 각각의 요소에 호출해서 그 값을 변환할 수 있게 해줍니다. 다시 말하자면 콜백 함수는 배열의 각 요소에 실행됩니다.

let arr = [3, 4, 5, 6];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3;
}

console.log(arr); // [9, 12, 15, 18]

Array.map() 메소드를 사용한다면 이런 동일한 결과를 얻을 수 있습니다.

let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]

forEach()

forEach 메서드도 배열을 순회하기 위해 사용되지만, 기본적인 for 반복문과는 다른 방식으로 함수를 사용합니다.

forEach 메서드는 다음 매개변수(parameter)와 함께 배열의 각 요소에 적용하게 될 콜백 함수(callback function)를 전달합니다.

• Current Value (명명된 매개변수) - 처리할 현재 요소
• Index (선택적 매개변수) - 처리할 현재 요소의 인덱스
• Array (선택적 매개변수) - forEach 메서드를 호출한 배열
  주어진 매개변수를 하나씩 설명하겠습니다.

우선 forEach 메서드를 사용해 배열을 순회하려면 콜백 함수 또는 익명 함수가 필요합니다.

콜백 함수는 각 요소에 대해 실행되며, 배열의 요소를 나타내는 매개변수를 반드시 하나 이상 사용해야 합니다.

numbers.forEach(number => console.log(number));

선택적 매개변수

인덱스(Index)

첫 번째 선택적 매개변수는 각 요소의 순서를 나타내는 인덱스입니다.

즉 두 개의 매개변수를 활용하여 메서드를 사용하면 두 번째 매개변수를 통해 요소의 인덱스를 확인할 수 있습니다.

numbers.forEach((number, index) => {
    console.log('Index: ' + index + ' Value: ' + number);
});

배열(Array)

배열 매개변수는 필요에 따라 다양하게 활용할 수 있는 선택적 매개변수로, 원본 배열 그 자체입니다. 단순히 호출하기만 하면 배열의 요소 수만큼 배열이 출력되는 것을 볼 수 있습니다.

numbers.forEach((number, index, array) => {
    console.log(array);
});

flatten()

배열을 평면화하는 것으로 배열의 차원을 줄이는 프로세스입니다. 즉, 배열의 차원 수를 더 낮은 수로 줄이는 과정입니다.

let arr = [
    [1, 2],
    [3, 4],
    [5, 6][7, 8, 9],
    [10, 11, 12, 13, 14, 15]
];


Output:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

배열 내부에 배열이 요소로 있을 때 배열을 중첩 배열이라고 합니다.

위의 배열 arr을 평면화하면 다음과 같습니다.

배열을 평면화하는 다양한 방법

1. JavaScript에서 평면화된 배열을 얻는 간단한 방법

let flatArray = [].concat.apply([], arr);

Output:  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 ]

여기서는 2가지 방법을 사용합니다. concat() 및 적용(). Apply 메소드에 2개의 인수를 전달합니다. 빈 배열과 위에서 선언한 배열(arr)은 빈 배열에 전달된 모든 요소(하위 배열)를 연결하여 1차원 배열을 얻습니다.

let flatArray = [].concat(...arr);

Output:  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 ]

위에서 선언한 arr 배열에 스프레드 연산자를 사용하면 Spread 구문(...)을 사용하여 배열의 모든 요소에 대해 연결 작업을 수행하고 결과를 빈 배열에 저장하여 평면화된 배열을 제공합니다.

let flatArray = arr.reduce((acc, curVal) => {
    return acc.concat(curVal)
}, []);

Output:  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 ]

Reduce() 메서드는 배열의 각 요소에 대해 감속기 함수(인수로 제공하는 함수)를 실행하여 단일 출력 값을 생성합니다. 여기서 제공되는 감속기 함수는 concat() 이며 결과는 빈 배열에 저장됩니다.

2. 깊이를 지정하여 평면화된 배열 얻기

배열의 깊이는 배열에 있는 브래킷 쌍의 레벨 수입니다. 깊이를 지정하면 원하는 수준으로 배열을 평면화할 수 있는 유연성이 제공됩니다.

Let arr1 = [1, 2, [3, [4, 5, 6], 7], 8];

console.log(arr1.flat());

Output: [1, 2, 3, [4, 5, 6], 7, 8];

console.log(arr1.flat(2));

Output: [1, 2, 3, 4, 5, 6, 7, 8];

예상한 대로 arr1의 차원은 깊이 매개변수가 지정되지 않은 경우의 기본값이므로 1만 감소했습니다.

이제 깊이를 2로 지정하면 배열이 완전히 평면화되어 차원이 2만큼 줄어듭니다.