[JavaScript] ECMAScript 6

소개

• ECMA(European Computer Manufacturers Association) Script는 JavaScript 프로그래밍 언어를 정의하는 국제 표준의 이름이다. 현재 사용하는 대부분의 JavaScript는 2009년에 처음 제정되어 2011년에 개정된 ECMAScript 5.1 표준에 기반하고 있다.
• 이후 클래스 기반 상속, 데이터 바인딩(Object.observe), Promise 등 다양한 요구사항들이 도출되었다. 그 결과 2015년 6월에 대대적으로 업데이트된 ECMAScript 6 를 발표했고, 매년 표준을 업데이트하는 정책에 따라 2016년 6월에 ECMAScript 7 를 발표했다.
• ES6 = ECMAScript6 = ECMAScript 2015 = ES2015 으로 표기한다.
• 최신 Front-End Framework인 React, Angular, Vue에서 권고하는 언어 형식이다.

---

 

ES6

1. const & let - 새로운 변수 선언 방식

• 블록단위 { } 로 변수의 범위가 제한
• const : 한번 선언한 값에 대해서 변경할 수 없음 (상수 개념)
• let : 한번 선언한 값에 대해서 다시 변경할 수 있음

const value = 30;
value = 40;
// Uncaught TypeError: Assignment to constant variable.

var b = 30;
var b = 40;
let a = 20;
let a = 20;
// Uncaught SyntaxError: Identifier 'a' has already been declared

2. Hoisting

• Hoisting 이란 선언한 함수와 변수를 해석기가 있는 상단에 있는 것 처럼 인식한다.
• js 해석기는 코드의 라인 순서와 관계 없이 함수 선언식과 변수를 위한 메모리 공간을 먼저 확보한다.
• function a()와 var는 코드의 최상단 으로 끌어 올려진 것(hoisted) 처럼 보인다.

// function statement (함수 선언문)
function willBeOveridden() {
return 10;
}
willBeOveridden(); //5
function willBeOveridden() {
return 5;
}

// function expression(함수 표현식)
var sum = function() {
return 10 + 20;
}

var sum = 5;
sum = sum + i;
function sumAllNumbers() {
//…
}
var i = 10;

// #1 – 함수 선언식과 변수 선언을 hoisting
var sum;
function sumAllNumbers() {
//..
}

var i;
// #2 – 변수 대입 및 할당
sum = 5;
sum = sum + i;
i = 10;

3. const keyword

• const로 지정한 값 변경 불가능
• 객체나 배열의 내부는 변경 가능

const obj = {};
obj.value = 40
console.log(obj);

const arr = [];
arr.push(20);
console.log(arr);

4. let keyword

• 기존 자바스크립트(ES5)는 { } 에 상관 없이 스코프가 설정
• ES6는 { } 단위로 변수의 스코프가 제한됨

// ES5
var sum = 0;
for(var i = 1; i <= 5; i++) {
sum = sum + i;
}
console.log(sum); //15
console.log(i); //6

// ES6
let sum = 0;
for(let i = 1; i <= 5; i++) {
sum = sum + i;
}
console.log(sum); //15
console.log(i); //Uncaught Reference Error: i is not defined

// const&let
function f() {
{
let x;
{
// 새로운 블록 안에 새로운 x의 scope가 생김
const x = "sneaky";
x = "foo"; //위에 이미 const로 x를 선언했으므로 다시 값을 대입하면 에러 발생
}
// 이전 블록 범위로 돌아왔기 때문에 'let x'에 해당하는 메모리에 값을 대입
x = "bar";
let x = "inner"; //Uncaught SyntaxError: Identifier 'x' has already been declare
}
}

5. Arrow Function - 화살표 함수

• 함수를 정의할 때 function 키워드를 사용하지 않고 => 로 대체
• 흔히 사용하는 콜백함수의 문법을 간결화

// ES5
var sum = function(a, b) {
return a + b;
}
sum(10,20);

// ES6
var sum = (a, b) => {
return a + b;
}
sum(10,20);

var sum2 = (a,b) => a + b;
sum2(10,20);

Arrow 함수와 기존 함수의 차이점

• Arrow 함수와 기존 함수는 참조하고 있는 this의 값이 다르다.

// 기존 함수
function BlackDog() {
this.name = '흰둥이';
return {
name:'검둥이',
bark: function() {
console.log(this.name + ' 멍멍!');
}
}
}
const blackDog = new BlackDog();
blackDog.bark(); // 검둥이 멍멍!

