[패스트캠퍼스] 프론트엔드 인강 환급 챌린지(3) JavaScript - 배열 내장함수 shift, pop, push, unshift, reduce

수강한 클립명

(1) 26. 배열 내장 함수 - shift, pop, unshift, push

(2) 27. 배열 내장 함수 - reduce

(3) 28. 배열 내장 함수 - reduce 다른 예시

 

shift, pop, unshift, push

- shift()

첫 번째 원소를 배열에서 추출합니다. shift()는 기존의 배열을 수정합니다.

즉, 맨 앞의 원소를 바닥날때까지 하나씩 추출합니다. 다 추출했으면 빈 배열을 반환합니다.

 

- unshift()

특정 원소를 첫 번째 인덱스 배열[0]에 추가합니다. unshift()는 기존의 배열을 수정합니다.

 

- pop()

마지막 원소를 배열에서 추출합니다. pop()은 기존의 배열을 수정합니다.

즉, 맨 뒤의 원소를 바닥날때까지 하나씩 추출합니다. 다 추출했으면 빈 배열을 반환합니다.

 

- push()

특정 원소를 마지막 인덱스 배열에 추가합니다. push()는 기존의 배열을 수정합니다.

// shift()
const numbers = [10, 20, 30, 40];

const value = numbers.shift();

console.log(value);
// 10 출력.

console.log(numbers);
// [20, 30, 40] 출력.



// unshift()
const numbers = [10, 20, 30, 40];

numbers.unshift(5);

console.log(numbers);
// [5, 10, 20, 30, 40] 출력.



// pop()
const numbers = [10, 20, 30, 40];

const value = numbers.pop();

console.log(value);
// 40 출력.

console.log(numbers);
// [10, 20, 30] 출력.



// push()
const numbers = [10, 20, 30, 40];

numbers.push(50);

console.log(numbers);
// [10, 20, 30, 40, 50] 출력.

 

 

reduce

배열 안의 모든 원소들을 활용하여 연산을 할 때 사용합니다. 

 

인자로는 4개가 있습니다.

1. accumulator : 누적된 값

2. current : 배열 안의 각 원소들을 가리킵니다.

3. index : 배열 안의 각 원소가 몇 번째 인덱스인지 알려줍니다.

4. array : 함수를 실행하고 있는 배열 자기 자신을 의미합니다. 

 

const numbers = [1,2,3,4,5];

const sum = numbers.reduce((accumulator, current) => 
                          accumulator + current, 0);
// 0은 accmulator의 초기값이다. 

console.log(sum);
// 15 출력


const avg = numbers.reduce((accumulator, current, index, array) => {
    if(index == array.length-1) {
        return (accumulator + current) / array.length;
    }
    return accumulator + current;
}, 0);

// 마지막 인덱스 전 까지는 그냥 더하고 마지막 인덱스에는 더하고 배열의 길이 만큼 나눠준다.
// 즉, 평균을 구할 수 있다.

console.log(avg);
// 3 출력.

간단하게 동작 방법을 설명하자면, 

 

- sum (합)

accumulator는 간단하게 acc, current는 cur이라고 명칭하겠습니다. 

acc : 0 , cur : 1 =>  (acc = 1)

acc : 1 , cur : 2 =>  (acc = 3)

acc : 3 , cur : 3 =>  (acc = 6)

acc : 6 , cur : 4 =>  (acc = 10)

acc : 10 , cur : 5 => (acc = 15)    // 반환.

이러한 순서로 cur이 마지막 원소인 5에 다다르는 순간 acc는 15를 갖게 되고 모든 원소를 순환했으므로,

최종적으로 acc는 15를 반환하게 됩니다. 

 

- avg (평균)

네 번째 인자인 array에는 현재 배열인 numbers가 속하게 됩니다. 그리고 numbers 배열의 길이는 5이고 

마지막 원소를 나타내는 인덱스는 4입니다. 

 

즉, 마지막 인덱스 전까지는 sum의 동작방식과 같지만 마지막 인덱스를 호출할 때에는 마지막 인덱스를 

더하고 최종 더한 값에 numbers 배열의 길이를 나눠주게 됩니다. 이 값이 곧 평균 값이 됩니다.

 

 

 

reduce 다른 예시

숫자가 아닌 다른 자료형으로 reduce 예시를 들어보겠습니다. 

 

const alphabets = ['a', 'a', 'a', 'b', 'c', 'c', 'd', 'e'];

const counts = alphabets.reduce( (acc, cur) => {

    // acc배열 안에 해당 원소가 있는지 확인 한다.
    // acc['a'] 혹은 acc.a와 같음
    if(acc[cur]) {
        acc[cur] += 1;
    }
    
    // 초기 acc는 빈 배열이므로 해당 원소가 존재하지 않는다면 acc[cur]에 1이 들어간다.
    else {
        acc[cur] = 1;
    }
    
    return acc;

}, {});
// acc 초기값으로 빈 객체{}를 넣어준다


console.log(counts);

// Object {a: 3, b: 1, c: 2, d: 1, e: 1}가 출력된다.

간단하게 설명 드리자면, 주석과 같습니다. 

 

결론부터 말씀드리면 위 코드는 alphabets 배열 안에 들어있는 알파벳 원소들이 각각 몇 개를 갖고있는지 세는 

코드입니다. 그리고 그 결과를 counts 변수에 넣어 저장하게 되는 것입니다. 

 

초기에 acc는 빈 객체이므로 처음에 들어오는 원소인 'a'는 존재하지 않으므로 acc['a']에 1의 값이 들어갑니다. 

그 이후에 들어오는 'a'는 acc['a']가 이제 빈 값이 아니니까 원래 있던 값에 +1을 하게 됩니다. 

 

마찬가지로 또 이후에 들어오는 'b', 'c', 'd' ,'e' 또한, 기존에 acc[cur]이 존재한다면 +1, 존재하지 않는다면 

1의 값을 넣어주게 됩니다. 

 

 

강의 링크

 

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스 (fastcampus.co.kr)

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스