[JavaScript] 배열 메서드에 대해 알아보기(Map,Filter,Reduce,Find,ForEach)

🔷 Map

주어진 배열의 값을 재정의 할 때 사용하는 방법이다.

배열의 요소를 인덱스 순으로 인자로 전달하여 callback함수로 반환 받아 새로운 값을 정의한다.

  let money = [1, 2, 3, 4];
  
  console.log(money);
    result = money.map((m) => m + m * 0.5);
    console.log(result);

 

👉 money의 요소가 m 인자를 통해 인덱스 순으로 전달되어 연산을 통해 새로운 값이 result에 배열 요소로 할당

 

🔹 map의 callBack 인자

인자 위치 순서에 따라 들어가는 값이 다르다.

map ((요소의 값, index , 순회하는 대상)

    result = money.map((m, i, s) => {
      document.write(`<br> ${i}번쨰 요소 값: ${m} 전체 : ${s}`);
    });
    console.log(result);

 

---

⚠️ map 사용 시 주의 사항

• map 콜백함수 내에서 push된 data : 적용 안됌
• map 콜백함수 내에서 pop된 data : 적용 됌

새 배열에는 적용되지 않지만 직접 추가 되는 배열에는 적용이 된다.

 

콜백 함수에서 push 반영

    result = money.map((m) => {
      money.push(123);
      return m * m;
    });
    

👉 반환되는 값에는 push가 반영되지 않는다.

다만 money에는 push가 반영된다.

 

 

콜백함수에 pop() 적용

    // money : [30, 50, 100, 120, 123, 123, 123, 123]
    
    result = money.map((m) => {
      money.pop();
      return m * m;
    });
    
    console.log(result);    //[900, 2500, 10000, 14400]      
    console.log(money);     //[30, 50, 100, 120]

👉 콜백함수 내에서 pop()이 반영되어 지워진 걸 알 수 있다.

 

---

🔷 Fillter

배열의 각 요소에 대해 제공된 callbackFn 함수를 한 번씩 호출하고,

조건에 성립할 경우 새 배열에 요소를 추가 한다.

    result = words.filter((m) => {
      if (m.length >= 5) return m;
    });

    console.log(result);  

👉 길이가 5 이상인 문자열로 배열 채워짐

💡 만약 필터의 재 사용성이 높은 경우 function을 작성해놓고 사용

callBack함수를 전달할 때는 () 제외하고 이름만 넣어도 된다.

filter를 통해 자동으로 인덱스 순으로 요소가 전달된다.

    function lengthCheck(i) {
      if (i.length >= 5) return i;
    }

    result = words.filter(lengthCheck);

    console.log(result);

🤔 map() 으로는 조건에 맞게 출력이 안될까?

    function lengthCheck(i) {
      console.log(i);
      if (i.length >= 5) return i;
    }
    
    result = words.map(lengthCheck);
    console.log(result);

👉 조건에 맞는 문자열이 반환되기는 하나

조건에 맞지 않아 반환 받지 못한 요소의 빈자리가 그대로 남아 undefined로 채워지게된다.

---

🔷 reduce()

배열의 각 요소에 대해서 콜백함수 리듀서 함수를 실행하고 결과값을 누적하여

단 하나의 결과를 가져온다.

reduce(a , c)

• a 인자 : accumulator로 연산 결과를 누적 보관한다.
• c 인자 : currentValue , 차례대로 전달 되는 배열의 값
• 초기값 생략 가능 ( 생략할 경우 가장 첫번째 요소로 시작하게 된다.)

예제

• 초기값은 0으로 하여 money의 값들을 누적한다.

a 에는 더해진 값들이 += 연산되어 누적되고

c에는 요소들이 인덱스 순서대로 호출되어 연산된다.

    result = money.reduce((a, c) => {
      console.log(a, c);
      return a + c;
    }, 0);

    console.log(result);

👉 결과적으로 result에 모두 누적된 값이 저장

---

🔹 객체 배열에서의 합산

• 객체 배열 생성

    let sumObj = [
      { x: 1, y: 10 },
      { a: 100, b: 200 },
      { q: 50, w: 30 },
    ];

• 초기값을 0으로 하고 객체 요소들의 값을 누적

    result = sumObj.reduce((a, c) => a + c.x + c.y, 0);

• 결과

    console.log(result);

👉 391 (누적된 값)

---

🔷 find

콜백함수가 참을 반환할 때 까지 배열을 순회하며 반환이 되면 중지하고

해당 요소를 반환한다.

조건에 맞는 요소가 없어 반환 하지 못할 경우 undefined를 반환한다.

🤔 filter와 다른점?

filter는 조건에 맞는 모든 요소를 다 가져오는 반면

find는 조건에 맞는 요소가 하나라도 생기면 그 하나만 가져온다.

예제

• 배열 생성

    const inventory = [
      { name: "apple", quantity: 10 },
      { name: "banana", quantity: 20 },
      { name: "grape", quantity: 30 },
      { name: "mango", quantity: 40 },
      { name: "melon", quantity: 50 },
    ];

• fruit라는 이름으로 객체를 받아와true 를 반환하면 바로 순회 종료
• fruit의 name 속성이 ‘melon’ 이라면 true 반환

    result = inventory.find((fruit) => fruit.name == "melon");

💡 객체 구조 분해를 사용해서 더 간편하게

    result = inventory.find(({ name }) => name == "melon");

👉 let {name} = inventory.객체 인 셈이다

---

🔷 forEach()

배열에 각 요소에 대해 제공된 콜백함수를 인덱스 순서로 한 번씩 호출한다.

🤔 map이랑 차이점이 뭘까?

forEach는 return 이 없어 undefined만 반환한다.

그렇기 때문에 실행을 하고 나서도 추가로 작업을 하는 것이 불가능하다.

그와 다르게 map은 반환 되는 값을 받아서 새로운 배열을 생성하여 할당할 수 있다.

❓ map에서 return 을 반환하지 않는다면?

    result = words.map((m) => {
      console.log(m);
    });

    console.log(result);

👉 각각의 요소가 출력은 되지만 빈 배열을 반환하게 되어 result는 빈 배열이 된다.

• forEach로 받아보면?

    result = words.forEach((m) => {
      console.log(m);
    });

    console.log(result);

👉 요소는 차례대로 출력 되며, result는 undefined 를 출력하게 된다.

🤔forEach는 언제 사용할까?

앞서 작업을 한 뒤 결과물을 출력하는 마무리 메서드로 주로 사용한다.

 

---

💡 상황별 메서드 정리

1. 새로운 값의 배열을 만들고 싶을 경우 ⇒ map

2. 조건에 만족하는 요소들로만 배열을 만들고 싶을 경우 ⇒ filter

3. 누적된 결과 값 딱 하나만 필요한 경우 ⇒ reduce

4. 조건에 만족하는 요소 딱 하나만 가져오고 종료 시키고 싶을 경우

⇒ find

5. 출력만 할 경우 ⇒ forEach