[ECMA Script 2015] 기타 추가된 기능들

이 내용은 아래 링크에서 동영상 강의도 같이 보실 수 있습니다.

[ 동영상 강의 보기 ]

축약 표현

ECMA Script는 json객체 생성시 key값과 변수명이 같다면 아래와 같이 생략 가능합니다.

let name = '이름';
let age = 30;

let user = {
    name: name,
    age: age
};

console.log(user.name); // 이름
console.log(user.age); // 30

// ES6
let user = {
    name,
    age
};

console.log(user.name); // 이름
console.log(user.age); // 30

메소드역시 축약표현이 가능한데 아래와 같이 function키워드를 지우고 선언하면 됩니다.

let obj = {
    name: 'obj',
    test: function() {
        return this.name;
    }
};

// es6
let es6Obj = {
    name: 'es6obj',
    // 일반 함수
    test() {
        return this.name;
    },
    // generator 함수
    * generator() {
        yield 1;
    }
};

console.log(obj.test()); // obj
console.log(es6Obj.test()); // es6obj

Destructuring

배열이나 json객체의 값을 일괄로 개별 변수로 가져오거나 필요한 값만 빼올수 있는 기능이 추가됐습니다.

- 배열 destructuring

let arr = [1, 2, 3];

// 변수선언 시 배열에서 값 추출하여 일괄 초기화
const [one, two, three] = arr;

console.log(one);
console.log(two);
console.log(three);

let x, y, z;

[x, y] = [1, 2];
console.log(x, y); // 1 2

[x, y] = [1];
console.log(x, y); // 1 undefined

[x, y] = [1, 2, 3];
console.log(x, y); // 1 2

[x, , z] = [1, 2, 3];
console.log(x, z); // 1 3

// 기본값
[x, y, z = 3] = [1, 2];
console.log(x, y, z); // 1 2 3

[x, y = 10, z = 3] = [1, 2];
console.log(x, y, z); // 1 2 3

// spread 연산자
[x, ...y] = [1, 2, 3];
console.log(x, y); // 1 [ 2, 3 ]

- 객체 destructuring

let user = {
    name: '이름',
    age: 30
};

let name = user.name;
let age = user.age;

console.log(name); // 이름
console.log(age); // 30

// es6
let { name, age } = user;

console.log(name);
console.log(age); // 30

- destructuring 활용

자바스크립트에서 내부 데이터는 대부분 json객체로 돌아다니는데 함수 파라메터로 원하는 값만 뽑아서 사용할 수 있습니다.

let user = {
    name: '이름',
    age: 30
};

function koreanAge({ age }) {
    return age + 1;
}

console.log(koreanAge(user)); // 31

Module

모듈화를 위한 import, export 키워드가 추가됐습니다.

- export

각 모듈은 독립적인 스코프를 갖기 때문에 외부에서 사용할 항목들을 export를 통해 공개해야 합니다.

// 변수 공개
export const guest = {
    name: '손님',
};

// 함수 공개
export function register(data) {
    return axios.post('api/user/register');
}

// 클래스 공개
export class User {
    constructor(name) {
        this.name = name;
    }
}

또는 이렇게 하나의 객체로 모아서 export할 수 있습니다.

const guest = {
    name: '손님',
};

function register(data) {
    return axios.post('api/user/register');
}

class User {
    constructor(name) {
        this.name = name;
    }
}

export {
    guest,
    register,
    User
};

import문에서 별도의 명시 없이 기본으로 가져갈 항목은 아래와 같이 export default로 내보냅니다.

export default function() {
};

- import

모듈에서 export된 항목을 import로 가져와 사용할 수 있습니다.

 // import할 모듈의 위치를 상대경로로 명시하고 확장자 .js는 생략 가능합니다.
import { guest, register, User } from './user';

console.log(guest); // guest json 객체
console.log(register); // register 함수
console.log(User); // User 클래스

한꺼번에 import하기

// user모듈에서 export한 모든 항목을 user라는 이름으로 가져옵니다.
import * as user from './user';

console.log(user.guest);
console.log(user.register);
console.log(user.User);

만약 export default로 내보낸 항목이 있다면 별도의 항목을 명시하지 않아도 아래와 같이 기본값을 사용할 수 있습니다.

import user from './user';

npm으로 설치한 node_modules디렉토리 안에 있는 모듈 가져오기

// node_modules디렉토리 안에 있는 모듈은 모듈명만 적어줍니다.
import co from 'co';

co(function* () {
});