| ES5와 ES6의 문법 비교 정리 |
ES5에서 ES6으로 업데이트가 됐을 때 가장 많은 변화가 일어났다.
클래스와 모듈 같은 복잡한 응용프로그램을 작성하기 위한 새로운 문법이 추가되었고, 그 밖에 많은 축약 코딩 기법들이 등장했다.
그래도 우리는 과거 코드를 알아야한다.
그 이유는 다른 회사를 갔을 때, 그 회사가 최신 코드로 최신화 되어 있지 않은 경우가 많이 있기 때문에 그 코드를 이해할 수 있어야 되고, 나아가 그 코드를 현재 최신 코드로 리팩토링 할 수 있어야 하기 때문이다.
그래서 ES5와 ES6을 비교하면서 넘어가겠다.
- 변수 -
ES6에 추가된 키워드 - let, const
var는 scope가 함수 단위이고, let과 const는 scope가 블록 단위이다.
function test() {
var val1 = 15;
if(val1 == 15) {
var val1 = 99;
console.log(val1); // 99
}
console.log(val1); // 99
}
function test1() {
let val3 = 12;
if(val3 == 12) {
let val3 = 100;
console.log(val3); // 100
}
console.log(val3); // 12
}
코드를 보면 var로 선언한 값은 if에서만 값을 변화시켜도 그 함수 전체에 영향이 가는 것을 볼 수 있다.
반대로 let은 if에서만 값을 변화를 시키면 그 블록에서만 영향을 미친다.
이렇게 변화를 준 이유가 있다.
함수 단위 scope은 메모리 누수(생명주기가 길어서)가 생기고, 가독성이 떨어진다. 그리고 검색 속도가 느리기 때문에 디버깅도 어려운 등 많은 단점이 있다.
그래서 ES6에서는 var를 사용하지 않는다. 후에 값이 변경될 값을 담는 변수는 let, 변경되지 않을 때는 const를 사용하면 된다. (const는 상수라고 생각하면 된다.)
< 축약 코딩 기법 >
ES6에 새로 추가된 축약 코딩 기법들을 ES5의 기본문법과 비교한다.
- 삼항연산자 -
if-else문을 더 간결하게 사용할 수 있다. 단, 너무 복잡한 코드에서 삼항연산자를 쓰면 오히려 가독성이 떨어진다.
-기존-
function test() {
let value = 30;
if (value > 20) {
value = "20보다 크다";
}
else {
value = "20보다 작다";
}
console.log(value) // 20보다 크다
}
-축약-
function test1() {
let value = 30;
value = value > 20 ? "20보다 크다" : "20보다 작다";
console.log(value); // 20보다 크다
}
- 간략 계산법 -
기존의 변수를 다른 변수에 할당할 때, 기존 변수가 null, undefined, empty 값이 아닌 것을 확인 해야 한다.
아니면 에러가 난다. 이를 해결하기 위해서 기존에는 if문을 작성밖에 방법이 없었지만 간략 계산법이라는 선택지가 하나 더 생겼다.
-기존-
function test() {
let value1 = "값";
let value2 = "";
if(value1 != "" || value1 != null || value1 != undefined) {
value2 = value1;
}
console.log(value2); //값 출력
}
-축약-
function test1() {
let value1 = "";
let value2 = value1 || '비어있음' ;
console.log(value2); //비어있음 출력
}
만약 축약 기법처럼 변수에 값이 비어있다면 비어있음을 출력한다. 비어있지 않다면 value값을 출력한다.
<변수 선언>
기존에는 여러 개의 변수를 선언할 때, 변수의 타입을 하나하나 지정해줬어야됐다. 축약기법을 쓰면 같은 변수의 타입을 쓰는 변수들의 타입을 한 번만 지정하면 된다.
-기존-
function test() {
let x;
let y;
let z = 3;
console.log(x); //undefined
console.log(y); //undefined
console.log(z); //3
}
-축약-
function test1() {
let x,y,z = 3;
console.log(x); //undefined
console.log(y); //undefined
console.log(z); //3
}
만약 x, y, z에 값을 모두 집어넣고 싶다면 let x = 3, y = 3, z = 3; 이렇게 정의해줘야된다.
<For 루프>
이 전에는 증감식, 배열의 길이 모두 지정해주었어야 됐다.
지금은 배열을 이용해 값을 출력 하는 거, 또는 배열의 크기만큼 연산을 한다면 훨씬 편하고 간단하게 값을 출력할 수 있다.
-기존-
function test() {
let arr = [1,2,3];
for(let i = 0; i < arr.length; i ++) {
console.log(arr[i]); // 1 2 3 출력
}
}
-축약-
function test1() {
let arr = [1,2,3];
for(let value of arr) {
console.log(value);
}
}
<객체 프로퍼티>
프로퍼티 이름이 key 이름과 같을 경우, 축약 기법을 활용할 수 있다.
오브젝트 관리할 때 편하다.
-기존-
const obj = {x:x, y:y}
-축약-
const obj = {x, y}
<화살표(Arrow)함수>
Arrows 는 함수를 짧게 표현하는 방식(람다식)을 말한다.
() => { }
()안에는 매개변수가 들어가고 {}에는 행해야 하는 연산을 넣는다.
-기존-
function test(title) {
console.log(title + ": 제목입니다."); //title(매개변수): 제목입니다.
}
function test1() {
console.log("제목입니다.") //제목입니다.
}
let list = [1,2,3,4,5]
list.forEach(function(item) {
console.log(item); // 1 2 3 4 5
});
-축약-
let list = [1,2,3,4,5]
test = title => { //매개변수 하나일 때 ()생략가능
console.log(title + ": 제목입니다.") //title(매개변수): 제목입니다.
}
test1 = (() => {
console.log("제목입니다.") //제목입니다.
})
list.forEach(item => console.log(item)); //1 2 3 4 5
<묵시적 반환>
return 은 함수 결과를 반환하는데 사용된다.
한줄로만 작성된 arrow 함수는 return 명령어가 없어도 자동으로 반환 하도록 되어 있다. (중괄호 ({})를 생략한 함수여야 return 명령어도 생략 가능하다)
한줄 이상의 문장을 반환 하려면 중괄호 대신 괄호를 사용해서 함수를 묶어야 한다.
-기존-
function test() {
return 100; //100 반환
}
-축약-
test1 = () => (
100 //100 반환
);
<파라미터 기본값 지정>
함수 선언문에서 기본값을 지정해 줄 수 있다.
-기존-
function test(x,y,z) {
if (x === undefined) x = 5;
if (y === undefined) y = 7;
return x * y * z;
}
-축약-
test1 = (x = 5, y = 7, z) => (x * y * z);
test1(1) // 35
<템플릿 리터럴>
ES5버전에서는 문자열사이에 변수의 값을 넣을 때에는 "문자열" + 변수 + "문자열"을 해주었어야 했다.
ES6버전에서는 백틱(backtick) 을 사용해서 문자열을 감싸고, ${}를 사용해서 변수를 담아주면 된다.
-기존-
let x = 5;
let y = 7;
const test = x + " * " + y + " = " + (x * y) + " 입니다." // x * y = 35 입니다.
-축약-
let x =5, y = 7;
const test1 = `${x} * ${y} = ${x*y} 입니다.`
<비 구조화 할당>
컴포넌트나 API간 데이터를 전송하기 위해서 객체 리터럴이나 배열로 이뤄진 데이터를 사용할 경우가 많다.
데이터 객체가 컴포넌트에 들어가게되면 unpack이 필요하다.
-기존-
const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');
const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;
-축약-
import { observable, action, runInAction } from 'mobx';
const { store, form, loading, errors, entity } = this.props;
<전개 연산자>
배열의 값만 합칠 때 concat이라는 함수를 썼어야됐다.
ES6에서는 ... 점 세개만 붙여주면 된다.
-기존-
function test() {
const list = [1,3,5];
const numbers = [2,4,6].concat(list);
console.log(numbers); // [2,4,6,1,3,5]
}
function test1() {
const list = [1,3,5,4];
const numbers = list.slice();
console.log(numbers); // [1,3,5,4]
}
-축약-
function test() {
const list = [1,3,5];
const numbers = [2,4,6, ...list]
console.log(numbers); //[2,4,6,1,3,5]
}
function test1() {
const list = [1,3,5,4];
const numbers = [...list]
console.log(numbers); // [1,3,5,4]
const numbers1 = [2, ...list, 7,8]
console.log(numbers1); // [2,1,3,5,4,7,8];
const {a,b, ...z} = {a:1, b:2, c:3, d:4 };
console.log(a); //1
console.log(b); //2
console.log(z); //{c:3, d:4}
}
<필수(기본) 파라미터>
기본적으로 자바스크립트는 함수의 파라미터 값을 받지 않았을 경우에 undefined로 지정한다. 다른 언어들은 경고나 에러 메세지를 나타내기도 한다. 이런 기본 파라미터 값을 강제로 지정하는 방법은 if문을 사용해서 undefined일 경우 에러가 나도록하거나, 'Mandatory parameter shorthand'를 사용하는 방법이 있다.
-기존-
function test(value) {
if(value === undefined) {
throw new Error('Missing parameter!');
}
return value;
}
-축약-
let mandatory = () => {
throw new Error('Missing parameter!');
}
let test1 = (value = mandatory()) => {
return value;
}
이외에 다른 기법들을 아신다면 댓글로 알려주시면 감사하겠습니다.. !