예비 개발자

const eighthStudyLog = "배열 메서드와 배열 고차함수";

3. 배열 메서드(2)

3-13. Array.prototype.includes

첫번째 인수와 같은 요소가 배열 내에 포함되어 있는지 확인하며, true 혹은 false를 반환한다.

  • 첫번째 인수: 검색할 요소
  • 두번째 인수: 검색을 시작할 인덱스(생략시 0), 음수를 넣으면 (length + index)를 값으로 갖는다.
const arr = [1, 2, 3];

arr.includes(2); //true
arr.includes(2, 2); // false

3-14. Array.prototype.flat

인수를 전달한 깊이로 중첩배열 모두를 평탄화한다. 인수 기본값은 1이다.

[1, 2, [3, 4, 5]].flat(); // [1,2,3,4,5]

4. 배열 고차 함수

여기까지는 함수의 메서드였다면 다음의 내용은 배열 고차 함수이다. 고차함수는 함수를 인수로 전달받거나 함수를 반환하는 함수를 말한다. 조건문과 반복문을 제거해서 복잡성을 해결하고 변수의 사용을 억제하려는 것이 포인트이다.

3-15. Array.prototype.sort

배열 요소를 정렬한다. 원본 배열을 직접 변경하며 정렬한 배열을 반환한다. 오름차순으로 요소를 정렬한다.

const name = ["carry", "amilly", "dana", "bob"];

name.sort(); // ['amilly', 'bob', 'carry', 'dana']

한글 문자열 요소도 가능하다.

const name = ["나영", "다희", "가현"];

name.sort(); // ['가현', '나영', '다희']

내림차순으로 정리하려면 sort 후에 reverse 메서드를 사용하여 순서를 뒤집는다.

주의할 점은, 숫자요소로 이루어진 배열을 정리할 때는 제대로 작동하지 않을 수 있다는 것이다.

  • sort 메서드는 숫자요소를 문자열로 변경한 후 유니코드 코드 포인트를 기준으로 정렬을 하기 때문에 이런 문제가 발생한다.
  • 이럴 때는 정렬 순서를 정의하는 비교 함수를 인수로 전달해야한다.

3-16. Array.prototype.forEach

for문을 대체할 수 있는 고차 함수이다.

내부에서 반복문을 통해 자신을 호출한 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출하고, undefined를 반환한다. 원본 배열을 직접 변경하지는 않는다.(변경할 수는 있다.)

콜백 함수를 호출할 때 3개의 인수를 갖는다.

  • forEach 메서드를 호출한 배열의 요소값
  • 그 요소의 인덱스
  • 메서드로 호출한 배열(this)
[1, 2, 3]forEach(item, index, arr) => {
	console.log(`요소값: ${item}, 인덱스: ${index}, this: ${JSON.stringfy(arr)}`);
});

/*
"요소값: 1, 인덱스: 0, this: [1,2,3]"
"요소값: 2, 인덱스: 1, this: [1,2,3]"
"요소값: 3, 인덱스: 2, this: [1,2,3]"
*/

더 자세한 내용은 forEach를 사용해볼 때가 오면 정리해보겠다.

3-17. Array.prototype.map

호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출하고, 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다. 물론 원본 배열은 변경되지 않는다.

콜백 함수를 호출할 때 3개의 인수를 갖는다.

  • forEach 메서드를 호출한 배열의 요소값
  • 그 요소의 인덱스
  • 메서드로 호출한 배열(this)
const numbers = [1, 4, 9];

const roots = numbers.map((item) => Math.sqrt(item));
console.log(roots); // [1,2,3]
console.log(numbers); // [1,4,9]

요소를 순회하면서 콜백함수를 반복 호출한다는 점에서 forEach와 비슷해 보이지만, forEach 메서드는 undefined를 반환하고 map 메서드는 새로운 배열을 반환하는 차이가 있다.

3-18. Array.prototype.filter

호출한 배열의 모든 요소를 순화하면서 콜백함수를 반복 호출하고, 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다. 원본 배열은 변경하지 않는다.

const numbers = [1, 2, 3, 4, 5];

// 1 = truthy, 0 = falsy
const odds = numbers.filter((item) => item % 2);
console.log(odds); // [1, 3, 5]

역시나 앞의 고차함수처럼 요소를 순회하면서 콜백함수를 반복 호출하는 동작을 한다. forEach와는 달리 새로운 배열을 반환하고, map과 달리 호출한 배열과 length가 작거나 같다는 차이점이 있다.

3-19. Array.prototype.reduce

호출한 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출하고, 콜백 함수의 반환값을 다음 순회 시에 첫 번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환한다. 원본 배열은 변경되지 않는다.

4개의 인수를 갖는다.

  • 첫번째: 콜백 함수
  • 두번째: 초기값
  • 세번째: reduce 메서드 호출한 배열의 요소값과 인덱스
  • 네번째: 호출한 배열 자체(this)

이것도 사용할 때에 자세히 다뤄보도록 하겠다!

3-20. Array.prototype.some

마찬가지로 호출한 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출한다. 콜백 함수의 반환값이 단 한 번이라도 참이면 true를, 모두 거짓이면 false를 반환한다.

[1,2,3].some(item => item > 2) // true
[1,2,3].some(itme => itme > 3) // false
//빈 배열의 경우 언제나 false를 반환한다.
[].some(imte => itme > 3) // false

3-21. Array.prototype.every

호출한 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출한다. 콜백 함수의 반환값이 모두 참이면 true, 단 한번이라도 거짓이면 false를 반환한다.

[1,2,3].every(item => item > 0) //true
[1,2,3].every(item => itme > 1) // false
//빈 배열의 경우 언제나 true
[].every(//~~ //) // true

3-22. Array.prototype.find

호출한 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출하며 반환값이 true인 첫 번째 요소를 반환한다. true인 요소가 없다면 undifined를 반환한다.

3-23. Array.prototype.findIndex

호출한 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출하며 반환값이 true인 첫 번째 요소의 인덱스를 반환한다. 존재하지 않는다면 -1를 반환한다.

3-24. Array.prototype.flatMap

map과 flat를 순차적으로 실행한다. 단 깊이를 지정할 수 없고 1단계만 평탄화 한다.

정리

배열에서 사용할 수 있는 다양한 메서드와 고차함수를 전반적으로 훑어보았다. 배열은 많은 값을 모아서 처리할 수 있다는 장점에서 자주 사용되는 자료구조이다. 반복문과의 시너지가 좋고, 대부분 반복이 필요한 기능은 고차 함수를 이용하면 해결될 것 같이 보인다. 24개나 되는 메서드를 정리해보면서 배열의 활용도가 그 숫자만큼 많구나. 라는 것을 느꼈다.

벌써 pre-스터디가 마무리 되었다. 4주동안 배운 것도 많고, 지금까지 공부한 것들을 확인해보면서 뿌듯함을 느꼈다.

앞으로도 1주일 동안 2번씩 공부한 내용을 올리고 싶다. 프로젝트 했던 것들의 코드들도 분석해보고 더 다듬는 포스팅도 올려보고 싶다.

2022-02-13

오후 3: 49

참고