JavaScript : ES6 Array

배열은 JavaScript에서 가장 활용도가 높은 범용 객체
- ES6 이전부터 많은 메서드들이 추가되고 확장됨
- forEach : 배열의 개별 요소들을 추출하여 콜백 함수로 넘겨준다

function testForEach() {
    // forEach 메서드 : 배열의 요소를 하나씩 콜백에 전달
    let source = ['banana', 'orange', 'apple', 'mango'];
    console.log("----- for each")
    source.forEach(item => {
        // 콜백함수의 인자가 1개 : 개별요소
        console.log(item);
    })

    source.forEach((item, index) => {
        // 콜백함수의 인자가 2개 : 개별 요소, 배열 내의 인덱스
        console.log(`${index}번째 요소는 ${item}`);
    })

    source.forEach((item, index, arr) => {
        // 콜백 함수의 인자가 3개 : 개별요소, 인덱스, 배열 자체
        console.log(`배열 ${arr}의 ${index}번째 요소 ${item}`)

    })

}
testForEach();

----- for each
banana
orange
apple
mango
0번째 요소는 banana
1번째 요소는 orange
2번째 요소는 apple
3번째 요소는 mango
배열 banana,orange,apple,mango의 0번째 요소 banana
배열 banana,orange,apple,mango의 1번째 요소 orange
배열 banana,orange,apple,mango의 2번째 요소 apple
배열 banana,orange,apple,mango의 3번째 요소 mango

 

 

every, some

-특정 조건을 만족하는지 배열 내부 원소를 순회하면서 검사
- 조건에 만족하면 true, 아니면 false
- 배열 내부 원서의 값에 대해 검토가 필요한 경우 사용

 

- every : 배열 내부의 모든 원소가 조건을 만족하면 true
- some: 배열 내부의 요소 중 일부가 조건을 만족하면 true

function testEvery() {
    let data = [
        { name: '홍길동', age: 28 },
        { name: '장길산', age: 35 },
        { name: '전우치', age: 25 }
    ]
    // every : 모든 요소가 콜백 함수의 조건을 만족시킬때 true 반환

    let result = data.every(x => {
        return x.age > 25;
    });
    console.log('-----every : age>25', result)


}

function testSome() {
    let data = [
        { name: '홍길동', age: 28 },
        { name: '장길산', age: 35 },
        { name: '전우치', age: 25 }
    ]
    // some이나 any : 조건을 만족하는 데이터가 1개 이상 있을 때.
    let result = data.some(x => {
        return x.age > 25;
    })
    console.log('-----some : age>25', result)

}

 

filter 

- 배열의 요소들을 특정 조건을 기준으로 필터링하여 새로운 배열로 반환
- 배열에서 필요한 것만 남김

function testFilter() {
    console.log("====== Filter")
    let source = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    // source로 부터 짝수 요소만 필터링해보자.
    let result = [];
    // 기존방식
    for (let i = 0; i < source.length; i++) {
        //판별
        if (source[i] % 2 == 0) {
            result.push(source[i]);
        }
    }
    console.log('원본:', source);
    console.log('짝수 필터링:', result);

    // ex6 방식
    result = source.filter(item => item % 2 == 0);
    console.log('짝수 필터링:', result);
}

 

map 

- 배열의 요소들을 콜백함수에 전달하여 새로운 배열을 만듦
- 배열의 각 요소를 변형하는 역할을 수행

function testMap() {
    console.log("===== Map");
    let source = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    let result = [];

    // 모든 요소를 2배 한 배열을 만들어라
    // 기존방식
    for (let i = 0; i < source.length; i++) {
        result.push(source[i] * 2);
    }
    console.log("2배:", result);

    // ES6 방식
    result = source.map(item => item * 2);
    console.log("2배:", result);
}

reduce

- map이 배열의 각 요소를 변형한다면, reduce는 배열 자체를 변형함
- 일반적으로 배열을 값 하나로 줄인다

callback
- previousValue : 마지막 콜백에서 반환된 값(누계) or initialValue
- currentValue : 현재 처리되고 있는 배열의 요소
- currentIndex : 현재 처리되고 있는 요소의 인덱스
- array : reduce 호출에 사용되는 원 배열

function testReduce() {
    let source = [12, 4, 19, 33, 86];
    // callback
    // acc : 직전까지의 누산값
    // value :현재 요소의 값
    // idx : 현재 요소의 인덱스
    // arr : 누산에 사용되는 배열 자체
    let sum = source.reduce((acc, value, idx, arr) => {
        console.log(`이전 값은 ${acc}`);
        console.log(`${arr}의 ${idx}번째 요소는 ${value}`);
        // 직전 누산값와 현재 누산값을 연산하여 리턴
        return acc + value;
    }, 0); // 초깃값
    console.log('원본 : ', source);
    console.log('누계값(reduce):', sum);
}

map과 filter과 같은 함수형 메서드를 모두 reduce로 모두 구현할 수 있음

반복되는 모든 것에는 reduce를 쓸 수 있다는 점을 기억하자!

function testReduce2() {
    // map 함수를 reduce 함수로 시뮬레이션
    let source = [12, 4, 19, 33, 86];
    // 요소를 받아와서 짝수면 짝수, 홀수면 홀수
    // 내부 요소를 변경하라.
    let result = source.reduce((acc, value) => {
        console.log(`현재 누산기 : ${acc}`);
        console.log(`${value}는 ${value % 2 == 0 ? '홀수' : '짝수'}`)
        acc.push(value % 2 == 0 ? "짝수" : "홀수");
        return acc;
    }, []);
    console.log(result)
}

function filterMapReduce() {
    let source = [12, 7, 3, 8, 4, 9, 6, 2, 15, 14];
    /*
    source 배열에서 짝수만 필터링.
    내부 요소를 2배
    최종 합산
    */
    let result = source.filter(item => item % 2 == 0).map(item=>2*item).reduce((acc,value)=>{
        return acc+value;
    },0);
    console.log("결과 :", result);
}