[Javascript] 배열 총정리 ③ | 새로운 배열을 반환하는 고차 메서드

1. 원본 복사하여 코드를 처리하는 배열 메서드

앞서 소개한 대로 자바스크립트의 배열 메서드는 크게 원본을 변경하는 메서드와, 원본을 복사한 카피본에 코드문을 처리하여 그 카피본을 반환하는 배열 메서드로 나뉘는데요.

이번 시간에는 원본을 변경하지 않는 메서드들에 대해서 알아보도록 하겠습니다.

2. concat()

전달 받은 매개변수들을 배열 인스턴스에 담아 카피본을 반환하는 메서드 입니다. 매개변수는 리터럴 및 배열, 객체를 혼용하여 사용 가능하며, 만약 매개변수가 배열일 경우 배열을 분해되어 새로운 배열에 할당됩니다.

이러한 concat의 경우 스프레드 연산자(...arr)를 통해서도 구현이 가능합니다.

const arr1 = [1,2,3,4,5]
const arr2 = [6,7,8,9,10]
console.log(arr1.concat(arr2)) // arr1과 arr2가 합쳐진 형태의 새로운 배열을 반환
console.log(arr1) // 원본 배열은 변경 x

3. slice()

첫번째 매개변수(시작 인덱스) 부터 두번째 매개변수(범위 인덱스) 까지를 복사하여 배열로 반환합니다. 이때 원본 배열의 구조는 변화되지 않으므로 원본 배열의 구조가 변화되는 splice와의 혼동에 주의해야 합니다.

또한 splice와 마찬가지로 slice또한 첫번째 매개변수만 주어질 경우 해당 인덱스부터 배열의 끝까지의 요소들을 복사한 후 카피 배열로 반환합니다.

const arr1 = [1,2,3,4,5]
console.log(arr1.slice(2)); // 세번째 인덱스인 2부터 배열의 끝까지를 복사하여 카피 배열로 반환
console.log(arr1); // 원본 배열은 변경 X

4. join()

배열의 복사본의 요소들을 주어진 매개변수로 묶어 반환하는 메서드 입니다. 매개변수가 없을 경우 문자열 안에 각 요소들이 콤마(,)로 구분되며, 매개변수가 주어질 경우 그 기호를 구분자로 각 요소들이 구분되어 문자열로 반환되고, 빈 문자열 ('')을 매개변수로 지정할 경우 요소들이 하나의 단어로 처리되어 (정확히 말하면 합친 요소들을 하나의 문자열로 취급하겠다는 의미) 반환합니다.

const arr1 = [1,2,3,4,5]
console.log(arr1.join('')); // 빈 문자열로 배열 요소들을 묶을 시 '12345'가 출력됩니다.
console.log(arr1); // 원본 배열은 변경 X

5. flat()

이중 배열 구조의 모든 요소들을 하나의 배열로 통일합니다. 말 그대로 '평탄화' 작업을 의미합니다. 매개변수를 생략할 경우 default값은 1(배열 안의 이중 배열만 평탄화) 이며, 2나 3을 줄 경우 그에 맞는 중첩 레벨의 배열이 평탄화 작업을 적용 받습니다.

만약 해당 배열 안에 중첩 배열이 얼마나 겹쳐있든 전부 평탄화를 하고 싶다면 매개변수를 Infinity(무한대의 값)를 주어 평탄화를 시킬 수 있습니다.

const arr1 = [1,[2,3],[4,5],[6,7,[8,9,10]]]
console.log(arr1.flat(2)); // 배열 안의 중첩 배열들을 3중 중첩 레벨까지 전부 평탄화 시킵니다.
console.log(arr1); // 원본 배열은 변경 X

6. foreach()

해당 배열의 각 요소들을 순회하며 콜백 함수를 수행하는 메서드로, 매개변수는 총 세 개로 주어지는데, 각각 (현재 처리 중인 배열 요소의 값, 처리 중인 요소의 인덱스, 메서드 호출 배열)을 의미하합니다.

또한 이 foreach 메서드는 원본 배열에 영향을 주지 않으나, 해당 원본 배열에 직접 접근을 할 경우 해당 배열의 값 변경 또한 가능하며, foreach의 결과는 특이하게도 새로운 배열을 반환하지 않고 undefined를 반환하기 때문에(return 키워드로 선언을 하더라도 무시됩니다.) 단순히 특정 배열의 작업을 순회하며 콜백 함수로 처리할 때 사용됩니다.

정리하자면 foreach문은 for문의 축약형 메서드라고 할 수 있으며, 새로운 배열을 반환하지는 않으나 콜백 함수 안의 특정 배열을 반복적으로 처리해주어야 할때 사용되고, for문 보다 처리 속도가 빨라 코딩테스트 문제에서 널리 사용되는 메서드 중 하나이기도 합니다.

// 배열의 홀수를 반환하는 간단한 foreach 사용법 
function checkOddNumbers(arr){
const oddNumbers = [];

  arr.forEach((number) => {
    if (number % 2 !== 0) {
      oddNumbers.push(number);
    }
  });

  return oddNumbers;
}
const number = [1,2,3,4,5,6,7,8,9,10]
let result = checkOddNumbers(number);
console.log(result);

