[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 34회차 미션

패스트캠프 프론트앤드 인강 34일차 자바스크립트의 연산자와 내장배열함수 foreach, reduce를 복습해보았다.

연산자

//대입연산자 =
//value안에 1을 넣겠다라는 뜻
let value = 1;

//산술연산자
//let a = 1 + 2 - (3 * 4);
// console.log(a)

let a = 1;
console.log(a++); //1
console.log(a); //2
console.log(++a); //3

console.log(a--)//3
console.log(a)//2
console.log(--a)//1

//대입연산자
a += 1;
console.log(a)//2
a *= 3;
console.log(a)//2*3 = 6

 

reduce

기존에 배운 내장함수로는 forEach가 있었다.

const hap = [1,2,3,4,5];
hap.forEach((a) => {
    console.log(a);    //1,2,3,4,5
})

이를통해 배열안에 합을구할수도 있다.

//foreach

let sum = 0;
const hap = [1,2,3,4,5];
hap.forEach((a) => {
    sum += a    
})
console.log(sum)

reduce내장함수를 이용하면 코드 한줄로 구현이 가능하다!

const hap = [1,2,3]
const sum = hap.reduce((accumulator, currentValue)=>
    accumulator+currentValue
,0)
console.log(sum)

reduce에서 평균을 구할수있는데 index와 array를 추가해보자.

const hap = [1,2,3]
const avg = hap.reduce((accumulator, currentValue, index, array)=>{
    if(index === array.length - 1){
        return (accumulator+currentValue)/array.length
    }else{
        return accumulator+currentValue;
    }
}, 0)
console.log(avg)

여기서 index는 currentValue를 받아올때 몇번째원소인지를 알려준다. 예를들면 hap에서 1을 가져올때는 0번째원소다 이런식으로. 0,1,2까지 실행된다.

array는 함수를 실행하고있는 자기자신을 의미한다([1,2,3]). array.length는 3임

어떤식으로 작동하나면

-초기값 0 부터시작한다.

-> acc = 0; cv = 1;으로 if문안에서 돌게되서 이때의 index는 0이고 array.length-1은 2이므로 일치하지않아 acc+cv=1이된다

-> acc = 1; cv = 2;으로 if문안에서 돌게되서 이때의  index는 0이고 array.length-1은 2이므로 일치하지않아 acc+cv=3이된다.

-> acc= 3; cv = 3;으로 if문안에 돌게되서 이때의 index는 2이고 array.length-1도 2이므로 일치하여 평균값을 계산하게된다 acc+cv/array.length는 6/3이므로 2이된다. 

기존것보다 약간 어렵기는하지만 제대로이해하면 다양한곳에서 써먹을수있다고한다.

예를들어 문자열의경우 reduce를 쓰게되면 각 알파벳의 숫자를 셀수가있는데

문자열이기때문에 초기값 0 대신에 {}을 적고

acc[current]에서

{}['a']의 경우 빈{}에 'a'가 없으므로 거짓이라 a=1

{'a'}['a']의 경우 참이라 1+1 인 a = 2

{'a','a'}['a']의 경우 참이라 2+1 인 a = 3 

 

https://bit.ly/31Cf1hp

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