개발 도구 (Development Tools)/JavaScript

[JavaScript] 배열의 값들을 더하는 방법

BiCute 2023. 1. 5. 08:00
반응형

 

 

# Reduce

const data = ['1', '3', '5', '7', '9'];

function useReduce() {
    const sum = data.reduce((acc, element) => acc + parseInt(element), 0);
    console.log('reduce() = ', sum);
}

useReduce() // "reduce() = " 25

동작 방식
reduce() 메서드는 데이터 배열의 각 요소에 대해 reducer 함수를 호출하는데,

첫 번째 반복에서 acc는 초기값 0으로 설정되고 element는 데이터 배열의 첫 번째 요소인 '1'로 이 들어옵니다.

reducer 함수는 parseInt()를 호출하여 요소를 숫자로 변환하고 현재 0인 acc에 더합니다.

Reduce에서는 이 연산의 결과가 다음 반복시 새로운 acc의 값이 됩니다.

reduce() 가 다시 반복될 때 새로운 acc의 값을 첫번째 인수로 사용하고 배열의 두 번째 요소를 두 번째 인수로 사용하여 다시 reducer 함수를 다시 호출합니다. 

이 방식으로 배열의 모든 요소가 처리될 때까지 계속 반복됩니다.

 

즉 acc는 데이터가 계속 반복되면서 요소의 합계인 누적값이 되며, acc의 최종값을 반환합니다.

 

 

 

# for of

const data = ['1', '3', '5', '7', '9'];

function useForOf() {
    let sum = 0;
    for (const element of data) {
        sum += parseInt(element);
    }
    console.log('forOf() = ', sum);
}

useForOf();  // "forOf() = " 25

동작 방식

for...of 는 배열의 각 요소에 새로운 변수를 선언하고 데이터 배열의 요소를 반복하게 됩니다.
각 반복에서 요소 변수는 배열의 현재 요소로 설정되고 루프 본문이 실행됩니다.

 

아래의 예에서는 data라는 배열의 각 요소를 element라는 이름으로 불러오게되며,

첫번째 반복의 element는 '1'을, 두번째 반복의 element는 '3'의 값을 갖고 있습니다.

반복을 하며 parseInt()를 호출하여 요소를 숫자로 변환하고 sum 변수에 추가합니다.

배열의 모든 요소가 처리될 때까지 반복되며 sum 변수에 더해지게 됩니다.

 

 

 

# for

const data = ['1', '3', '5', '7', '9'];

function useForLoop() {
    let sum = 0;
    for (let i = 0; i < data.length; i++) {
        sum += parseInt(data[i]);
    }
    console.log('for() = ', sum);
}

useForLoop();  // "for() = " 25

동작 방식

for 반복문은 새로운 변수 i 를 선언하고 0으로 설정합니다.

반복은 i가 데이터 배열의 길이(length)보다 작은지 확인하고, 조건이 true이라면 반복문이 실행됩니다. 

 

반복되는 함수 내부에서 데이터 배열의 인덱스 i에 있는 요소를 호출하고 sum 변수에 추가합니다.

내부 명령이 실행된후 마지막으로 i의 값은 1씩 증가합니다.

 

이 반복은 조건이 false가 나올 때까지(i가 데이터 배열의 길이보다 작지 않을때까지) 계속 반복되기 때문에, 배열의 길이만큼 반복됩니다.

 

 

 

반응형