오늘은 변수와 관련된 세 가지 종류에 대해서 배웠다.
선결론 : 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 |