안녕하세요 미어캣입니다. 😺
vue.js를 공부하면서 예전에 들었던 강의와 요즘 듣고 있는 강의의
차이점은 바로 ES6 문법을 적용한 방식이라고 생각합니다.
최근에는 저 역시 변수/함수 선언 시에 const나 let을 사용하고 있습니다.
근데 기존의 var과 어떤 차이가 있는지 ES6문법과 ES5의 문법의 차이가 어떤지 대~충은 느낌으로는
체감하고 있겠지만 정확하게는 모른다고 생각해서 한 번 알아보는 시간을 가졌습니다.(대충은 싫어요)
그래서 오늘은 ES6문법의 특징과 변수 선언 방식에 차이가 어떤지에 대해서 알아보도록 하겠습니다.
var, let, const의 차이점을 비교하기 전에 ES6가 먼지 알아보았습니다.
ES6 : ECMA Script 2015
JavaScript의 표준화된 버전인 ECMAScript의 6번째 릴리스
주요 특징 :
- Arrow Functions
- var 이외 let, const의 추가
- 객체지향 프로그래밍을 위한 클래스의 추가
- import와 export를 통환 모듈화 지원
- 템플릿 리터럴 (``) 백틱의 활용
- 비동기 프로그래밍을 위한 Promise와 async/await 문법의 도입
이러한 기능들은 JavaScript 코드를 보다 간결하고 가독성을 높여주는 것 같습니다.
저는 그 중에서도 기존의 변수 선언할 때 기존의 var과 let, const의 차이점을
확인하고 싶어서 글을 작성하게 되었습니다.
크게 변수의 선언, 할당, 범위에서 각각의 차이점이 있었습니다.
변수의 재 선언
var : O
let, const : X
var data;
var data;
에러가 발생하지 않고 extension을 통해서 봤을 때는 뒤의 선언이 앞의 데이터를 덮어씌우는 것 같았습니다.
반면에 let과 const의 경우에는
let age;
let age; //error
const name;
const name; //error
둘 다 complie시에 errror를 발생시킵니다.
차이점은 const의 경우에는 함수 선언이후 데이터를 할당하지 않으면 데이터를 할당해야한다는 에러를 뱉습니다.
긴 소스에서 var을 사용은 특정 변수를 재선언해도 에러를 뱉지 않기 때문에 기존의 개발자가 변수명을 지각하고 있지 않는다면 큰 문제가 발생할 수도 있습니다.
따라서 let과 const를 통해서 사전에 이를 방지 할 수 있습니다.
변수의 재 할당
var, let : O
const : X
var data = 'name';
data = 'kim'; //Success
let age = '11';
age = '12'; //Success
const name = 'kim';
name = 'park'// complie은 성공하나 TypeError가 발생
이는 기본적으로 const가 constant(상수)이기 때문에 변동 없는 값에 대한 선언에 사용하면 좋을 것 같습니다.
(그래서 메서드를 선언할 때 function a() 에서 const a () =>으로 변경된게 아닐까요?...)
변수의 범위
var : function scope(함수 내)
let, const : block scope(중괄호 내)
//function scope
function a(){
var name = 'kim';
console.log(name); //kim
}
console.log(name); //error
//block scope
if(a){
let name = 'park;
console.log(name); //park;
}
console.log(name); //error
function 내 값과 중괄호 내 값은 공통적으로 console.log로 찍지만 function과 중괄호 밖의 console.log의 경우에는 없는 코드처럼 사용 됩니다.(읽지 않음)
🥸 그럼 차이점은 ?
function Scope :
변수는 함수 내에서만 유효
호이스팅이 되어 변수/함수 선언은 해당 함수의 시작부분으로 끌어 올려짐
*호이스팅 :
호이스팅(Hoisting)은 JavaScript에서 변수 및 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 현상
block Scope :
변수는 중괄호 내에서만 유효
선언 되기 이전에 참조될 경우에는 TDZ에 빠짐!
* TDZ(Temporal Dead Zone) :
let 및 const 키워드로 선언된 변수가 선언되기 전에 접근되었을 때 발생하는 현상
//호이스팅
funciont a() {
console.log(name);
var name = 'kim'; //undefined
}
함수의 시작부분으로 호이스팅되어 끌어올려짐으로 실행은 되지만 데이터에 대해서는 undefined로 찍힘!
//TDZ
const a = () => {
console.log(name);
const name = 'kim';
}
let과 const의 경우에는 ReferenceError : Cannot access 'name' before initialization
이라는 에러로 선언되기 전에 실행되어 접근할 수 없다는 에러를 줍니다!!
기존의 JavaScript는 undefined라는 모호한 에러만 뱉어서 디버깅이 어려웠다면 let과 const의 사용으로
변수/함수에 관해서는 상당 부분을 해소 할 수 있을 것 같습니다.
감사합니다.
참고자료 :
'Web, View' 카테고리의 다른 글
[FrontCS] DOM...? (1) | 2024.03.18 |
---|---|
[React #1] What is React? (0) | 2024.03.14 |
[Front CS] SSR과 CSR? (0) | 2024.03.13 |
[Front CS] Ajax, Axios, Fetch에 대한 정리 (0) | 2024.03.08 |