배열 함수형 메서드 3가지

2024. 4. 3. 15:02기타

728x90
반응형

https://www.youtube.com/watch?v=N7xZRJJ8Thc

.find

find 는 배열 내에서 항목을 찾는데 도움을 줍니다.

function findapple(apple) {
  return apple === "사과";
}
const fruits = ["배", "포도", "바나나"];
const apple = fruits.find(findapple);
console.log(apple);

 

필요한 파라미터는 하나뿐이다.

그것은 바로 콜백함수

 

.find 의 규칙은 콜백 함수가 "true"를 반환하는 경우 우리가 찾고있던 항목을 찾았음을 의미한다.

 

.map

map을 사용하면 배열의 요소를 가져와 변환한 다음 새 배열에 배치할 수 있습니다.

function double(currentNumber) {
  return currentNumber * 2;
}
const source = [2, 4, 6, 8, 10];
const transformed = source.map(double);
console.log(transformed)

 

.find 에서 본 것처럼 콜백함수는 배열의 각 항목에 대해 호출되고 첫 번째 인수는 현재 처리중인 항목이 됩니다.

.map의 규칙은 콜백 함수에 의해 반환되는 값이 새 배열에 있는 값이 됩니다.

현재 콜백 함수는 배열의 각각 숫자를 받고 있습니다.

 

 

Arrow Function

arrow function 을 사용하면 find 및 map 예제를 이렇게 수정할 수 있다.

const source = [2, 4, 6, 8, 10];
const transformed = source.map((currentNumber) => currentNumber * 2);
const fruits = ["배", "포도", "바나나", "사과"];
const apple = fruits.find((currentNumber) => currentNumber === "사과");

 

첫 번째 부분에 인수를 쓰고 화살표 뒤에 값을 반환하면 됩니다.

반환하기 위해 return 키워드가 필요하지도 않습니다.

 

 

filter

.filter 를 사용하면 배열에서 항목을 제거 할 수 있습니다.

.filter 는 map처럼 source배열을 변형시키지 않습니다.

.filter 는 오나전 새로운 배열을 만들어줍니다.

 

const foods = ["배", "포도", "바나나", "사과"];
const apple = fruits.find((currentNumber) => currentNumber !== "사과");

 

true를 반환하면 항목이 새 배열로 이동하고 false를 반환하면 해당항목을 새 벼열에서 제거 됩니다.

'기타' 카테고리의 다른 글

JavaScript Immutability  (0) 2024.04.15
인치의 불변성  (0) 2024.04.15
자바스크립트 객체, 구조분해할당  (0) 2024.04.03
셀렉터 selector  (0) 2024.04.03
개발 실력 수직상승을 위한 필수 역량  (0) 2024.04.02