6. Scope

Scope

 - 내가 사용하려는 Variable(변수)가 존재하는가?

 - Scope를 이해하기전에, let/const vs var 를 이해해보자.

 

var

 - ES6(ECMASCript 6) 이전에 사용했던 선언 방식

 - Function Scope 방식

 

let / const

 - ES6(ECMASCript 6) 때 추가 된 선언 방식

 - Block Scope

 

var vs let / const

1. 두번 정의

 

var varTest = "test";
var varTest = "test1";
 
let letTest = "test";
let letTest = "test1";

 

var 와 let 을 동일한 변수명으로 두번 정의한 후, 변수의 값을 변경할때

var는 문제가 없지만 let은 이미 선언되어있는 변수라 하고 에러가 발생한다.

 

 

2. 나중에 정의

console.log(varTest);

변수가 정의되지 않았을때 변수를 사용한다면, 아래와 같이 정의되어 있지 않다고 에러가 발생한다.

 

 

하지만!! 아래 다시 해당 변수를 선언한다면, 1번라인에서는 undefinded가 찍히고 에러가 발생하지 않는다.

 

console.log(varTest);
 
var varTest = "test";

만약에 var를 let / const 로 변경한다면 let 변수가 정의되어 있지 않다고 에러가 발생할 것이다.

 

console.log(letTest);
 
let letTest = "test";

 

 

3. Function Scope

var 의 경우에는 Function-Scope 입니다. var로 선언된 변수의 유효 범위가 함수 단위라는 것을 의미 합니다.

 

var varTest = "test";
console.log(varTest);     // test 출력
 
if (true){
    var varTest = "test1";
    console.log(varTest);    //test1 출력
}
 
console.log(varTest);     // test1 출력

 

1번라인에서 선언한 varTest 변수는 5번에서 다시 선언되어 지는데, 이 변수는 동일한 변수로 인지하게 됩니다.

그래서 6번라인과 9번라인에서 test1값이 출력됩니다.

 

4. Block Scope

let / const 의 경우에는 Block-Scope 라고 합니다. 유효 범위가 블록 { } 으로 감싸지는 부분이 유효 범위 입니다.

 

let letTest = "test";
console.log(letTest);     // test 출력
 
if (true){
    let letTest = "test1";
    console.log(letTest);    //test1 출력
}
 
console.log(letTest);     // test1 출력

기본적으로 let / const를 사용하면, 기존에 사용하였던 언어들 처럼

동일한 변수명으로 되어있는 전역/지역 둘다 존재한다면, 전역/지역 변수는 다른 변수로 인지합니다.

그래서 4~7번 라인에 존재하는 letTest와 1번라인에 선언한 letTest는 다른 변수입니다.

 

 

결론

var 보다는 let/const를 사용하여, 더 좋은 개발자가 되자!

 

노마드 코더 유튜브 참고했습니다!

https://www.youtube.com/watch?v=WrjlQstaCwo