let vs const

이 글은 Youtube 드림코딩 by 엘리의 '자바스크립트3. 데이터 타입'편을 정리하여 작성한 글입니다.

 

let vs const

변수 선언에 사용되는 let과 const는 ES6에 추가되었다.

ES6 이전에는 var 키워드를 사용하였다.

이 글에서 var부터 let과 const까지 살펴보려 한다.

var

var는 Global Scope와 Function/locally Scope를 가진다.

Function 밖에서 선언하면 Global Scope를 가진다.

Function 안에서 선언하면 Function/locally Scope를 가진다.

var tester = "hey hi";
    
function newFunction() {
	var hello = "hello";
}

console.log(hello); // error: hello is not defined

var는 다시 선언이 가능하고 값 변경도 가능하다.

  // 다시 선언 가능
  var greeter = "hey hi";
  var greeter = "say Hello instead";
  
  // 값 변경 가능
  var greeter = "hey hi";
  greeter = "say Hello instead";

var 문제

Hoisting으로 변수를 선언하기 전에도 사용할 수 있다.

// No Error!!!
age = 4;
var age;

Block Scope가 없다.

{
	age = 4;
	var age;
}
console.log(age); // 4 정상 출력

다시 선언이 가능하다는 점도 문제이다.

var greeter = "hey hi";
var times = 4;

if (times > 3) {
	var greeter = "say Hello instead"; 
}
 
console.log(greeter) // "say Hello instead"

위 3가지 문제는 단순한 Application에는 상관없었다.

대규모 Project에서는 복잡한 코드에서 변수 값이 뒤죽박죽 되는 경우가 많이 발생하였다.

그래서 나온 것이 let과 const이다.

let

현재는 var대신에 ES6이후에 나온 let을 사용한다.

let은 Block Scope를 가진다.

let globalName = 'global name'; // Global Scope
{
    let name = 'ellie';
    console.log(name); // 정상 출력
    name = 'hello';
    console.log(name); // 정상 출력
    console.log(globalName); // 정상 출력
}
console.log(name); // name undefined
console.log(globalName); // 정상 출력

참고로 Block 밖에서 선언하면 Global Scope를 가지게 된다.

Global Scope 한 변수는 Application이 시작할 때부터 끝날 때까지 Memory에 탑재된다.

그래서 Global Scope한 변수는 최소한으로 사용하는 게 좋다.

 

let은 다시 선언하는 것이 불가능하다.

let greeting = "say Hi";
let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

하지만 다른 Scope의 변수는 가능하다.

let greeting = "say Hi";
if (true) {
    let greeting = "say Hello instead";
    console.log(greeting); // "say Hello instead"
}
console.log(greeting); // "say Hi"

let도 var처럼 hoisting이 된다.

하지만 undefined으로 초기화 되는 var와 달리 초기화가 되지 않는다.

Reference Error가 발생한다.

abc = 4;
let abc; // Reference Error 발생!!!

const

const는 pointer가 잠겨 있다.

선언과 동시에 값을 할당해야 하며 이후에 변경이 불가능하다.

const 역시 Block Scope를 가진다.

const greeting = "say Hi";
greeting = "say Hello instead";// error: Assignment to constant variable.

Immutable DataType

const처럼 변경이 불가능한 타입을 Immutable Datatype이라고 한다.

반대로 var, let 같이 변경이 가능한 타입은 Mutable DataType이라고 한다.

Immutable 장점

• Security => 해킹에 의한 값 변경 방지
• Thread Safety => 각 Thread에 있는 변수를 동시에 변경하는 것은 위험
• 개발자의 실수 방지

[주요용어]

Hoisting

변수 및 함수를 어디에 선언했는지 상관 없이 항상 제일 위, 최상단으로 끌어 올려 선언하는 것

[참고사이트]

Var, Let, and Const – What's the Difference?