JavaScript에서 메서드 체인 형성하기
지금까지 배운 모든 유용한 배열 메서드를 결합하는 방법을 이해하는 것이 중요합니다. map()과 reduce() 를 예로 들어 보겠습니다.
const originalArray = [{price: 10.99}, {price: 5.99}, {price: 29.99}];
const transformedArray = originalArray.map(obj => obj.price); // produces [10.99, 5.99, 29.99]
const sum = transformedArray.reduce((sumVal, curVal) => sumVal + curVal, 0); // => 46.97
물론 map 단계를 건너뛰고 추출 로직을 reduce()에 추가하셔도 됩니다.
const originalArray = [{price: 10.99}, {price: 5.99}, {price: 29.99}];
const sum = originalArray.reduce((sumVal, curVal) => sumVal + curVal.price, 0); // => 46.97
하지만 더 복잡한 추출 논리가 있어, 여러 개의 메서드 호출로 분할하려고 한다고 해보겠습니다. 또는 애플리케이션의 여러 다른 위치에서 재사용 가능한 map 함수가 있다고 해보죠. 그러면 메서드 체인을 활용하면 첫 번째 예제를 더 간결하게 작성할 수 있습니다.
const originalArray = [{price: 10.99}, {price: 5.99}, {price: 29.99}];
const sum = originalArray.map(obj => obj.price)
.reduce((sumVal, curVal) => sumVal + curVal, 0); // => 46.97
map() 의 결과에서 직접 .reduce() 를 호출합니다(배열을 생성하므로 이를 가능하게 합니다). 따라서 매핑된 배열을 다른 곳에서는 필요하지 않은 상수나 변수에 별도로 저장하지 않을 수 있습니다.
// console.log(numbers.length);
// console.log(fruits.length);
// console.log([1,2].length);
// console.log([].length);
//.concat
//원본의 수정이 없이 새로운 배열을 반환
// console.log(numbers.concat(fruits));
// console.log(numbers);
// console.log(fruits);
//for Each()
//배열갯수 콜백함수 반환
//아이템이 3개있으니깐 세번 실행된것 !
// fruits.forEach(function(fruit,i){
// console.log(fruit,i);
// })
//map()
// const a=fruits.forEach((fruit,index)=>{
// console.log(${fruit}-${index})
// })
// console.log(a);
// // map은 내부콜백에서 반환된 데이터를 기준으로
// //새로운 배열을 반환
// const b=fruits.map((fruit,index)=>({
// id:index,
// name:fruit
// }))
// console.log(b);
const numbers=[1,2,3,4];
const fruits=['Apple','Banana','Cherry'];
// const a=numbers.map(number=>number<3)
// console.log(a);
// const b=numbers.filter(number=>number<3)
// console.log(b);
// //map,filter 는 원본에 영향x
// console.log(numbers);
//.find() .findIndex()
// const a=fruits.find(fruit=>/^C/.test(fruit)
// )
// console.log(a);
// const b=fruits.findIndex(fruit=> /^C/.test(fruit))
// console.log(b);
//.includes()
// const a=numbers.includes(3); //숫자데이터 3이 포함되어있냐? true
// console.log(a);
// const b=fruits.includes("HEROPY"); //false
// console.log(b);
//push. unshift
// //원본 수정됨 주의
// numbers.push(5); //맨뒤
// console.log(numbers);
// numbers.unshift(0) //맨앞
// console.log(numbers);
// //reverse()
// //원본 수정됨 주의
// numbers.reverse();
// fruits.reverse()
// console.log(numbers);
// console.log(fruits);
//splice
//원본 수정됨주의
numbers.splice(2,2); //인덱스 번호 2번부터 2개를 지워라!
console.log(numbers);
