자바스크립트에서의 변수 선언 방식은 var, let, const가 있다. 예전에는 변수를 선언할때 var만 사용했다면 2015년에 출시된 ES6부터는 let, const가 추가되었고 . var보다는 let, const를 사용하는 것을 권장한다. 오늘은 이 셋의 차이점에 대해서 공부해볼 것이다 🔥
ES란 ? ECMAscript의 약자로 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 한마디로 자바스크립트를 표준화하기 위해서 만들어졌다.
이 셋의 차이점을 알기 위해서는 먼저 scope에 대해서 알아야한다.
scope
-> 해당 코드가 사용 될 수 있는 범위를 나타내는 말
-전역 스코프
코드의 가장 바깥 영역에 존재하며 코드 어디에서든지 참조 가능하다.
- 지역 스코프
함수 내부 영역 안에 존재한다.
let a =1; // 전역 스코프 , 전역 변수
function scope (){
let b = 2; // 지역 스코프, 지역 변수
}
console.log(a); // 1 출력
console.log(b); // 에러
코드를 보면 알 수 있듯이 전역 스코프 a는 정상적으로 1이 출력되지만 b는 함수안에서만 쓰이는 지역 스코프이기때문에 에러가 뜬다. ( let a는 전역 변수 , let b는 지역 변수)
-함수 레벨 스코프 (var)
자바스크립트는 함수 레벨 스코프를 따른다. 함수 레벨 스코프란 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효하고 함수 외부에서는 유효하지 않다는 것이다. (ES6부터 let을 사용하면 블록 레벨 스코프를 사용할 수 있게 되었다.)
-블록 레벨 스코프 (let, const)
대부분의 프로그래밍 언어는 블록 레벨 스코프를 따른다. 코드블록 ({ }) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 외부에서는 참조할 수 없다.
function scope() {
if(true){
var a = '함수레벨 스코프';
let b = '블록레벨 스코프';
}
function second() {
console.log(a);
console.log(b); // Uncaught Reference Error : b is not defined
}
second();
}
scope();
console.log(a); // Uncaught Reference Error : a is not defined
let b는 if안에서만 유효하고 var a는 if안에 정의를 했음에도 function scope에서도 유효한 것을 확인 할 수 있다.
var의 경우 초기값이 없으면 자동으로 undefined를 초기값으로 하여 메모리에 할당한다. 그렇기 때문에 변수 선언 전에 변수를 사용하려고 해도 이미 변수가 존재하기 때문에 에러가 발생하지 않는다. 그와 반면에 let, const는 자동으로 초기값을 할당하지 않기 때문에 선언 전에 사용하려고 하면 에러가 뜬다. var은 편리한거같아 보이지만 같은 이름으로 2번을 선언해도 문제가 없고 코드를 덮어씌우기 때문에 나중에 문제가 발생할 수 있다 .
아래 코드를 보면 알 수 있다.
var x = 1;
{
var x = 2;
console.log(x); //2
}
console.log(x); //2
let y = 1;
{
let y = 2;
console.log(y); //2
}
console.log(y); //1
var a; //undefined
let a ; //에러가 뜸
그렇다면 let과 const의 차이점은 뭘까 ?
const는 변수 재 선언이 안된다는 점에서 let과 차이가 있다. 그래서 주로 변하지 않는 값(상수)를 선언할때는 const를 사용한다.
const PI = 3.14;
구분을 상수는 대문자로 표시하는게 편리 할 수 있다.
아직 js를 시작한지 얼마 안돼서 내용이 깊지는 않지만 나중에는 더 어려운 내용들도 담고싶다 ,,