[JavaScript] 자바스크립트 ES6 문법 scope, var, let, const

 

scope

자바스크립트를 사용하려면 scope를 잘 알아야 하는것 같다.

scope란 용어를 잘 알진 못하지만 자바스크립트 내에서 중요한 역할을 한다.

scope란 말 그대로 변수에 접근할 수 있는 '범위'를 나타낸다.

scope는 지역변수, 전역변수 두 가지 종류가 존재한다.

지역변수는 함수와 같이 블록(block)안에서만 사용할 수 있고, 전역변수는 함수의 밖았에서 선언되어

어느 곳에서든 해당 변수에 접근할 수 있다.

 

let data = 'a';

function print() {
  let data = 'b';
  console.log(data);
}

print();

=> b

 

 

호이스팅(Hoisting)

자바스크립트에서 호이스팅이란?

스크립트 내에서 변수를 선언하게 되면 유효범위의 최상위로 변경되는것을 말한다.

변수의 선언과 할당을 분리시킨다는 의미다.

첫번째 console.log(name) 에서 에러가 발생하지 않는 이유가 바로 이 호이스팅으로 인해 자바스크립트내에서 변수들을 모두 최상단으로 끌어올렸기 때문이다.

어떻게 보면 편할수도 있지만 의도하지 않는 에러를 발생시킬수도 있기 때문에 ES6에서부터는 이를 해결하기 위해 let과 const를 사용하는것이 좋다고 한다.

 

if(true) {
  console.log(name);
  var name = 'oh';
  console.log(name);
}

var name; // 변수 선언
if(true) {
  console.log(name);  // undifined
  var name = 'oh';  // 할당
  console.log(name);  // oh
}

 

 

var

ES6 이전의 변수 선언 방법으로 자바스크립트에서는 var로 대부분의 변수를 통용해서 선언했다.

var는 function단위의 scope 범위를 갖고 있다.

 

var temp = 'a';

function print(){
  var temp = 'b';
  console.log(temp);
}

console.log(a);  // a
print();  // b
console.log(a);  // a

var temp = 'a'

if(true) {
  var temp = 'b'
}

console.log(temp) // b

 

 

let

let은 변수로 변경될 수 있는 값이다.

var의 scope가 function이라면 let의 scope는 블록{} 단위이다.

 

let temp = 'a';

{
  let temp = 'b';
  console.log(temp);  // b
}

console.log(temp);  // a 

 

 

const

const는 상수로 값이 변경될 수 없고 다른 값을 넣으면 콘솔 에러가 발생한다.

 

const temp = 'a';
console.log(a);  // a
temp = 'b';  // error

 

 

const를 사용해도 무조건 값을 변경하지 못하는 것은 아니다.

list에서 push로 값을 추가할 경우는 에러가 발생하지 않는다.

 

function test(){
  const list = ['a', 'b', 'c'];
  list.push('d');
  console.log(list);
}

=> ['a', 'b', 'c', 'd']