[TIL] ES6(var, let, const)

kkb·2020년 5월 23일
0

블록 레벨 스코프(Block-level scope) - ES6(let, const)
모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.

함수 레벨 스코프(Function-level scope) - ES6이전(var)
함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.

var를 사용하지 않는 이유

유지보수, 가독성, 복잡한 코드 생성 방지 등의 이유로 ES6문법을 따르게 된다.

No Block-level-scope

var fruit = 'apple';
{
  var fruit = 'banana';
  console.log(fruit); // banana
}
console.log(fruit);   // banana

변수 var를 사용하면, let과 다르게 블록 레벨 스코프를 따르지 않아
블록 안에서 전역변수로 선언하여 출력값이 달라진다.
(ES6에서는 선언되지 않은 값이 할당되어 오는 것을 방지하기 위해 var는 사용하지 않는다.)

let drink = 'coke';
{
  let drink = 'fanta';
  console.log(drink); // fanta
}
console.log(drink);   // coke

hoisting

hoist의 사전적 의미: 끌어올리다.

console.log(name); // undefined
name = 'kim';
var name;

console.log(gender); // Uncaught ReferenceError: Cannot access 'gender' before initialization 
gender = 'male';
let gender;

hoisting은 var의 변수/함수 선언문에서만 일어나기 때문에
var에서 변수는 정의되어 있는 것을 확인할 수 있고,
let에서는 에러가 발생하게 된다.

이와 같이 var는 변수 선언 위치의 상관없이 변수 선언을 최상단으로 끌어올려준다.

중복 선언

var fruit = 'apple';
var fruit = 'banana';

let number = 1;
let number = 2; // Uncaught SyntaxError: Identifier 'number' has already been declared

let과 const

let(mutable data type)

mutable 데이터 타입

// let
let test = 'car';
test = 'airplane';

const(Immutable data type)

Immutable 데이터 타입

// const
const test = 'car';
test = 'airplane';    // Uncaught TypeError:Assignment to constant variable.

const를 우선적으로 사용한다.

한번 작성한 값을 다른 값으로 변경하지 않게 하여 보안상의 이슈를 방지하고, 어플리케이션에서 혼동이 오지 않도록 실수를 줄여주는 const를 먼저 사용한 다음, 재할당이 필요한 경우에 let을 사용하면 된다.

es6 지원범위

참조 문헌

https://poiemaweb.com/es6-block-scope
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/var

0개의 댓글