[Javascript] Scope

Scope란 지역적인 뜻을 내포하고 있으며, 쉽게말해 어떤 블록({})이나 함수를 만들었을 때 그 범위에 해당되는 것을 의미하기도 한다.

 

우리가 변수를 선언할때 흔히 var / let / const  이 3가지를 쓰고 있으며, 이 3개는 각각 다른 특징을 가진다.

 

---

우선 첫번째로 var 에 대해서 설명하고자 한다.

 

var는 해당 함수 레벨 scope에서 변수로서 정의되어 작동한다.

 

예를 들어

 

var abs = 10

function numb () {
  var abs = 20
  console.log(abs)
  }
  
console.log(abs)  // 10
numb()   //  20

함수내에서 정의된 값은 함수가 생성되면 그 값을 받고, 함수 밖에서 경우에는 함수 밖(전역)에서 정의한 값을 받는다.

 

하지만 블록 레벨 scope에서는 적용되지 않는다.

 

var abs = 10;
if(abs){
  var abs = 20
  console.log(abs); // 20
  }
  
console.log(abs); //20

var의 경우 재정의를 할 수 있기 때문에

 

블록 레벨 scope에서 재정의된 값이 전역scope에서 그대로 적용된다는 것을 알 수 있다.

 

 

---

두번째로 let의 경우를 알아보자.

 

let과 const는 ES5에서 변수를 정의하는 var의 문제점을 보강하기 위해 ES6에서 부터 사용되는 변수할당이다.

 

let은 블록 레벨 scope에서도 적용이 가능하다는 특징이 있다.

 

let abs = 10;

if(abs){
  let abs = 20;
  console.log(abs)//20
  }
  
  console.log(abs) // 10
  

let은 재정의가 불가능 하여 같은 레벨에서 변수를 재정의 할 경우

 

// Uncaught SyntaxError: Identifier 'abs' has already been declared

 

SyntaxError가 발생한다.

 

대신 let의 값을 재할당을 할 수 있다.

 

let abs = 10;
console.log(abs); // 10

abs = 20;
console.log(abs); // 20

 

---

const의 경우 let과 마찬가지로 블록 레벨 scope에서 정의 가능하고 재정의가 불가능 하다.

 

const와 let의 또다른 공통점으로 전역객체(window)의 속성 값을 생성하지 않는다.

 

let과는 다르게 값을 재할당할 수도 없다는 점이 특징이다.

 

const abs = 10;
console.log(abs);  // 10

abs = 20  // Uncaught TypeError: Assignment to constant variable.

 

ES6로 넘어오면서 var의 사용이 현저하게 줄어들었다.

 

const를 기본적으로 사용하거나, 재할당이 필요한 경우 let을 위주로 사용하는 것이 좋다.