TIL-70 가독성이 올라가는 메서드

PRB·2022년 6월 26일
0

React

목록 보기
22/22
post-thumbnail

리액트를 사용하다 보면 다양한 메서드를 사용할 때가 있다.
예를 들면 배열을 받아서 map으로 뿌려준다던가 필터를 구현할 때 fiflter를 사용하던가 처음에는 상당 부분을 map,fiflter 로만 구현을 했는데 가독성, 의미적으로 부족하다는 피드백을 받아서 every, find, map, some, filter 이 정도만 잘 쓸 수 있다면 리액트를 하면서 거의 다 커버가 가능하다고 하셨다.

1.every

every() 메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트하고 Boolean 값을 반환한다.

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true

2.some

some() 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트한다.

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

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true

3.find

find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환하고 그런 요소가 없다면 undefined를 반환한다.

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

4.map

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

5.filter

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

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

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

출처 https://developer.mozilla.org/ko/

profile
사용자 입장에서 사용자가 원하는 것을 개발하는 프론트엔드 개발자입니다.

0개의 댓글