var let const, hoisting 기초

 var 

es6 이하에서 변수를 선언할 수 있는 유일한 키워드 var!

1. 함수 레벨 스코프(Function-Level Scope)

함수 코드 블록만을 스코프로 인정한다.

전역 함수 외부에서 생성한 변수는 모두 전역변수이다.

var x = 0;

function f(){
  var x = y = 1; // x는 지역변수로 선언됩니다. y는 아닙니다!
}
f();

console.log(x, y); // 0, 1
// x는 예상대로 전역이다
// y leaked outside of the function, though! 

2. var 키워드 생략

var 키워드를 생략할 수 있다.

암묵적으로 전역변수를 선언한 것과 같다

3. 변수 중복 선언 가능

동일한 변수명을 중복으로 사용할 수 있다.

의도하지 않은 값이 변경될 수 있다.

4. 호이스팅(Hoisting)

변수를 선언하기 이전에 참조할 수 있다.

변수 선언들 (그리고 일반적인 선언)은 어느 코드가 실행 되기 전에 처리하기 때문에, 코드 안에서 어디서든 변수 선언은  최상위에 선언한 것과 동등하다. 이것은 변수가 선언되기 전에 사용 될 수 있다는 것을 의미한다.

변수 선언이 함수 또는 전역 코드의 상단에 이동하는 것과 같은 행동을 호이스팅이라 한다.

num = 6;
num + 7;
var num; 
/* num이 선언되지 않더라도 에러를 내지 않습니다 */

bla = 2
var bla;
// ...

// 위 선언을 다음과 같이 암묵적으로 이해하면 됩니다:

var bla;
bla = 2;

이러한 이유로, 그들의 범위(전역 코드의 상단 그리고 함수 코드의 상단) 상단에 변수를 항상 선언하기를 권장합니다. 그러면 변수는 함수 범위 (지역)이 되며, 스코프 체인으로 해결될 것이 분명합니다.

 

---

 

 let 

ES6(ECMAScript6)의 변수 선언 방식이다.

 

1. 블록 레벨 스코프(Block-Level Scope)

let은 변수가 선언된 블록, 구문 또는 표현식 내에서만 유효한 변수를 선언한다. 이는 var 키워드가 블록 범위를 무시하고 전역 변수나 함수 지역 변수로 선언되는 것과 다른 점이다.

 

let 으로 선언된 변수는 변수가 선언된 블록 내에서만 유효하며, 당연하지만 하위 블록에서도 유효하다. 이러한 점에서는 let 과 var는 유사하지만, var는 함수 블록 이외의 블록은 무시하고 선언된다는 점이 다르다.

let x = 1;

if (x === 1) {
  let x = 2;

  console.log(x);
  // expected output: 2
}

console.log(x);
// expected output: 1

var x = 'global';
let y = 'global';
console.log(this.x); // "global" 전역 객체의 속성 x를 생성
console.log(this.y); // undefined 전역 객체의 속성 y를 생성하지 않음

2. 변수 중복 선언 금지

변수를 중복으로 선언하게 되면 문법 오류가 발생한다.

3. 호이스팅(Hoisting)

let으로 선언된 변수를 선언문 이전에 참조하면 참조 오류(Reference Error)가 발생한다.

let키워드는 값을 할당하기 전에 변수가 선언되어야 하는데, 그렇지 않으면 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지게 된다.

4. 클로저

var에서도 사용할 수 있지만 블록 레벨 스코프(Block-Level Scope)를 지원하는 let이 훨씬 더 직관적이다.

외부 함수의 환경을 기억하고 있는 내부 함수를 말한다.

외부 함수 안에서 선언된 내부 함수는 외부 함수의 지역변수나 함수에 접근해 사용할 수 있다.

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

let add5 = makeAdder(5);
let add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

let size12 = makeSizer(12);
let size14 = makeSizer(14);
let size16 = makeSizer(16);

 

---

 

 const 

let과 const의 차이는 immutable 여부로 볼 수 있다.

let은 변수에 재할당이 가능하고 const는 재선언, 재할당 모두 불가능하다.

 

1. 선언, 초기화

const는 선언과 동시에 할당이 이뤄져야 한다. 그렇지 않으면 문법에러가 발생한다.

2. 상수

유지보수와 가독성을 위해 적극적으로 사용하자.

3. const와 객체

객체의 프로퍼티는 보호되지 않는다. 재할당은 불가능하지만 객체의 내용(프로퍼티 추가/삭제/프로퍼티 값 변경)은 변경할 수 있다.

객체 타입 변수 선언에서는 const를 사용하는 것이 좋다.

 

 

 

ref.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let

https://poiemaweb.com/es6-block-scope