// Arrow 함수
function WhiteDog() {
this.name = '흰둥이';
return {
name:'검둥이',
bark: () => {
console.log(this.name + ' 멍멍!');
}
}
}
const whiteDog = new WhiteDog();
whiteDog.bark(); // 흰둥이 멍멍!

6. Enhance Object Literals - 향상된 객체 리터럴

• 객체의 속성을 메서드로 사용할 때 function 예약어를 생력하고 생성 가능

var dictionary {
words: 100;
//ES5
lookup: function() {
console.log("find words");
},
//ES6
lookup() {
console.log("find words");
}
}

• 객체의 속성 이름과 값이 같으면 아래와 같이 축약 가능

var figures = 10;
var dictionary = {
//figures: figures
figures
}

---

ES6 축약 코딩 기법

1. 삼항 조건 연산자

// 기존
const x = 20;
let answer;
if (x > 10) {
answer = 'greater than 10';
} else {
answer = 'less than 10';
}

// 축약 기법
const answer = x > 10 ? 'greater than 10' : 'less than 10'; 

// React 에서 사용 (특정 버튼을 state 값에 따라 보이게 할 경우)
{editable ? (
<a onClick={() => this.save(record.key)}> </a>
) : (
<a onClick={() => this.edit(record.key)}> </a>
)}

2. 간략 계산법

• 기존의 변수를 다른 변수에 할당하고 싶은 경우, 기존 변수가 null, undefined 또는 empty 값이 아닌 것을 확인 해야 한다. (위 세가지 일 경우 에러 발생)
• 이를 해결 하기 위해 긴 if문 을 작성 하거나 축약 코딩으로 한 줄에 끝낼 수 있다.

// 기존
if (variable1 != null || variable1 !== undefined || variable1 !== '') {
let variable2 = variable1;
}

// 축약기법
const variable2 = variable1 || 'new';

// Console 에서 확인
let variable1;
let variable2 = variable1 || '';
console.log(variable2 === ''); //print true
let variable3 = 'foo';
let variable4 = variable3 || 'foo';
console.log(variable4 === 'foo'); //print true

3. 변수 선언

// 기존
let x;
let y;
let z = 3;

// 축약 기법
let x,y,z = 3;

4. For 루프

// 기존
for (let i=0; i < msgs.length; i++)

// 축약기법
for (let value of msgs)

// Array.forEach 축약기법
function logArrayElements(element,index, array) {
console.log('a[' + index + '] = ' + element);
}
[2,5,9].forEach(logArrayElements);
//a[0] = 2
//a[1] = 5
//a[2] = 9

5. 간략 계산법

• 기본 값을 부여하기 위해 파라미터의 null 또는 undefined 여부를 파악할 때 short-circuit evaluation 방법을 이용해서 한줄로 작성하는 방법이 있다.
• Short-circuit evaluation 이란?
  두가지의 변수를 비교할 때, 앞에 있는 변수가 false 일 경우 결과는 무조건 false 이기 때문에 뒤의 변수는 확인 하지 않고 return 시키는 방법.
• 아래의 예제에서는 process.env.DB_HOST 값이 있을 경우 dbHost 변수에 할당하지만, 없으면 localhost를 할당

// 기존
let dbHost;
if (process.env.DB_HOST) {
dbHost = process.env.DB_HOST;
} else {
dbHost = 'localhost';
}

// 축약기법
Const dbHost = process.env.DB_HOT || 'localhost';

6. 묵시적 반환(Implicit Return)

• return 은 함수 결과를 반환 하는데 사용되는 명령어.
• 한 줄로만 작성된 arrow 함수는 별도의 return 명령어가 없어도 자동으로 반환
• 중괄호({})를 생략한 함수여야 return 명령어도 생략 할 수 있다.
• 한 줄 이상의 문장(객체 리터럴)을 반환 하려면 중괄호({})대신 괄호(())를 사용해서 함수를 묶어야 한다. 이를 통해 함수가 한 문장으로 작성 되었음을 나타낼 수 있다.

// 기존
function calcCircumference(diameter) {
return Math.PI * diameter
}

// 축약기법
calcCircumference = diameter => (
Math.PI * diameter;
)

7. 파라미터 기본 값 지정(Default Parameter Values)

• 기존에는 if 문을 통해서 함수의 파라미터 값에 기본 값을 지정해 줘야 했다. ES6에서는 함수 선언문 자체에서 기본값을 지정해 줄 수 있다.

