배열 내장 객체 익히기(feat. map(), reduce(), filter())

Jhey·2024년 11월 3일
0

JavsScript

목록 보기
11/18

언뜻 보면 다 똑같은 역할을 하는 것 같은 내장 객체들... 하루 종일 문제를 풀며 느낀 내장 객체별 쓰임새(?)를 정리해 본다.


1. Array.prototype.filter()

➡️ 조건에 맞는 모든 값을 배열return해준다. <=> find의 경우 조건에 맞는 단일 값을 반환해준다.

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

⭐ 활용

  1. 특정 값을 검색할 때
    예) 객체에서 값이 20인 것만 찾을 때
  2. 특정 값의 개수를 구할 때
    예) 배열에서 값이 2인 개수를 구할 때
    ✅ 조건이 주어지고, 조건에 부합하는 값들이 필요하면 사용하기
// 1. 배열에 포함된 값들의 모음
filter((v) => small.includes(v));

// 2. 조건을 만족하는 값들의 모음
filter((v) => v.age >= 20);

// 3. 조건을 만족하는 값들의 개수 구하기
filter((v) => v === cur).length;

2. Array.prototype.map()

➡️ 배열을 순회해서 배열return해준다. <=> forEach의 경우 반환값이 없다. 활용도가 상당히 높음.

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

⭐ 활용

  1. 조건에 따라 값을 다르게 적용한 배열을 구할 때
    예) 소문자면 대문자로, 대문자면 소문자로 값을 변환하고 싶을 때
  2. 중첩 배열을 다룰 때
    ✅ 조건뿐 아니라 원하는 대로 새로운 배열을 구성할 때 사용
// 1. 원하는 조건으로 새로운 배열 만들기
.map((v) => (v === v.toLowerCase() ? v.toUpperCase() : v.toLowerCase()));

// 2. 중첩 배열 다루기
.map((v) => v.split("").reverse().join(""));

3. Array.prototype.reduce()

➡️ 배열의 각 요소에 대해 함수를 실행해 다양한 형태(숫자, 문자열, 객체 등)단일 값을 return한다.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

🚨 주의점

  1. 기본값을 지정하면 이전값기본값이 적용된다.
  2. return 값은 다음 이전값이 된다.
    • acc + num은 다음 이전값이 된다.
  3. 기본값에는 숫자, 문자열(""), 배열, 객체, boolean이 올 수 있다.

❓ "왜 reduce만 쓰지 않을까?"

  • 가독성
    • map은 단순히 배열 요소를 변환하는 데 최적화되어 있어 코드가 더 명료하고 직관적이다.
    • reduce는 더 복잡한 연산을 처리할 수 있지만, 가독성이 떨어질 수 있다.
  • 의도 표현
    • map을 사용하면 "이 배열을 변환하고 있다"는 의도가 명확하다.
    • reduce는 더 일반적인 축약 연산이기 때문에 목적이 다르게 해석될 수 있다.
  • 차이점
    • map은 배열의 각 요소를 변환해 항상 원본 배열과 같은 길이의 새 배열을 반환한다.
// 1. 기본값을 객체로 설정해 빈도 구하기
arr.reduce((pre, cur) => {
  pre[cur] = (pre[cur] || 0) + 1;
  return pre;
}, {});

// 2. 기본값을 숫자로 설정해 누계 구하기
students.reduce((acc, cur) => {
  acc += cur.age;
  return acc;
}, 0);

배운 점

  1. 사용법은 익혔지만, 아직 어떤 상황에서 어떤 내장 객체를 사용해야 효율적인지 모르겠다. reduce에 빠져서 모든 것을 reduce로 풀다가, filtermap으로 더 직관적이고 간단하게 풀 수 있다는 사실을 깨닫고 충격받았다.
  2. 주의할 점은 내장 객체에 취해 중첩 사용 시 시간 복잡도가 증가한다.
profile
천천히 가더라도 즐겁게 ☁

0개의 댓글

관련 채용 정보