ES6

ES6

 

1. Property Shortand

const id = 'ellen',
name = '엘렌이',
age = 10;
const member = {
 id : id,
 name : name,
 age : age
};


const id = 'ellen',
name = '엘렌이',
age = 3;
const member = {
 id,
 name,
 age
 };

 

2. Concise method

const member = {
 id : id,
 name : name,
 age : age,
 info : function() {
 	console.log('info');
 }
 };
 
 const member = {
  id,
  name,
  age,
  info() {
  	console.log('info');
  }
  };

 

3. Destructuring

• 객체 (배열, 객체)에 입력된 값을 개별적인 변수에 할당하는 간편 방식

const member = {
 id : 'aaa',
 name : 'bbb',
 age : 22,
};

<!-- ex 1 -->
let id = member.id;
let name = member.name;
let age = member.age;

<!-- ES6 -->

let {id, name, age} = member;


<!-- ex 2 -->
let member = getMember();
let id = member.id;
let name = member.name;
let age = member.age;

<!-- ES6 -->
let {id, name, age} = getMember();

<!-- ex 3 -->
function showMember(member){
 console.log("아이디 : ", member.id);
 console.log("이름 : ", member.name);
 console.log("나이 : ", member.age);
 }
 
 <!-- ES6 -->
 function showMember({id, name, age}){
 console.log("아이디 : ", id);
 console.log("이름 : ", name);
 console.log("나이 : ", age);
 }

 

 

4. Module

• 프로그램을 기능별로 여러 개의 파일로 나누는 형태
• Module 시스템에서 ESM(ECMAScript Module, ECMA215, es6) 자바스크립트 자체 모듈을 사용

 

1) Module 정의 및 사용

• 가져오기 : import / import 모듈명 from 모듈 위치
• 내보내기 : export / export default

<!-- ex 1 -->
<!-- 내보내기 export -->
export const tilte = "계산기 모듈";
export function add(i, j){
	return i + j;
}

export function sub(i, j){
	return i - j;
}


<!-- 가져오기 import -->
import {title, add, sub} from '파일명';

<!-- ex 2 -->
<!-- 내보내기 export -->
const tilte = "계산기 모듈";
function add(i, j){
	return i + j;
}

function sub(i, j){
	return i - j;
}

export { title, add, sub }


<!-- 가져오기 import -->
import {title, add, sub} from '파일명';


<!-- ex 3 -->
<!-- 내보내기 export default -->
export default {
 tilte : '계산기 모듈',
 add(i, j) { return i+j;},
 sub(i, j) { return i-j;}
 }


<!-- 가져오기 import -->
import cal from '파일명';
cal.title
cal.add(20, 10)
cal.sub(20, 10)