[javascript] var, let, const 차이점

INTRO

---

 

Frontend 개발을 진행하면서, 모호했던 javascript의 변수 선언 키워드에 대한 개념들을

다시 한번 정리하기 위한 포스팅이다.

 

 

 

---

 

0. 서론

- 기존 javascript는 var이라는 키워드로만 변수를 선언하였다.

- ECMAScript2015(ES6) 가 2015년에 도입되면서 let, const 키워드를 사용할 수 있게 되었다.

- 이 3가지 키워드는 지역/전역 범위(스코프), 호이스팅 등의 개념에서 차이가 있다.

- 결론부터 얘기하면 var는 더 이상 사용하지 않는것이 좋다.

- 아래와 같은 큰 기업들의 javascript 스타일가이드를 보면 사용을 지양하라는 얘기와 함께 그 이유를 잘 적어놓았다.

- airbnb javascript 스타일가이드(https://github.com/airbnb/javascript)

- google javascript 스타일가이드(https://google.github.io/styleguide/jsguide.html#features-use-const-and-let)

- 아래에는 차이점을 정리한다.

 

1. 스코프에서의 차이

- 스코프(scope) 란 해당 변수에 접근할 수 있는 범위이다.

- 자바나 C의 전역/지역변수 개념을 생각하면 된다.(지역 스코프에 선언한 변수 : 지역변수..)

- 스코프의 종류에는 전역 스코프, 지역 스코프가 있다.

 

- 전역 스코프

- 함수나 블록({}) 밖의 범위를 얘기한다.

- 이 스코프에 선언할 경우 전역변수가 된다.(전역변수 사용은 가급적 지양..)

- 전역 변수는 함수나 블록({}) 내에서 참조할 수 있고, const를 제외한 나머지 변수들은 재할당이 가능하다.

const x = 1; // 전역

function testConst() {
  x = 11; // TypeError: Assignment to constant variable.
}

testConst();
console.log(x);

- 전역 스코프에서 '스코프 체인' 개념을 설명하기 좋을 것 같다.

- 아래의 코드를 보면, 간략하게나마 이해가 될 것이다.

- 스코프가 결정되는 순간은 렉시컬 스코프(ES3에 도입)에 의해 변수가 '선언' 되는 순간에 정해지며, 

- 스코프 체인이란 변수가 선언 된 시점에 함수가 중첩되어있다면, 상위로 물고 올라가면서 변수를 참조할 수 있다는 내용이다.

 

var x = 1;
function outer() {
  console.log('outer', x);
  function inner() {
    console.log('inner', x);
  }
  inner();
}
outer();

- 이래저래 말이 어렵고 길어지지만 결국엔 자바스크립트라는 언어의 기반 중 하나인 스코프가

- 특정한 규칙에 의해 결정되고 있고,

- 이 규칙들에서 조심해야 할 것들을 숙지해두면 

- 코드를 짤 때 실수를 줄일 수 있다는 사실만 알면 될 것 같다.

 

 

 

- 지역 스코프

- 함수나 블록({}) 내의 범위를 얘기하며,

- 함수 내의 범위 = 함수 레벨 스코프

- 블록 내의 범위 = 블록 레벨 스코프

- 로 나뉜다.

- 아래 소스코드에서 함수와 블록의 차이를 알 수 있다.

// 함수
function test1() {

}

// 블록
if (true) {

}

 

- var의 경우에는, 함수 내 선언할 경우 함수 외부의 범위에서는 접근이 불가하나,

- 블록 내 선언할 경우에는 전역변수처럼 접근이 가능하다는 특징이 있다. ( var는 함수 레벨 스코프 ) 

if (true) {
  var a = 10;
}
console.log(a); // 접근 가능

function test() {
  var a = 10;
}
console.log(a); // 접근 불가

 

- let 과 const의 경우 함수, 블록 내부에 각각 선언해도 외부에서 접근이 불가능하다.(let, const는 블록 레벨 스코프)

if (true) {
  let a = 10;
}
console.log(a); // 접근 불가

function test() {
  let a = 10;
}
console.log(a); // 접근 불가

-위에서 본 예제만 보더라도 왜 var를 지양해야하는지 알 수 있다.

- 스코프는 크롬 개발자도구에서 console.dir() 을 통해서 확인할 수 있다.

 

2. 호이스팅

- 호이스팅이란 변수/상수/함수 등이 선언된 스코프의 시작 위치로 해당 선언을 이동시키는 현상

- var 로 변수를 선언할 경우, 호이스팅과 함께 undefined로 초기화되어 참조가 가능하며,

- const, let 으로 변수를 선언할 경우, 호이스팅과 함께 초기화가 일어나지 않아서 참조 불가하다.

- 위 2가지 케이스 전부 호이스팅이 일어난다고 볼 수 있는데 방식이 다르다.

- 아래의 코드를 보면 3번째 라인의 console.log는 어떤 결과를 출력할까?

var x = 1;
function outer() {
  console.log('outer', x);
  var x = 2;
  function inner() {
    console.log('inner', x);
  }
  inner();
}
outer();


// 결과 
outer undefined
inner 2

- 호이스팅이 발생하여 지역 스코프 내의 변수를 undefined로 초기화 했고,

- 그 변수를 3번째 라인에서 참조했다.

 

 

 

 

마무리

이렇게 3가지의 선언 키워드들을 비교해보았다.

이외에도 몇 가지 차이가 있는데, (var 는 중복으로 선언가능, var는 브라우저 window의 프로퍼티..)

이 차이들은 굳이 숙지하지 않아도 습관적으로 실수할 일이 별로 없어서 별도로 정리하진 않았다.

 

다양한 블로그들을 보며 공부하고 또 실습해보며 내용을 정리하다보니

렉시컬 스코프, 실행 컨텍스트, 다이나믹 스코프 등 여러가지 단어들이 머릿속을 혼란하게 했다...

다른 개념들은 추후 시간이 되면 포스팅을 하는것으로 하고,

어느정도 머릿속에 정리가 된 시점에서 적은 글이므로, 개발에 참고하시면 좋을 것 같다.

 

 

참고 :

https://www.zerocho.com/category/JavaScript/post/5740531574288ebc5f2ba97e

https://curryyou.tistory.com/192

 

 

 

-퍼가실 때는 출처를 꼭 같이 적어서 올려주세요!