이번 포스팅에선 Javascript의 var, let 그리고 const의 특징과 차이점을 기술해 보려고 한다😁
var
var는 ES6 이전에 JS에서 가장 일반적으로 사용하던 변수 선언문이고 함수레벨 스코프를 가지고있다.
function scope() {
var a = 0;
return a;
}
console.log(scope()); // 0
console.log(a); // ReferenceError함수 내에서 선언하게되면 지역변수로 함수 내에서만 사용 가능하며 함수 밖에서 선언하게되면 전역변수로 사용됨
var는 똑같은 변수명으로 재선언이 가능
var a = 0;
console.log(a); // 0
var a = 1;
console.log(a); // 1var는 선언 전에 변수를 사용해도 에러가 발생하지 않음
console.log(a); // undefined
var a = 0;
var,let,const는 전부hoisting되는데let과const를 위 코드처럼 사용하게 될 경우에는 에러가 발생한다.
그 이유는var는undefined로 초기화되지만 나머지 두 선언문은 초기 값이 자동으로 할당되지 않기 때문이다.
var은 재선언도 가능하고 무분별한 전역변수를 사용하게 될 수 있고 다수의 개발자들이 작업을 같이 진행하게 될 때 같은 이름의 변수를 선언하게 될 수 있기 때문에 문제가 될 가능성이 높았다고 한다.
그래서 ES6에서는 let과 const라는 새로운 기능이 추가되었다🤩
let
let은 ES6에서 새로 추가된 변수 선언문이고 블록레벨 스코프를 가지고있다.
{
let a = 1;
console.log(a); // 1
};
console.log(a); // ReferenceError블록 안에서 변수를 선언하게 되면 블록 안에서는 변수의 사용이 가능하나 블록 밖에서 변수를 호출할 경우에는 에러가 발생
let은 재선언이 불가능하다.
let a = 0;
let a = 1; // SyntaxError아래의 경우처럼 블록이 다른 경우는 똑같은 변수명을 선언해도 서로 다른 변수로 취급되어 오류가 발생하지 않음
let a = 0; { let a = 1; console.log(a); // 1 }; console.log(a); // 0
const
const는 let과 같이 ES6에서 추가된 기능이며 let과 같이 블록레벨 스코프이다.
var와 let은 변수에 할당한 값을 재할당 할 수 있으나 const는 상수로 작용하여 할당 된 값을 변경할 수 없다.
var a = 0;
a = 1;
let b = 0;
b = 1; // a, b는 값이 1로 재할당됨
const c = 0;
c = 1; // TypeError하지만 const에 object나 array같은 Complex type을 할당하면 내용의 변경이 가능한데, 이는 값을 할당하는게 아닌 주소를 할당하기 떄문에 변경이 가능하게 되는것이다😎
const knight = { level: 5, hp: 550 };
console.log(knight); // {level: 5, hp:550}
knight.level = 6;
knight.mp = 40;
console.log(knight); // {level: 6, hp: 550, mp: 40}위 코드와 같이
object에 변경, 추가가 가능하다!
var와 let은 초기값을 할당하지 않아도 되지만 const는 초기값 할당이 필수이다.
let a;
const b; // SyntaxError정리 🧐
| var | let | const | |
|---|---|---|---|
| 스코프 | 함수레벨 | 블록레벨 | 블록레벨 |
| 재선언 | 가능 | 불가능 | 불가능 |
| 재할당 | 가능 | 가능 | 불가능 |
| 초기값 할당 필요 여부 | X | X | O |
| 선언 전 호출 | 가능 | 불가능 | 불가능 |
위에 적은 내용들을 간단하게 표로 정리해 보았는데 기본적으로 개발자로서 협업하는데 애로 사항이 있을 수 있는 var사용은 지양하고 값이 변하지 않아도 되는 부분이나 Complex type은 const로, 값을 변경하면서 사용해야 할 때는 let을 사용해야 하겠다!
👍