JS - const, let, 즉시 실행 함수

이호현·2020년 8월 4일
0

JS

목록 보기
4/14

1. const

일반적으로 상수로 변수를 선언할 때 사용한다.
const는 할당된 값의 바인딩 변경을 못하게 막는것이지
바인딩 된 값의 변경을 막는 것이 아니다.

const num = 0;

num = 1;			// 에러

const 변수에 객체가 할당되면 객체 내부값은 '.'으로 접근해서 변경할 수 있다.
변수 자체에 변경할 객체를 넣으면 에러가 난다.

const obj = {
    id: 1
};

console.log(obj);

obj.id = 2;

console.log(obj);

// { id: 1 }
// { id: 2 }
const obj = {
    id: 1
};

console.log(obj);

obj = {				// 에러
    id: 2
};

console.log(obj);

// { id: 1 }

2. let

const와 다르게 할당된 값을 변경할 수 있다.

let num = 0;

console.log(num);

num = 1;

console.log(num);

// 0
// 1

3. 즉시 실행 함수

var funcs = [];

for(var i = 0; i < 5; i++){
    funcs.push(function(){
        console.log(i);
    });
}

funcs.forEach(function(func){
    func();
})
// 5
// 5
// 5
// 5
// 5

i가 var로 선언되면서 호이스팅이 되면서 전역 변수가 된다.
for를 빠져나오면 i에는 5가 저장되는데 funcs 배열요소에 저장된 함수를 호출할때마다
i를 참조하기 때문에 전부 5가 출력된다.

var funcs = [];

for(var i = 0; i < 5; i++){
    funcs.push((function(value){
        return function(){
            console.log(value);
        }
    }(i)));
}

funcs.forEach(function(func){
    func();
})
// 0
// 1
// 2
// 3
// 4

반면 즉시 호출 함수를 사용하면 i가 바뀔때마다
i값을 참조하기때문에 순차적으로 변하는 값이 출력된다.
즉시 호출 함수가 i를 value로 받아서 내부에서 처리한다.

var funcs = [];

for(let i = 0; i < 5; i++){
    funcs.push(function(){
        console.log(i);
    });
}

funcs.forEach(function(func){
    func();
})
// 0
// 1
// 2
// 3
// 4

var 대신 let을 이용해 i를 선언하면 반복문 실행마다
새로운 변수 i를 선언해서 사용하는것과 같은 효과가 생긴다.
그래서 {}안에서 선언된 i를 선언된 값 그대로 사용할 수 있다.
for-in, for-of 문에서도 같은 방식으로 적용된다.

var funcs = [];

for(const i = 0; i < 5; i++){
    funcs.push(function(){
        console.log(i);
    });
}

funcs.forEach(function(func){
    func();
})

위와 같이 const로 i를 선언하는 경우는 i가 0일때 한번 작동하지만
i++에서 에러가 발생한다.

profile
평생 개발자로 살고싶습니다

0개의 댓글