let, const 블록레벨 스코프

var

는 문제가 많다. (한번도 써본적 없지만)

 

  var a = 1;
  var b = 2;
  var a = 1341;
  var b;
  console.log(a); 	// 1341
  console.log(b);		// 2

 

다음과 같이 중복 선언이 가능하다.

 

동일 변수 이름이 선언되 있는 것을 모르고 선언한면서 값까지 초기화 해준다면 사이드 이펙트가 생기는

 

부작용이 발생한다. 

 

함수 레벨 스코프

 

var 키워드는 오로지 함수 코드 블록만 지역스코프로 인정한다. 따라서 함수 외부에서 

 

var로 선언한 변수는 코드 블록 내 선언해도 모두 전역변수가 되어버린다.

 

  var s = 23;
  if(true){
  	// s는 전역변수 이미 선언된 변수가 있으므로 중복선언
    // if 블록안에 새로 선언해도 전역변수
    // 이는 사이드 이펙트를 발생시킨다.
      var s = 111;
  }
  console.log(s);  // 111

 

반복문 변수 선언문에서 var 키워드는 전역변수

 

  var i = 10;
  for(var i = 0; i< 3; i++){
      console.log(i);	// 0 1 2 
  }
  console.log(i); // 3

 

함수 레벨 스코프는 전역변수의 남발과 사이드 이펙트를 발생시킬 수 있다.

 

let, 블록 레벨 스코프

 

  // var 같은 네이밍으로 또 선언시 js엔진은 var를 무시해버린다.
  var v = 123;
  var v = 456;
  let a = 1111;	// error
  let a = 4443; // error

 

let은 중복 선언을 금지한다.

 

var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정하는 함수레벨 스코프를 따른다.

 

let은 모든 코드블록(if, while, for try/catch) 지역스코프로 인정하는 블록 레벨 스코프를 따른다.

 

  let a = 1;

  {
      let a = 23;
      let b = 342134;
  }
  console.log(a); // 1
  console.log(b); // 참조에러

어찌보면 너무 당연한건데 js는 유연성이 뛰어나다..... 좋은건가? 

 

위 코드처럼 let은 블록 레벨 스코프를 따른다. 코드블록 내 a,b는 지역변수다.

 

전역변수 a와 코드블록 내 a는 다른 것이다. b는 블록 레벨 스코프를 갖는 지역변수라 전역에서

 

b를 참조할 수 없다. 

 

전역 객체와 let

 

var 키워드로 선언한 전역 변수, 함수 그리고 선언하지 않은 변수에 값 할당은 전역 객체인 window의 속성이 된다.

 

전역객체의 속성을 참조할 때 window를 생략할 수 있다.

 

  var a = 1;

  // 암묵적 전역
  b = 2;

  function foo(){}
  console.log(window.a);	// 1
  console.log(a)	// 1

	// 암묵전역은 window의 속성
  console.log(window.b);
  console.log(b);

  console.log(window.foo);
  console.log(foo);
  
  // let,const 전역변수는 window의 속성이 아니다.
  let lll = 123;
  console.log(window.lll);	// undefined

 

let 키워드로 선언한 전역변수는 window의 속성이 아니다. 

 

const

 

const는 상수다. 그리고 let과 동일하나 다르다

const는 선언과 동시에 반드시 초기화 해야 한다. 

const 또한 블록 레벨 스코프를 가진다.

const는 재할당이 불가능하다.

 

  const c = 123;	// 선언과 동시에 초기화
  c = 412;			// 재할당 금지

 

상수

상수는 변수 값을 변경할 수 없다. (원시객체에 한해) 

코드컨벤션에 의해 상수는 대문자로 네이밍한다. 

 

  const MONDAY = 0;

  // c
  #define MONDAY 0

 

const 변수가 원시 객체가 아니라면 즉 배열 및 객체라면 값의 변경이 가능하다.

 

  const obj = {
      a:23
  }

  obj.a = 32;
  console.log(obj);	// {a:32}

 

const는 재할당을 금지할 뿐 불변을 의미하지 않는다.

 

객체의 프로퍼티 동적생성, 값 변경은 가능하다.

 

그래서 뭘 쓸까

 

var는 사실상 안쓴다 보면된다.

나도 써본 적 없다.

다음의 경우에 적절한 키워드를 사용해보자

 

es6 이상 사용한다면 var는 사용하지 않는다.

재할당이 필요할 경우 let 키워드를 사용하고 이 때 변수의 스코프를 최대한 좁힌다.

변경이 발생하지 않고 읽기 전용 원시객체 값은 const를 사용한다. 

 

변수를 선언한 시점에 재할당이 필요할지는 모른다. 또한 객체의 재할당 경우가 은근 드물다. 

재할당이 필요하자면(먼저 재할당이 필요한지 곰곰히 생각해보자) let을 쓰되 const를 우선으로

안정적인 프로그래밍을 하자.