ECMAScript 2015

ECMA2015를 사용하기 위한 프로젝트 설정

• 프로젝트를 위한 임의이 디렉터리 생성
• npm init 명령으로 package.json 파일 생성

C:\JetBrains\vscode_workspace\es2015test> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (es2015test)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\JetBrains\vscode_workspace\es2015test\package.json:

{
  "name": "es2015test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)


   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │      New minor version of npm available! 6.4.1 -> 6.14.9       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.14.9   │
   │               Run npm install -g npm to update!                │
   │                                                                │
   ╰────────────────────────────────────────────────────────────────╯

PS C:\JetBrains\vscode_workspace\es2015test>

• npm install -g babel-cli yarn
• yarn add -D babel-cli babel-preset-env babel-preset-stage-2
• 또는 yarn add --save-dev babel-cli babel-preset-env babel-preset-stage-2
  • --save-dev : Babel은 개발 중인 경우에만 사용하므로 --save-dev 옵션 사용
  • babel-preset-env : es2015, es2016, es2017 가장 최신의 프리셋 제공
  • babel-preset-stage-2 : 아직 표준은 아니지만 stage-3를 포함하고 초안상태로 등록된 기능의 프리셋 제공 
• 프로젝트디렉터리(es2015test)에 .babelrc 파일을 추가하고 다음과 같이 입력

{
    "presets" : ["env","stage-2"]
}
// 사용할 프리셋으로 env, stage-2를 지정한다는 의미

• babeltest.js 파일 작성

let name = 'world';
console.log(`Hello ${name}`);

• babel src -d build

C:\JetBrains\vscode_workspace\es2015test>babel src -d build
src\babeltest.js -> build\babeltest.js

C:\JetBrains\vscode_workspace\es2015test>

• node build/babeltest.js

C:\JetBrains\vscode_workspace\es2015test>node build/babeltest.js
Hello world

C:\JetBrains\vscode_workspace\es2015test>

• https://babeljs.io/repl/ 에서도 간단하게 트랜스파일 기능을 확인할 수 있음

let, const

var은 함수 단위의 스코프만 지원하므로 블록 단위의 스코프도 지원하기 위해 let 키워드를 도입

let msg = "GLOBAL";
function outer(a) {
    let msg = "OUTER";
    if(true) {
        let msg = "BLOCK";
        console.log(msg);
    }
}


/// babel 변환 
"use strict"

var msg = "GLOBAL";
function outer(a) {
    var msg = "OUTER";
    if(true) {
        var _msg = "BLOCK";
        console.log(msg);
    }
}

 

let, const 는 중복을 허용하지 않음

var a = 100;
var a = 'hello';
var a = { name :'aa', age : 20};


// let, const 는 중복을 허용하지 않음
let a = 100;
let a = 'hello';

기본 파라미터와 가변 파라미터

// 기본 파라미터
function addContact(name, mobile, home="없음",address="", email="") {
    var str = `name=${name}, mobile=${mobile}, home=${home}, address=${address}, email=${email}`;
    console.log(str);
}
addContact('홍길동','010-0000-0000');
addContact('홍길동','010-0000-0000','서울시');


// 가변 파라미터
function addContact(name, age, ...favoriteFoods) {
    console.log(name + ',' + age);
    console.log(favoriteFoods);
}
addContact('홍길동',20);
addContact('홍길동',20, "밥", "짜장면", "빵");

 

구조 분해 할당

let arr = [10, 20, 30, 40, 50];
let [a1, a2, a3] = arr;
console.log(a1, a2, a3);

let p1 = {name: "홍길동", age: 20, gender : 'M'};
let { name:n, age: a, gender } = p1;
console.log(n, a, gender);

function addContact({ name, phone, email="이메일 없음", age=0}) {
    var str = `name=${name}, phone=${phone}, home=${home}, address=${address}, email=${email}`;
    console.log(str);
}
addContact({name: '이몽룡', phone : '010-1111-1111'});

 

화살표 함수

• 주의할 점: 화살표 함수와 전통적인 함수는 서로 다른 this 값이 바인딩 된다.

function Person(name, yearCount) {
    this.name = name;
    this.age = 0;
    
    var incrAge = function(){
        this.age+;
    }
    for(var i=1; i <= yearCount; i++) {
        incrAge();
        /* 올바른 값이 나오려면 다음과 같이 처리 
        incrAge.apply(this);
        */
    }
}
var p1 = new Person("홍길동", 20);
console.log(p1.age);
// this.age 는 0 이 출력



function Person(name, yearCount) {
    this.name = name;
    this.age = 0;
    
    var incrAge = () => {
        this.age++;
    }
    for(var i=1; i <= yearCount; i++) {
        incrAge();
    }
}
var p1 = new Person("홍길동", 20);
console.log(p1.age);
// this.age 는 20 이 출력

 

새로운 객체 리터럴

var name = "홍길동";
var age = 20;
var email = 'aaa@test.com';

// 객체의 속성과 변수명이 같으면 생략가능
var obj = {
    name,
    age,
    email,
    discount(rate) {

    }
};
/*
var obj = {
    name:name, 
    age:age, 
    email:email, 
    discount: function discount(rate) {

    }
};*/

 

템플릿 리터럴

var d1 = new Date();
var name = "홍길동";
var r1 = `${name} 님에게 ${d1.toDateString()}에 연락했다.`;

var product = "갤럭시";
var price = 199000;
var str = `${product}의 가격은
          ${price}원 입니다.`;
console.log(str);

 

컬렉션

var s1 = new Set();
s1.add("사과");
s1.add("배");
s1.add("사과");
s1.add("포도");
console.log(s1); // Set {'사과','배','포도'};


var ss1 = new Set(['사과','배','포도']);
var ss2 = new Set(['파인애플', '키위', '배']);

// 합집합
var union = new Set([...ss1.values(), ...ss2.values() ]);
console.log(union);

// 교집합
var intersaction = new Set([...ss1.values()).filter(e => ss2.has(e));
console.log(intersaction);

// 차집합
var diff = new Set([...ss1.values()).filter(e => !ss2.has(e));
console.log(diff);


///////////// Map 
// 키 값 쌍이며 키는 고유한 값
let teams = new Map();
teams.set('LG','트윈스');
teams.set('삼성','라이온스');
teams.set('NC','다이노스');
teams.set('기아','타이거즈');
console.log(teams.has('LG'));  //true
console.log(teams.has('SK'));  //false

 

클래스

class Person {
    constructor(name, tel, address) {
        this.name = name;
        this.tel = tel;
        this.address = address;
        if(Person.count) { Person.count++; } else { Person.count = 1; }
    }
    static getPersonCount() {
        return Person.count;
    }
    toString() {
        return `name=${this.name}`;
    }
}
class Emplyee extends Person {
    constructor(name, tel, address, empno, dept) {
        super(name, tel, address);
        this.empno= empno;
        this.dept = dept;
    }
    toString() {
        return super.toString() + `empno=${this.empno}`;
    }
    getEmpInfo() {
        return `${this.empno} : ${this.name}은 ${this.dept} 부서 입니다.`;
    }
}

var p = new Person('이몽룡','010-2222-2222','경기도');
var e = new Emplyee('홍길동','010-2222-2223','서울','A1111','회계팀');
console.log(p.toString());
console.log(e.toString());
console.log(Person.getPersonCount();

 

모듈

• 독립성을 가진 재사용 가능한 코드 블록, 기본적으로 파일 별로 지역적이나 import, export 구문을 이용외부파일의 객체및 함수를 가져와 재사용할 수 있다.

//==== src/utils/utility1.js 

export let var1 = 100;
export function add(a, b){
    return a+b;
}

/* 또는 
let var1 = 100;
function add(a, b){
    return a+b;
}
export { var1, add };

*/

//==== src/import1.js

// import 할 때 상대경로를 사용한다.
import {add, var1 } from .'/utils/utility1'
console.log(add(4,5));
console.log(var1);


//==== src/import2.js

// 별칭으로 바꿔 사용할 수 있다.
import {add, var1 as v } from .'/utils/utility1'
console.log(add(4,5));
console.log(v);

 

• 단일 객체일 경우 default 구문을 이용 구조분해 할당을 하지 않고 단일 객체로 가져올 수 있음

//==== src/utils/utility3.js
let calc = {
    add(x,y) { return x+y; },
    multiply(x,y) { return x*y; },
}
export default calc;


//==== src/import.js
import calc from './utils/utility3.js';

console.log(calc.add(4, 5));
console.log(calc.multiply(4, 5));

 

Promise

var p = new Promise(fuction(resolve, reject)) {
    setTimeout(function(){
        var num = Math.round(Math.random()*20);
        var isValid = num % 2;
        if(isValid) { resolve(num); }
        else { reject(num); }
        
    }, 2000);
}).then(function(num){
    console.log("홀수 : " + num);
}).catch(function(num){
    console.log("짝수 : " + num);
});

// fetch.min.js 의 fetch 함수 의 예
fetch(url).then((response) => response.json())
          .then((json) => console.log(json))
          .catch((e) => console.log(e.message));

 

 

전개 연산자

let obj1 = {name: '박문수', age: 29};
let obj2 = { ...obj1 };
let obj3 = { ...obj1, email : 'aaa@bbb.com' };

console.log(obj1 === obj2); // false
console.log(obj3);

let arr1 = [100, 200, 300];
let arr2 = ["hello", ...arr1, "world"];
console.log(arr2);