map()에 if문

dregonc·2021년 8월 20일
1

map()에서 if문

리팩토링을 하면서 이전에 작성한 코드들을 보다보니 조건에 맞는 객체를 통해 새로운 컴포넌트를 반환하기 위해 map()안에서 if문을 사용한 코드들이 보였다.

const sample = [{name: "a", age: 22, role: "member", pay: 100},
		{name: "b", age: 25, role: "member", pay: 120},
                {name: "c", age: 30, role: "leader", pay: 130},
               ];
               
const result = sample.map(data => {
	if(data.role !== "leader")
    		return <div>{data.name}</div>;
    }
);

filter()

이런 경우 다음과 같이 filter()를 사용하면 더 깔끔해진다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.
filter()로 새로운 배열에서 map()을 통해 객체를 반환하면 더 깔끔한 코드가 된다.

const sample = [{name: "a", age: 22, role: "member", pay: 100},
		{name: "b", age: 25, role: "member", pay: 120},
                {name: "c", age: 30, role: "leader", pay: 130},
               ];
               
const result = sample.filter(data => data.role !== "leader")
	.map(data => {return <div>{data.name}</div>;};
);

2021.08.20 김승준

profile
매일 발전하는 사람

0개의 댓글