공부를 하면서 구박사님 검색엔진을 쓸때마다 var로 선언된 코드들이 있고 let이나 const로 선언된 코드들이 있어서 뭐가 다른거지 싶어서 찾아볼 때 알게됬던 js ES5, ES6의 차이점을 정리해 볼까 한다
나중에 레거시코드의 리팩터링이나 검색을 해서 참고하는 코드들을 더욱 잘 이해하고 활용하려면
기초지식이 잘 잡혀있는것이 좋을 것 같아서 정리 해 보았다
그럼 일단 ES5랑 ES6가 뭔가?!
📌 ES란?
ES는 ECMAScript의 약어.
ECMAScript는 Ecma 인터내셔널에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어
aka. ECMAScript 사양(ECMAScript specification)
ECMAScript는 ECMA-262에서 정의된 하나의 사양을 의미하며,
스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공한다
ES5, ES6처럼 뒤에 오는 숫자는 버전을 의미하는데
ES5는 2009년에 출시되었고 ES6는 2015년에 출시되었다
ES5에서 ES6가 출시되는 기간 동안 많은 기능들이 추가 되며 버전차이가 뚜렷해 졌기 때문에
오늘날 취업 시장에서는 ES6+(모던 자바스크립트)를 필수스펙으로 많이 요구하고 있는 것 같다
📌 ES6에서 추가된 기능 정리
⛔️ ES6이전 문법의 특징 및 문제점 정리
함수 레벨 스코프(Function-level scope)
함수의 코드블록만을 스코프로 인정한다
따라서 전역함수 외부에서 생성한 변수는 모두 전역변수 → 전역변수를 남발할 가능성⬆
var 키워드의 생략 허용
함수를 선언할 때 var 키워드를 생략 해도 인정 해 준다 → 암묵적 전역변수를 양산할 가능성⬆
변수의 중복 선언 허용
같은 이름으로 재선언 및 재할당을 해도 에러메시지가 뜨지 않고 가장 마지막에 선언되고 할당 된 값을 기준으로 출력된다
→ 의도치 않은 값 변경이 일어 날 수 있기때문에 매우 위험함
변수 호이스팅
변수를 선언 하기 이전에 참조가 가능 → TDZ(일시적 사각지대)의 영향을 받지 않는다
TDZ란? :
ES6 이전 var 키워드는 함수 레벨 스코프를 가지며 암묵적 재할당이 가능했고 이로인해 주의를 기울이지 않으면 심각한 문제를 일으킬 수 있는 요인이 되었다
이러한 var 키워드의 단점을 보완하기 위해 let과 const 키워드를 도입❗️❗️
01. let, const 키워드의 추가
: 단점을 보완하기 위해 블록 레벨 스코프를 가지며, 재할당이 가능한 let, const 키워드가 추가
변수의 생명 주기에 영향을 미치며, 선언시 사용되는 키워드만 보아도 변수의 변화 여부가 확인이 가능해졌다
이번 let과 const의 자세한 내용은 하단의 링크에 정리 되어 있으니 참고해주세용!
02. 화살표 함수 (Arrow function) 추가
: 화살표 함수가 추가되어 함수를 더 간결하게 나타 낼 수 있게 되면서 가독성 및 유지보수성이 증가함
( 하지만 기존 함수와 this 바인딩이 lexical this를 따르기 때문에 공부가 더 필요함 ㅜ )
화살표 함수에서는 매개 변수가 하나일때 ()괄호 생략도 가능하고,{}소괄호 및 return도 생략이 가능하다
<script>
//ES5
function sum ( a+b ){
return a+b ;
}
//ES6
const sum = (a+b) => a+b;
</script>03. 기본값 매개변수 (Defualt Parametar) 추가
:기본값 매개변수란 함수의 매개변수에 값이 전달되지 않았을 때 기본 값으로 설정하는 문법으로
기존에는 함수의 매개변수에 초깃값을 함수 내부에서 따로 로직을 통해 작성해야 했으나 ES6이후에 추가되었다
자세한 내용은 하단의 링크에서 더 자세히 다루도록 하겠습니당
기본값 매개변수 (Defualt Parametar) :
04. 템플릿 리터럴 (Template literal) 추가
: 백틱 (``) 내부에 ${ } 표시를 통해 js 표현식을 넣을수 있게 되어 문자열의 관리가 편리해졌고,
문자열이 라인을 넘어가게 될 경우 \n(줄바꿈)과 +(덧셈 연산자)를 이용하여야 했으나
백틱을 사용하면 내부의 줄바꿈이 모두 인식 되기 때문에 편리하게 관리가 가능하졌다
<script>
//ES5
var firstName = 'Lee'
var lastName = 'seoungeun'
var name = 'My name is ' + firstName + ' ' + lastName + '.'
//My name is Lee seoungeun.
//ES6
const myName = `My name is ${firstName} ${lastName}.`
console.log(myName)
//My name is Lee seoungeun.
//ES5 공백의 불편함
console.log("제"+ " " + "벨로그에" + " " + "방문해" + " " + "주셔서" + " " + "감사합니다")
//제 벨로그에 방문해 주셔서 감사합니다
//ES6 공백도 있는 그대로 인식
console.log(`안녕하세용 제 벨로그에 방문해 주셔서 감사합니다`)
//안녕하세용 제 벨로그에 방문해 주셔서 감사합니다
//ES5 긴 문자열의 관리 불편
var text = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. \n'+
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. \n'+
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. \n'
//ES6 백틱(``)을 사용한 간단한 문자열 관리
const text = `Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.`
</script>05. 모듈 (Module)
모듈(Module) 이란 ?
: 재사용하기 위한 코드조각
대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성되며,
export, import 키워드로 사용한다
:script 타입에 모듈임을 명시해 주고 파일의 확장자를 .mjs로 변경시켜서 사용한다
<script type="module" src="lib.mjs"></script>
<script type="module" src="animation.mjs"></script>모듈의 기능 등 자세한 내용은 아래의 글에서 자세히 다뤄 보도록 하겠습니당
06. 구조 분해 문법 (Destructuring)
구조란?
: 전형적인 객체, 배열 선언 방식을 말하며,
왼쪽에 변수 이름을 넣고 오른쪽에 데이터 타입을 선언하는데, '구조'라는 단어는 이러한 선언 형식을 의미함
<script>
var arr = [1, 2, 3, 4];
var obj = {
a: 10,
b: 20,
c: 30
};
//구조분해
var { a, c, b } = obj;
const arr1 = [1,2,3];
const [one, two, three] = arr1;
</script> 배열은 순서를 중요하게 여기고, 객체는 키값을 중요하게 여기기 때문에 순서를 바꾸어도 동일하게 동작함
(객체의 경우 값만 추출해서 사용되기 때문에 순서는 중요하지 않음 )
07. 프로미스 (Promise)
프로미스 (Promise)란?
: 비동기 작업의 처리를 나타내는 객체.
비동기 작업 처리에 있어서 기존의 콜백(Callback) 함수 방식의 문제점을 개선한 방식
⚠️ 비동기적 작업에 있어서 프로미스를 사용해야하는 이유
: 콜백 지옥(Pyramid of Doom)의 해결 및 에러 처리의 용이성 때문!
해당 내용도 더 자세한 내용은 하단의 글을 참고해 주세요!
08. null 병합 연산자 (Nullish coalescing operator)의 추가
null 병합 연산자(Nullish coalescing operator)란?
: 연산자(??)의 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고,
그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자
: 기존의 if 문을 활용해서 null 또는 undefined인 경우를 판단했던 방식보다
null 병합 연산자(??)를 사용했을 때 코드의 양이 줄어들고, 훨씬 간결하게 사용 할 수 있다!
<script>
// if문을 통해 매개변수의 값이 null이거나 undefined인 경우 정해진 텍스트를 출력
function printTitle(text) {
let title = text;
if (text == null || text == undefined) {
title = 'Hello world!';
}
console.log(title);
}
// null 병합 연산자로 사용 했을 경우
function printTitle(text) {
let title = text ?? 'Hello world!';
console.log(title);
}
printTitle('seoungeun.log'); // seoungeun.log
printTitle(); // Hello world!
</script>09. 옵셔널 체이닝 (Optional Chaning)의 추가
옵셔널 체이닝 (Optional Chaning)이란?
: 옵셔널 체이닝 앞의 평가 대상이 null이나 undefined면 에러를 반환하지 않고 undefined를 반환함.
( ES6이후 ES2020때 추가된 항목 )
: 옵셔널 체이닝을 사용하면 이전 코드보다 문법적으로 깔끔하고 안전하게
중첩된 객체의 하위 속성 값에 접근할 수 있다!
<script>
// 객체 선언
const userInfo = {
name: {
first: 'Hong',
last: 'Gildong',
},
address: {
city: 'Seoul',
postcode: '04377',
},
};
//옵셔널 체이닝 도입 이전 코드 ( && 사용하여 address 속성이 있는지 확인 후 접근 )
const postcode = userInfo.address && userInfo.address.postcode;
// 옵셔널 체이닝으로 구현
const postcode = userInfo.address?.postcode;
</script>⚠️ 옵셔널 체이닝은 아주 간편한 문법이지만 남발하는것은 좋지 않다 !
→ 존재하지 않아도 괜찮은 대상에게만 옵셔널 체이닝을 사용하도록 할 것!
( 필수값이 아닌 대상에게 옵셔널 체이닝으로 구현시 값이 올바르지 않을때 오류를 뱉어내지 않아 추후 디버깅시 시간 낭비할 확률이 높아짐 🥲 )
10. 스프레드 오퍼레이터 (Spread Operator) 의 추가
스프레드 오퍼레이터 (Spread Operator)란?
: 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용하는 연산자 ( ... )
: 기존의 방식으로 구현했을때 보다 스프레드 오퍼레이터로 구현했을때 더 간결하게 구현이 가능함
<script>
// 객체 선언
const obj = {
a: 10,
b: 20
};
// 배열 선언
const arr = [1,2,3];
// 객체의 값을 복사하는 경우
var newObj = {
a: obj.a,
b: obj.b
};
console.log(newObj); // {a: 10, b: 20}
// 배열의 값을 복사하는 경우
var newArr = [arr[0], arr[1], arr[2]];
console.log(newArr); // [1, 2, 3]
// Spread Operator 사용 ( obj 객체를 newObj 객체에 복제 )
let newObj = {...obj};
console.log(newOjb); // {a: 10, b: 20}
// Spread Operator 사용 ( arr 배열을 newArr 배열에 복제 )
const newArr = [...arr];
console.log(newArr); // [1, 2, 3]
</script>