[JS] 객체(+배열)의 내장 메서드

객체(+배열)이 가진 메서드 중에는 find, filter,map 이 있다고 했다.

find

find는 테스트 함수 조건에 맞는 첫번째 요소를 반환한다.

let numbers2=[1,2,3,4,5];
let result = numbers1.find((item)=>(item%2==0)); //2만 나온다.

참고로 find 안에는 이미 forEach 함수가 내장되어 있으며, 선언형으로 만들 경우 다음과 같이 만들어볼 수 있다.

let result = numbers1.find(function(item){if(item%2==0) return item;});

하지만, 객체 내 '여러 객체'들을 찾아야 하는 경우, find는 제 기능을 할 수 없다.
말 그대로 조건을 만족하는 첫번째 객체만 반환하기 때문!

filter

그래서 filter를 쓴다.
filter는 조건에 맞는 요소를 추려 새로운 배열 객체로 반환한다.
즉, 하나의 요소가 아니라 여러 요소들을 찾고 싶은 경우, filter을 사용한다.

let result = numbers1.filter((number)=>{number%2==0});

얘 역시도 forEach가 이미 내장되어있다.
다만 조건을 만족하는 모든 객체를 새로운 객체로 만들어 반환시키는 것이 차이다.

map

만약에 원본 배열을 변경하고 싶다면!
배열 내부 요소를 반복을 통해 접근 + 새로운 배열 객체를 반환

foreach VS map

forEach는 배열 내부 요소를 반복을 통해 접근
map은 배열 내부 요소를 반복을 통해 접근 + 새로운 배열 객체를 변환

reduce

수학적인 의미는 reduce로, '누적'을 위해 사용하는 함수다.
reduce는 파라미터가 4개 있지만, 실질적으로 사용하는 파라미터는 2개다.

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

let sumResult = reduceArray.reduce((a,b,c,d)=>{
  			//반복횟수: 배열의 인덱스만큼(5회)
            console.log("a: "+a); // 누적된 결과값을 낼 수 있는 변수(accumulator)
            console.log("b: "+b); //수행되고 있는 value의 값 (current Value)
            console.log("c: "+c); //현재 반복되어서 수행되고 있는 index number
            console.log("d: "+d); //reduce에서 실행되는 원본 배열 자체
            return a + b; //여태까지 누적된 값을 반환한다.
        }, 0); //누적을 시작할 초기값을 입력한다.

실질적으로는 '누적값'을 반환하기 위해 a,b만 사용되는 것을 알 수 있다.
그래서 일반적으로는

let sumResult = reduceArray.reduce((sum,cur)=>{return cur},0);

로 사용된다.

하지만 화살표 함수의 경우, 한 줄 짜리 코드일 경우 return을 생략,코드 블럭도 생략할 수 있다!

//축약형
let sumResult = reduceArray.reduce((sum,cur)=>cur,0);

이런 축약형이 현업에서 더 사용된다!
참고로 두번째 인자는 프로퍼티 단위가 아니라, 객체 단위로 가져와야한다.

만약에 items의 price총합을 구하고 싶다면?

let items = [
            {
                name: "icecream",
                price: 2000
            },
            {
                name: "snack",
                price: 1500
            },
            {
                name: "macaron",
                price: 1700
            }
        ];
//BAD
//const res = items.reduce((sum,cur.price)=>{return sum+cur.price;},0);

//GOOD
const res = items.reduce((sum,cur)=>{return sum+cur.price;},0);
console.log(res);

윗 코드처럼, 객체 단위로 인자를 받되, return 시 인자의 프로퍼티를 사용하면 된다!