티스토리 뷰
이 내용은 아래 링크에서 동영상 강의도 같이 보실 수 있습니다.
축약 표현
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* () { });
'수업자료 > ECMA Script' 카테고리의 다른 글
[ECMA Script 2015] 콜백 지옥에서 탈출하는 방법! Generator (0) | 2018.08.20 |
---|---|
[ECMA Script 2015] 콜백 지옥에서 탈출하는 방법! Promise (1) | 2018.08.16 |
[ECMA Script 2015] Class (0) | 2018.08.13 |
[ECMA Script 2015] 화살표 함수 ( Arrow function ) (0) | 2018.08.07 |
[ECMA Script 2015] ECMA Script와 새로운 변수할당 키워드 let, const 소개 (0) | 2018.07.30 |
댓글