자바스크립트 ES6 #15 변수선언키워드 & 블록레벨스코프

#var #let #const #함수레벨스코프 #블록레벨스코프 

 

---

var 키워드

 

변수 중복 선언 허용

 

var 키워드는 같은 스코프 내의 중복 선언을 허용하기 때문에 의도치 않은 값의 변경이 발생할 수 있다.

 

var x = 1;
var y = 1;

// 초기화문이 있는 변수 선언문은 엔진에 의해 var 키워드가 없는 것처럼 동작한다.
var x = 100;

// 초기화문이 없는 변수 선언문은 엔진에 의해 무시된다.
var y;

x; // 100
y; // 1

 

함수 레벨 스코프

 

var 키워드로 선언한 변수는 오직 함수블록만을 지역스코프로 인정한다.

 

함수 외부에서 var 키워드로 선언한 변수는 코드블록 내에서 선언해도 모두 전역변수가 된다.

 

var x = 1;
if (true) {
  // 조건문의 코드 블록을 스코프로 인정하지 않는다.
  var x = 10;
}
// 변수의 값이 의도치않게 변경되는 부작용이 발생한다.
x; //10

var i = 10;

// 반복문의 코드 블록을 스코프로 인정하지 않는다.
// i 는 중복선언한 전역변수 이다.
for (var i = 0; i < 5; i++) {}

i; // 5

 

변수 호이스팅

 

var 키워드로 선언된 변수는 변수의 호이스팅에 의해 변수 선언문이 스코프 선두에 끌어 올려진 것처럼 동작한다.

 

- var 키워드로 선언된 변수는 변수 선언문 이전에 참조할 수 있다.(undefined)

 

- 변수의 호이스팅은 가독성을 떨어뜨리고 오류가능성을 높힌다.

 

foo; //undefined

foo = 123;

foo; // 123

var foo;

 

---

let 키워드

 

변수 중복 선언 금지를 강제한다.

 

let 키워드로 변수를 중복 선언하면 Syntax Error가 발생한다.

 

var foo = 123;

// 엔진에 의해 var 키워드가 없는것처럼 동작해 값이 재할당 된다.
var foo = 456;

let bar = 123;

// Syntax Error : Identifier 'bar' has already been declared
let bar = 456;

 

블록 레벨 스코프

 

var 키워드는 함수의 코드블록만을 지역 스코프로 인정하는 함수 레벨 스코프이다.

하지만 let 키워드는 모든 코드블록을 지역스코프로 인정하는 블록레벨스코프이다.

 

let foo = 1;
{
  let foo = 2;
  let bar = 3;

  foo; // 2
}
foo; // 1
bar; // ReferenceError : bar is not defined

let i = 10; // 전역스코프
function foo() {
  let i = 100; // 지역스코프(함수 레벨)
  for (let i = 1; i < 3; i++) {
    i; // 1, 2 지역스코프(블록 레벨)
  }
  i; // 100
}
i; // 10

 

변수 호이스팅

 

let 키워드로 선언한 변수는 변수의 호이스팅이 발생하지 않는 것처럼 동작한다.

 

- let 키워드로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.

 

- 초기화 단계는 런타임에 변수선언문에 도달했을 때 실행 된다.

 

- 스코프 시작지점 부터 초기화 단계 직전(변수 선언문 도달 이전)까지 변수를 참조할 수 없다.(TDZ : Temporary Dead Zone)

foo; // Cannot access 'foo' before initialization
let foo;
foo; // undefined
foo = 1;
foo; // 1

 

let 키워드로 선언한 변수는 변수의 호이스팅이 발생하지 않는 것처럼 보이지만 사실 변수의 호이스팅이 발생한다.

 

let foo = 1;

{
  // 호이스팅이 발생하지 않았으면 전역 변수 foo의 값을 출력하겠지만 호이스팅이 발생하기 때문에
  // ReferenceError가 발생한다
  console.log(foo); // Cannot access 'foo' before initialization
  let foo = 2;
}

 

전역 객체와 let

 

var 키워드로 선언한 전역변수와 전역함수, 선언하지 않은 변수에 값을 할당한 암묵적전역은 전역객체 window의 프로퍼티가 된다.

 

프로퍼티를 참조할 때 window를 생략할 수 있다.

 

- let 키워드로 선언한 전역 변수는 전역객체의 프로퍼티가 아니다.

 

- 전역 렉시컬 환경의 선언적환경레코드에 존재한다.

 

// 전역 변수
var x = 1;
// 암묵적 전역변수
y = 2;
// 전역함수
function foo() {}

window.x; // 1
x; // 1
window.y; // 2
y; // 2

window.foo; // foo(){}
foo; // foo(){}

let x = 1;

window.x; // undefined
x; // 1 전역객체의 프로퍼티가 아니다.

---

 

const 키워드

 

주로 상수를 선언하기 위해 사용한다.

대부분 let 키워드의 특징과 비슷하다.

 

선언과 초기화

 

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

 

const foo; //SyntaxError : Missing initailizer in const declaration

{
  // 호이스팅이 발생하지 않는 것처럼 동작한다.
  foo; // Cannot access 'foo' before initialization
  const foo = 1;
  foo; // 1
}
// 블록 스코프를 가진다.
foo; //foo is not defined

 

재할당 금지

 

const 키워드를 사용한 변수는 재할당이 금지된다.

const foo = 1;
foo = 2; // TypeError : Assignment to const variable

 

상수

 

상수는 재할당이 금지된 변수를 말한다.

 

// 대문자를 활용해 상수임을 명확히한다.
// 0.1 의 의미를 명확히 할 수 있다.
const TAX_RATE = 0.1;

 

const 키워드와 객체

 

const 키워드로 선언된 변수에 객체를 할당한 경우 객체의 상태를 변경할 수 있다.

 

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

const person = {
  name: "Lee",
};
person.name = "Kim";

person; //{name : "Kim"}

 

---

var /  let / const 의 활용

 

ES6 이상을 이용하는 경우 기본적으로 const를 사용하고 재할당이 필요한 경우 let 키워드를 사용한다.

객체는 객체값 자체를 재할당하는 경우가 극히 드물기때문에 주로 const 키워드로 선언한 변수를 사용한다.