카테고리 없음

배열의 함수형 메소드 3가지

yeji717 2022. 6. 6. 23:45

1) find

"find"는 배열 내에서 항목을 찾는 데 도움을 준다. 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다.

 

function findAvocado(currentFruit) {

    return currrentFruit === "avocado";

}

const fruits = ["apple", "banana", "watermelon", "avocado"];

const avocado = fruits.find(findAvocado);  // 필요한 파라미터가 하나, 그것은 콜백함수. 콜백함수는 우리가 호출하는게 아니라 그냥 함수의 이름만 적으면 된다.

console.log(avocado);

 

const avocado = fruits.find(

    findAvocado(apple)

    findAvocado(banana)

    findAvocado(watermelon)

    findAvocado(avocado)

);   결국 js가 하는 작업은 이렇게 된다!! 

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

저 함수에서의 true가 되는 조건은 "current fruit"이 'avocado'와 같으면 된다.

 

2) map

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

다시 말하자면 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

 

funciton double(currentNumber){

    return currentNumber * 2;

}   // 콜백함수는 항상 return 해야한다.

const source = [2,4,6,8,10];

const transformed = source.map(double);

 

=> const transformed = source.map(

    double(2),

    double(4),

    double(6),

    dobule(8),

    double(10)

);  이거와 같다!  그래서 결과는 [4,8,12,16,20] 이 된다.

 

3) arrow function (화살표 함수)

 

const source = [2,4,6,8,10];

const transformed = source.map((currentNumber) => currentNumber * 2);

 

const fruits = ["apple","banana","watermelon","avocado"];

const avocado = fruits.find((currentFruit) => currentFruit === "avocado");

 

화살표함수는 암묵적으로 return값을 가지고 있다.

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

 

4) filter

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

filter는 map 처럼 'source' 배열을 변형시키지 않는다. filter는 완전 새로운 배열을 만든다.

내가 원하지 않는 아이템을 제거한 상태로.  

 

const number = ["2","4","6","8","10"];

const fruits = foods.filter((currentFood) => currentFood !== "10");

=> 배열 중에 10이랑 같은 거는 새 배열에서 제거되고 나머지는 선택되어서 새 배열에 들어가게 된다.