// 기존
function volume(l, w, h) {
if (w === undefined)
w = 3;
if (h === undefined)
h = 4;
return l * w * h;
}

// 축약기법
volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 24

8. 템플릿 리터럴(Template Literals)

• 백틱(backtick(`))을 사용해서 스트링을 감싸고, ${}를 사용해서 변수를 담아 주면 된다.

// 기존
const welcome = 'You have logged in as ' + first + ' ' + last + '.'
const db = 'http://' + host + ':' + port + '/' + database;

// 축약기법
const welcome = `You have logged in as ${first} ${last}`;
const db = `http://${host}:${port}/${database}`;

9. 비구조화 할당(Destructuring Assignment)

• 데이터 객체가 컴포넌트에 들어가게 되면, unpack이 필요하다.

// Destructuring Assignment 기본 문법
let a, b, rest;
[a, b] = [1, 2];
[a, b, ...rest] = [10, 20, 3, 4, 5];
let foo = ["one", "two", "three"];
let [foo1, foo2, foo3] = foo;

// 값 교환(Swapping)
let a = 1;
let b = 3;
[a, b] = [b, a];

// 객체 분해
let obj = {p: 42, q: true};
let {p, q} = obj;

// 기존
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;

10. 전개연산자(Spread Operator)

• ES6의 전개 연산자는 자바스크립트 코드를 더 효율적으로 사용 할 수 있다.
• 배열의 값을 변환하는데 사용할 수 있다. 전개 연산자를 사용하는 방법은 점 세개(...)를 붙이면 됩니다.

// 기존 joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);

// 기존 cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice();

// 축약기법 joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]

// 축약기법 cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

• concat()함수와는 다르게 전개 연산자를 이용하면 하나의 배열을 다른 배열의 아무 곳에나 추가할 수 있다.

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

• 전개 연산자는 ES6의 구조화 대입법(destructuring notation)과 함께 사용할 수도 있다.

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 }

11. 필수(기본) 파라미터(Mandatory Parameter)

• 자바스크립트는 함수의 파라미터 값을 받지 않았을 경우, undefined로 지정한다. 다른 언어들은 경고나 에러 메시지를 나타내기도 한다.
• 기본 파라미터 값을 강제로 지정하는 방법은 if 문을 사용해서 undefined일 경우 에러가 나도록 하거나, ‘Mandatory parameter shorthand’을 사용하는 방법이 있다.

// 기존
function foo(bar) {
if(bar === undefined) {
throw new Error('Missing parameter!');
}
return bar;
}

// 축약기법
let mandatory = () => {
throw new Error('Missing parameter!');
}
let foo = (bar = mandatory()) => {
return bar;
}

12. Promise 객체

• “A promise is an object that may produce a single value some time in the future”
• Promise는 자바스크립트 비동기 처리에 사용되는 객체다.
  여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미한다.
  new Promise(function(resolve, reject) { ... } );
• Promise 객체를 생성하면 resolve와 reject의 함수를 전달받는다.
  작업이 성공하면 resolve함수를 호출하여 resolve의 인자값을 then으로 받게 되고
  작업에 실패하면 reject 함수를 호출하여 reject의 인자값을 catch로 받게 된다.
  성공, 실패 여부에 관계없이 항상 처리 되게 하려면 finally로 받아서 처리할 수도 있다.

new Promise(function (resolve, reject) {
}).then(function (resolve) {
//resolve 값 처리
}).catch(function (reject) {
//reject 값 처리
}).finally(function(){
//항상 처리
});

13. import / export

• ES6(ECMA2015)부터는 import / export 라는 방식으로 모듈을 불러오고 내보낸다.
• Export는 내부 스크립트 객체를 외부 스크립트로 모듈화 하는 것이며, export 하지 않으면 외부 스크립트에서 import를 사용할 수 없다.

// app.js (export)
export const myNumbers = [1, 2, 3, 4];
const animals = ['Panda', 'Bear', 'Eagle'];

export default function myLogger() {
console.log(myNumbers, pets);
}

export class Alligator {
constructor() {
// ...
}
}

// import

// importing with alias
import myLogger as Logger from 'app.js';

// importing all exported members
import * as utils from ‘app.js’;
Utils.myLogger();

// importing a module with a default member
import myLogger from ‘app.js’;
import myLogger, { Alligator, myNumbers } from 'app.js';