Javascript - Map vs filter

모든 코드에 의미를 담겠습니다.

MAP VS FILTER 기능

map은 javascript에서 for문을 대체하여 실무에서 많이 쓰이는 기능이다.

배열을 받으면 배열안에 있는 요소들을 한번씩 찾으면서 원하는 return 값을 반환한다.

예를 들어보자.

const classmates = [
  {name: "철수", age:13},
  {name: "영희", age:10},
  {name: "맹구", age:14}
  ]

classmates.map((data) => ({name : data.name, age: data.age, school: "맹구초등학교"})  //배열안에있는 객체를 한번씩 돌면서 school이라는 key값과 맹구초등학교라는 value를 저장하였다.

여기서 볼점!

map안에는 () => {return } 함수가 들어가는데 return 문 위에 아무런 javascript 문법이 들어가지않는다면

classmates.map((data) => ()) 이렇게도 사용가능하다.

또한 만약에 한줄로 return값을 쓰게된다면,

classmates.map((data)) => ) 소괄호 없이도 사용이 가능하다.

실무예제)

 const fruits = [
        {number: 1, title: "레드향"},
        {number: 2, title: "샤인머스켓"},
        {number: 3, title: "산청딸기"},
        {number: 4, title: "한라봉"},
        {number: 5, title: "사과"},
        {number: 6, title: "애플망고"},
        {number: 7, title: "딸기"},
        {number: 8, title: "천혜향"},
        {number: 9, title: "과일선물세트"},
        {number: 10, title: "귤"},
    ]
 
 
 fruits.map((data) => (
            <Wrapper>
                <RankingBold>{data.number}</RankingBold>
                <Title>{data.title}</Title>
            </Wrapper>
        ))

그렇다면 Filter의 기능은 무엇일까???

말 그대로 걸러주는 기능이다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6); //word의 길이가 6이상인 값만 다 반환

그래서 map 과 filter를 자주같이 쓴다. 가령 받은 데이터들을 한번 filter하고 filter된 데이터들을 map으로 돌려서 원하는 html을 뿌려주는 형태로 진행을 한다.

Map vs foreach

둘다 비슷한 기능같다! 배열의 요소들을 한번씩 돌면서 원하는 값을 실행시켜주는데...

두 차이는 Map같은 경우는 배열로 만들어서 return값을 주는것이고 forEach문은 함수를 실행시켜주기만 한다.

classmates = ["철수","영희", "맹구"]

classmates.map((el) => el + "어린이") // ["철수어린이", "영희어린이", "맹구어린이"]

classmates.forEach((el) => {
  	el + "어린이"
}) //undefined가 나온다. 만약에 함수가 실행된 결과값을 보고싶다면 console.log(el + "어린이")를 선언문안에 적어주면된다.

forEach문은 실행 결과값이 필요없을 때 실무에서 많이쓴다고 한다. 그러므로, Map 과 forEach문 활용 때를 잘파악해서 쓰는것이 좋겠다.