❗ 내장 고차 함수
JS 에는 기본적으로 내장된 고차함수가 있다. 그중 배열 메서드가 대표적 고차함수인데, 대표적인
forEach,filter,map,reduce를 알아보자
const fruits = [
{name : 'banana' , season : 'summer' , size : 5},
{name : 'apple' , season : 'spring' , size : 4},
{name : 'orange' , season : 'winter' , size : 3},
{name : 'watermelon' , season : 'summer' , size : 8}
];🔊 forEach
- for문 대신 사용할수있다.
- 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백함수를 실행
- 배열의 모든 요소를 순회하며 중간에 순회를 중단할 수 없다.
breakX - for 문보다 가독성이 좋고 간단하다.
fruits.forEach(function(item){
console.log(item['name'])
} // 'banana','apple','orange','watermelon'
// 화살표 함수를 쓰는 이유
anlimals.forEach((name) => console.log(name));
//'banana','apple','orange','watermelon'🔊 filter
이해하기: 배열의 각 요소가 특정 논리(함수)에 따르면, 사실(true)일 때 따로 분류한다(filter).
- if문 대신 사용할 수 있다.
- 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백함수의 실행 결과가 true인 배열 요소의 값만을 추출한 새로운 배열을 반환한다.
- 배열에서 특정 케이스만 필터링 조건으로 추출하여 새로운 배열을 만들고 싶을 때 사용한다. 이때 원본 배열은 변경되지 않는다.
const trend = fruits.filter(function(item){
return item['season'] === 'winter';
});
console.log(trend); // {name : 'orange' , season : 'winter' , size : 3
// arrow function
const trend = fruits.filter(item => item['season'] === 'spring');
console.log(trend); // {name : 'apple' , season : 'spring' , size : 4}🔊 map
이해하기: 배열의 각 요소가특정 논리(함수)에 의해 다른 요소로 지정(map) 된다.
-
배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백 함수의 반환값(결과값)으로 새로운 배열을 생성하여 반환한다. 이때 원본 배열은 변경되지 않는다.
-
forEach 메소드는 배열을 순회하며 요소 값을 참조하여 무언가를 하기 위한 함수이며 map 메소드는 배열을 순회하며 요소 값을 다른 값으로 맵핑하기 위한 함수이다.
fruits.map(function(item){
return item['size'] = 2;
}); // {name : 'banana' , season : 'summer' , size : 2}
// {name : 'apple' , season : 'spring' , size : 2}
// {name : 'orange' , season : 'winter' , size : 2}
// {name : 'watermelon' , season : 'summer' , size : 2}
// arrow function
const newNumber = fruits.map(item => item['size'] = 2);
// 위와같음🔊 reduce
이해하기 : 배열의 각 요소를 특정 방법(함수)에 따라 원하는 하나의 형태로 응축한다. (reduction)
- 배열을 순회하며 각 요소에 대하여 이전의 콜백함수 실행 반환값을 전달하여 콜백함수를 실행하고 그 결과를 반환한다.
.reduce( 누적값, 시작할값, 초기값) // 누적값은 쌓이는 값이다 초반 초기값을 설정해주지 않으면
// 배열의 첫번째 요소가 초기값으로 되어 응축값에 들어가고 다음값부터 시작한다.순서:
1. 초기값을 생략해서 배열의 1이 acc로 들어간다.
2. 다음값인 배열의 2가 cur에 할당되어 1 + 2 // 3 된다.
3. 더한 3이 acc로 할당되고 다음값인 4가 cur로 들어가고 5 까지 반복하여 15 가 나온다.
ex)
arr = [1,2,3,4,5]
arr.reduce( (acc, cur) => acc + cur); //15배열의 요소가 객체의 경우
0으로 초기값을 설정해 주지 않으면 초기값에 객체 자체가 들어간다 그럼 이상한 계산이 되니
초기값을 설정해 줘야 한다.
fruits.reduce(function(acc,cur){
return acc + cur.size
},0); // 20
// arrow function
const sizeTotal = fruits.reduce((acc,cur) => acc + cur['size'],0);
// 20 reduce처럼 위에 매개변수 2개일경우 괄호 꼭쳐준다.🔊 sort
배열을 정렬한다 오름,내림, 문자열 등등
오름
`
Run Start 🔥