본문 바로가기
Programming Languages/Javascript

Const, Var, Let

by Calvin H. 2022. 5. 30.

오늘은 변수와 관련된 세 가지 종류에 대해서 배웠다.

 

선결론 : let을 사용하자

 

물론 경우마다 다른 타입을 사용하는 것은 매우 중요하다.

이 3가지가 어떻게 다른지 알기 위해서는 스코프라는 것이 매우 중요하다.

 

전역과 지역이라고 나뉘는 scope에는 함수와 코드 블럭으로 나뉘어지기도 한다.

 

가령 예를 들어:

 

let name = "James";

function logName() {
	let name = "Smith";
    console.log(name)
}
console.log(name);
logName();
console.log(name);

 

 

이렇게 적으면 결과는 "James", "Smith", "James"가 된다

 

그 이유는 "James"는 전역 변수로 선언이 되어서 첫 console.log(name)에서 사용이 되고

logName()함수를 불러왔을 때에는 코드 블럭, 즉 중괄호 " {} " 안에 있는 let은 전역 변수와 전혀 관계없는 변수이기 때문에 이 경우에 같은 변수 이름으로 선언을 할 수 있는 거다. 그렇게 선언 했을 때 함수는 "Smith"라는 결과를 낸다.

마지막으로 console.log(name)을 다시 실행했을 때, 함수 내에 있는 "Smith"는 지역 변수이므로 코드 블럭 밖으로 나가지 못한다.

그럼으로 다시 "James" 가 출력이 된다.

 

하지만 만약에 아래와 같이 코드를 작성한다면 얘기는 조금 달라진다.

 

let name = "James";

function logName() {
    name = "Smith";
    console.log(name)
}
console.log(name);
logName();
console.log(name);

 

이 경우에는 새로운 지역 변수를 let을 통해 선언하지 않아서 name은  전역 변수인 "James" 를 바꾼다.

즉, 위와 같은 코드에서 결과는 결국 "James", "Smith", "Smith"가 나온다.

 

이렇게 코드 블럭 내에서 let은 한정되어 있는 반면에 var는 함수 scope전체와 관련이 되어 있다.

그렇기 때문에 만약에 아래처럼 코드가 작성되어 있으면

 

function printToFive() {
	let five =  5;

    if (five === 5) {
        let greeting =  "hi";
    }
    return greeting + five
}

 

이 경우에는 printToFive()를 실행했을 때

 

 

ReferenceError

 

가 생긴다

 

이를 만약에 let이 아닌 var 을 사용한다면

 

function printToFive() {
	var five =  5;

    if (five === 5) {
        var greeting =  "hi";
    }
    return greeting + five
}

 

"hi5"

 

값이 되돌려진다. 그 이유는 아까 말했듯이 var는 scope가 함수이고 let은 코드블럭이기 때문이다.

 

마지막으로 Const는 let과 비슷하지만 조금 다른데,

let과 const는 둘  다 재선언을 할 수가 없고 범위는 코드블럭이라는 면에서는 동일하지만  let에서는 위에 예시처럼 새로운 값을 지정할 수 있지만 const는 한번 지정된 값을 바꿀 수 없다.

 

 

const pi = 3.14159

 

 

후에

 

 

pi = 3.14

 

 

를 적으면

 

 

TypeError

 

 

라고 뜨게 된다. 이 오류는 const라는 변수 타입이 값을 재설정할 수가 없기 때문에 발생한다.

 

아무튼, 오늘은 내가 이해한 scope와 관련된 것들을 배운 걸 정리해봤는데 도움이 됐길 바란다.

'Programming Languages > Javascript' 카테고리의 다른 글

비동기적 호출 - [setTimeout, setInterval]  (0) 2022.05.30
super()를 이용한 class 상속 방법 (ES6)  (0) 2022.05.30
Javascript의 Class 활용법  (0) 2022.05.30
Switch Cases  (0) 2022.05.30
Rest 파라미터  (0) 2022.05.30