7. map()

foreach와 동작하는 방식은 비슷하나, 값을 반환하지 않는 foreach에 반해 map 메서드의 경우 콜백 함수로 배열의 요소들을 순차적으로 처리한 결과값을 배열로 반환합니다.

매개변수의 경우 foreach문과 동일하게 (현재 요소, 인덱스, 호출 원본 배열)이며, 각 배열의 요소에 맞지 않는 조건의 경우 undefined를 반환하기 때문에 조건문을 사용하여 특정 요소들만 거르더라도 나머지 요소 또한 반환해 주어야 하기 때문에 map을 통해서 배열의 요소들을 필터링 해주는 작업은 바로 다음 섹션에서 소개할 filter 메서드를 사용하는 편이 낫습니다.

// 배열의 홀수를 반환하는 간단한 map 사용법
const number = [1,2,3,4,5,6,7,8,9,10]

const oddNumbers = number.map((item) => item % 2 !== 0 ? item); // 각 배열 요소를 순회하며 조건에 맞는 값 반환합니다.

console.log(oddNumbers);

⭐ foreach와 map의 방식은 비슷하게 보여도 그 사용 목적에는 부수 효과(foreach)와 데이터의 정제(map)으로 나뉩니다.

8. filter()

위의 두 메서드와 마찬가지로 filter 메서드 또한 매개 변수로 (현재 요소, 인덱스, 기존 배열)을 받는데, 조건이 true인 경우에만 반환을 받는 용도로 사용되기 때문에 네이밍 그대로 조건에 맞는(true) 값만을 모아 새로운 배열로 반환하는 메서드 입니다.

이 메서드를 사용한다면 foreach의 조건문을 이용 할 필요 없이 간단한 검색이 가능해 집니다.

const number = [1,2,3,4,5,6,7,8,9,10]

const oddNumbers = number.filter((item) => item % 2 !== 0)

console.log(oddNumbers);

9. reduce()

reduce 함수는 위에서 설명한 세개의 메서드와는 다른 매개변수가 하나로 주어지게 되는데요. 바로 accumulator가 그 주인공 입니다.

해당 메서드는 첫번째로 이 accumulator를 전달하게 되고, 두번째 값부터는 동일하게 현재 요소, 인덱스, 기존 배열 원본을 지정하게 되는데 이 accumulator로 누적합이나 조건에 맞는 값을 반환하는 용도로도 사용이 가능합니다.

즉 reduce 메서드는 배열을 순회하며 조건에 맞는 값들을 누산하거나 조건에 맞는 값을 반환하는 용도로 사용되는 메서드인 셈이죠.

이때 콜백 함수 뒤에 시작하는 숫자를 적어줄 경우 콜백함수가 실행되는 accumulator의 초기값을 의미하게 됩니다.

const number = [1,2,3,4,5,6,7,8,9,10]

const accNumber = number.reduce((acc, current) => acc + current, 0) // number의 모든 값을 누적하는 

const maxNumber = number.reduce((acc, current) => { //
  if(acc < current) return current;
  else return acc;
}, 0);

console.log(accNumber)
console.log(maxNumber); // 10

10. some()

콜백 함수의 실행에 있어서 하나의 요소라도 true일 경우 true를 반환하고, 하나라도 true가 아닐 경우 false를 반환합니다.

const number = [1,2,3,4,5,6,7,8,9,10]

const checkOddInNumber = number.some(item => item % 2 !== 0)
const allIsPositive = number.some(item => item > 0)

console.log(checkOddIsNumber) // true 반환
console.log(allIsPositive) // true 반환

11. every()

some 메서드와 반대로 모든 요소가 true일 때 true를 반홯나고, 하나라도 거짓일 경우 false를 반환합니다.

const number = [1,2,3,4,5,6,7,8,9,10]

const checkOddInNumber = number.every(item => item % 2 !== 0)
const allIsPositive = number.every(item => item > 0)

console.log(checkOddIsNumber) // false 반환
console.log(allIsPositive) // true 반환

12. find()

배열을 순회하면서 콜백 함수의 true인 첫번째 요소를 반환합니다.

const number = [1,2,3,4,5,6,7,8,9,10]

const checkFirstOddInNumber = number.find(item => item % 2 !== 0)

console.log(checkOddIsNumber) // 배열의 홀수인 1을 반환

⭐ find와 filter 중 하나의 값만 찾고자 할 때에는 find를, 조건에 맞는 값을 배열 묶음으로 반환 받고자 한다면 filter를 사용하면 됩니다.

12. findIndex()

배열을 순회하면서 콜백 함수의 true인 첫번째 요소의 인덱스를 반환합니다.

const number = [1,2,3,4,5,6,7,8,9,10]

const checkFirstOddInNumber = number.findIndex(item => item % 2 !== 0)

console.log(checkOddIsNumber) // 조건에 맞는 배열의 값 1의 인덱스 0을 반환