자바스크립트 - var, let, const 차이

let, const 는 2015 ES6에서 탄생한 문법.

var, let은 변수를 선언할 때 사용하는 키워드이다.
변수는 말 그대로 변수이기때문에 값을 변경 할 수 있다.

var, let의 차이

• 스코프(Scope)
• 중복선언(Variable redeclareation)
• 호이스팅(Hoisting)

스코프(Scope) - 범위

코드가 접근할 수 있는 범위를 뜻한다.

• Function Scope 함수범위 - var
• Block Scope 블록범위 - let
• Global Scope 전역범위

function main(){
  if(true){
    var x = 'hi';
  }
  console.log(x);
}

main(); //hi

hi가 출력(함수 스코프이기때문에 출력가능)

---

function main(){
  if(true){
    let x = 'hi';
  }
  console.log(x);
}

main();

var -> let으로 변경했는데, 에러가 생겼다.(x변수에 접근할 수 없다.)

function main(){
  if(true){
    let x = 'hi';
    console.log(x);
  }
}

main();

console의 위치를 if문 안 블록에 넣었더니, 에러가 발생하지않고, 출력된다.
블록 스코프이기 때문에 가능

function main(){
  let x = 'hello'
  if(true){
    let x = 'hi';
  }
  console.log(x); //hello
}

main();

function main(){
  let x = 'hello'
  if(true){
    let x = 'hi';
    console.log(x); //hi
  }
  console.log(x); //hello
}

main();

---

function main(){
  var x = 'hello'
  if(true){
    var x = 'hi';
  }
  console.log(x); //hi
}

main();

var 함수 스코프임으로, x값이 동일함으로 hi가 출력된다.

---

var aVar = 'varHello';
let aLet = 'letHello';

console.log(window);

aVar, aLet 전역변수이다. (어디에서나 쓸 수 있다.)

그런데 let으로 전역변수를 만들면 window에 등록이됨으로, 다른 코드에 영향이 갈 수 있다. 이럴경우에는 var 보다 let을 사용하는 것이 좋다.

---

중복선언

var x = '안녕하세요';

///...

var x = 'hi';

console.log(x);

아래에 선언된 x변수가 위에 선언된 x를 덮어버린다. (hi 출력).

let x = '안녕하세요';

///...

let x = 'hi';

console.log(x);

let x를 사용할 경우, 이미 선언되어있다고 에러가 발생한다.

---

호이스팅

변수 호이스팅이란, 프로그램이 실행되기 이전에 변수에 선언과 변수의 초기화를 분리해서, 변수 선언만 맨 위로 올려주는 것을 의미한다.
프로그램이 실행 되기 이전에, 자바스크립트에서 우리가 선언한 변수를 미리 알려준다. (위로 끌어올려 읽어줌.)

console.log(num); //undefined
var num = 10;

console.log(num); //undefined
var num = 10;
console.log(num); //10

var 말고, let을 써보자

console.log(num); 
let num = 10;
console.log(num);

let도 var 처럼 변수를 호이스팅해줘서 맨 위로 올려주지만, 값을 초기화하지 않는다.

---

Const(상수 선언)

• Block Scope
• 중복 선언 불가
• 선언문 이전 접근 불가

const a = 'hi';
a = 'hello';
console.log(a);

const 는 할당연산자를 사용해서, 새로운 값을 생성할 수 없다.
그래서 const a; 이렇게 선언만해주고, 초기값을 넣어주지않으면, 에러가 발생한다.

const a = {
  x:1,
  y:2,
}

a.x = 3;

console.log(a); //{x: 3, y: 2}

이럴경우 에러가 발생하지않고, x의 값이 변경됐다.
이 경우에는 a에 새로운 값을 넣는 것이 아니고, 기존의 있는 값이 수정된 것임으로 에러가 발생하지않는다.

그런데 객체를 수정하는 것을 막고싶다면, Object.freeze 사용한다.

const a = Object.freeze({
  x:1,
  y:2,
})

a.x = 3;

console.log(a); //{x: 1, y: 2}

const는 상수를 선언한다는 것 외에는 let이랑 상당히 비슷하다.