[JS] reduce() 와 filter() ,slice()

⭐️ reduce()

reduce()는 배열의 각 요소에 대하여 지정한 콜백 함수를 실행하면서 하나의 누적된 결과값을 반환하는 메서드입니다. 주로 배열에서 조건을 통과한 값을 합치거나 , 모든 요소를 하나의 값으로 합칠 때 사용됩니다.

const data = [
    "car",
    "car",
    "truck",
    "truck",
    "bike",
    "walk",
    "car",
    "van",
    "bike",
    "walk",
    "car",
    "van",
    "car",
    "truck",
];
const vehicles = data.reduce((acc, cur) => {
    if (!acc[cur]) {
        acc[cur] = 0;
    }
    acc[cur]++;
    return acc;
}, {}); // initialValue에 빈 객체 ({}) 를 넣어주어 , acc는 {}로 초기화된 후 시작
console.log(vehicles);

// { car: 5, truck: 3, bike: 2, walk: 2, van: 2 }

❓만약 reduce() 함수 호출에서 initialValue를 제공한 경우, accumulator는 initialValue와 같고 currentValue는 배열의 첫 번째 값과 같습니다. initialValue를 제공하지 않았다면, accumulator는 배열의 첫 번째 값과 같고 currentValue는 두 번째와 같습니다.

⭐️ filter()

filter()는 배열의 요소들을 각각 순회하여 주어진 조건을 만족하는 값들을 얕은 복사본으로 반환하는 메소드입니다. 희소 배열의 빈 슬롯에 대해서는 실행되지 않습니다.

const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter((word) => word.length > 6);

console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]

❓얕은 복사(shallow copy)란 무엇인가요 ?
얕은 복사는 참조 타입 데이터(ex 배열 , 객체, 함수 등)가 저장한 '메모리 주소 값'을 복사한 것을 의미합니다.
따라서 얕은 복사로 복사된 이후 , 복사된 변수 값을 변경하면 원본 배열의 값도 변경됩니다. (부수 효과)
출처 : https://cocobi.tistory.com/156

const arr = [
    { name: "bob", age: "23" },
    { name: "john", age: "27" },
];

const filterArr = arr.filter((el) => {
    return el.age > 25;
});


filterArr[0].name = "kimg";
console.log(filterArr);
//원본 배열이 변경됩니다.
console.log(arr);
//[ { name: 'kimg', age: '27' } ]
[ { name: 'bob', age: '23' }, { name: 'kimg', age: '27' } ]

⭐️ slice()

slice() 메서드는 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환하며 , 원본 배열은 바뀌지 않습니다.

slice() 메서드 또한 얕은 복사로 배열을 복사합니다. 즉 , 복사 이후 복사본 혹은 원본 배열을 복사하면 해당 메모리를 참조하는 모든 객체의 값이 함께 변경됩니다.