var와 let,const 차이점

2020. 1. 14. 20:34JAVASCRIPT

var와 let,const 차이

var는 function-scope이고 let, const는 block-scope입니다.

function-scope는 함수(function) 단위, block-scope는 대괄호({})를 단위로 범위를 정합니다.

아래의 예제를 통해 자세히 알아보겠습니다.

function fn() {
  var a = 1;
  let b = 2;
  console.log(a); // 1출력
  console.log(b); // 2출력
  //함수를 벗어나면 a,b둘다 메모리에서 해제됨
}
fn();

console.log(a); // ReferenceError발생
console.log(b); // ReferenceError발생

if(true) {
  var a2 = 1;
  let b2 = 2;
  console.log(a2); // 1출력
  console.log(b2); // 2출력
  //a2는 function-scoped이기 때문에 function내부에 선언된게 아닐 경우 전역 변수로 hoisting됨
  //b2는 block-scoped이기 때문에 if를 벗어나면 메모리에서 해제됨
}

console.log(a2); // 1출력
console.log(b2); // ReferenceError발생

*ReferenceError는 참조할 수 없는 변수를 사용했을 때 발생하는 에러입니다.

 

let과 const의 차이

가장 큰 차이점은 let은 변경할 수 있고, const는 변경할 수 없다는 것입니다. 예제를 통해 알아보겠습니다.

const key = 'abc123';
let points = 50;
let winner = false;
points = 60; //points 변수는 50 > 60으로 값을 변경할 수 있다.
key = 'aaaa'; // 오류 const는 상수이기 떄문에 값을 변경할 수 없다.

더 나아가서 const는 참조할 수 있는 객체나 함수 같은 경우에도 선언할 떄 사용합니다. 여기서 객체나 함수는 let으로 선언해야하지 않을까라는 의문이 생길 수 있습니다.(const로 객체를 선언할 경우 객체의 속성들은 변경가능하나 객체 자체를 재할당할 수는 없습니다.) 예제를 통해 알아보겠습니다.

const person = {
	name: 'kimjunyeob',
	age: 26
}
person.age = 36; 

person이라는 객체는 불변하나 그 안의 속성은 변할 수 있습니다. 그렇기에 참조할 수 있는 대상은 const를 사용하는 것이 일반적입니다. es6에서는 var 키워드를 대신하여 let과 const를 사용하길 지향합니다.

'JAVASCRIPT' 카테고리의 다른 글

브라우저&&모바일 확인 - 바닐라 스크립트(prototype)  (0) 2022.02.17
Javascript Set  (0) 2022.02.10
JS 이벤트 위임하기  (0) 2020.01.14
JS async & await  (0) 2020.01.14
JS Promise란  (0) 2020.01.14