SlideShare a Scribd company logo
ECMAScript 2015
by jbee
[ES6] 5. Destructuring and Default
Parameter
Destructuring
 shorthand 방식을이용하여함수의반환값을바로객체에할당할수있다.
이때함수에서반환되는프로퍼티값과 지역변수의이름이같아야가능하다.
이렇게 하면함수의반환값을임시객체에저장하고 그 객체의프로퍼티를통
해접근하여지역변수에할당하는과정을축소할수있다. 굳이전체를객체에
할당하지않고 부분적으로만할당도가능하다. 즉, 리턴되는값이객체일경우,
그 객체를분해하여바로지역변수로접근이가능하다는것이다. (iterable
protocol을구현해야만destructuring이가능하다.)
function buildUser(first, last){
let fullName = first + " " + last;
return {first, last, fullName};
}
let { first, last, fullName } = buildUser("Sam", "Williams"
console.log(first); // Sam
console.log(last); // Williams
console.log(fullName); // Sam Williams
굳이전체를객체에할당하지않고 부분적으로만할당도가능하다.
let { fullName } = buildUser("Sam", "Williams");
console.log( fullName ); // Sam Williams
Method Initializer Shorthand
객체에함수를추가할때, 객체의프로퍼티에익명함수를추가하는방식을사
용했다. ES6에서는메소드를활용한다. 비교를위해ES5도함께제시한다.
ES5code>>
function buildUser(first, last, postCount){
return {
first: first,
last: last,
isActive: function( ) {
//...
}
}
}
ES6code>>
function buildUser(first, last, postCount){
return {
first,
last,
isActive( ) {
//...
}
}
}
Destructuring Assignment
오른쪽의배열을분할하여왼쪽변수에값을 할당 한다. 인덱스번째의엘리먼
트값을인덱스번째의변수에할당하는것이다. 엘리먼트가 아직남았는데할
당할변수가 없다면그대로할당되지않고, 엘리먼트가 남지않았는데할당한
변수가 있다면그 변수는 undefined 로할당된다.
let one, two, three, four;
//case1
[one, two] = [1, 2];
console.log(one); //1
console.log(two); //2
//case2
[one, two, three] = [1, 2];
console.log(one); //1
console.log(two); //2
console.log(three);//undefined
//case3
[one, two] = [1, 2, 3];
console.log(one); two//1
console.log(two); //2
이전Chapter에서다뤘던 Spread 연산자를사용할수있으며, 공백으로두
어해당값을건너뛰고  할당 할수있다.
[one, ...other] = [1, 23, 24, 25];
console.log(one); //1
console.log(other); //[23, 24, 25]
[one, , , four] = [1, 2, 3, 4];
console.log(one); //1
console.log(four); //4
Default Value
 destructuring 을통해값을할당할때, 해당하는값이없을때,
 undefined 대신할당할default value를지정해줄수있다.
let [first, second, third = 3] = [1, 2];
console.log(first); //1 by destructuring
console.log(second); //2 by destructuring
console.log(third); //3 by default value
물론해당하는값이존재할때는default value는무시된다.
let [fourth, fifth, sixth = 6] = [4, 5, 66];
console.log(first); //4 by destructuring
console.log(second); //5 by destructuring
console.log(third); //66 by destructuring
Default Parameter
parameter에값이넘어가지않아도, default value로설정된값이해당파라
미터대신값이할당된다. parameter에서도마찬가지로기존의default
value는 undefined 값이었지만, 그 값을코드상에서설정할수있게 된것
이다.
let somethingFunction = (prev, post = 20) => prev + post;
console.log(somethingFunction(1)); //21 by default parameter
console.log(somethingFunction(1, 2)); //3
console.log(somethingFunction(1, undefined)); //21 by default p
console.log(somethingFunction(1, null)); //1
length property of Function
함수에도 length 라는 property 가 따로존재한다. 그런데이때,
 default parameter 는 length 에서무시된다.
getTotal(100); //1
getTotal(100, 0.05); //2
console.log(getTotal.length); //1
한가지주의할점이있다.  let 으로선언했을때의값은Default parameter
와는다르기 때문에,  Destructuring 으로값을덮어쓸수있다.  let 으로
선언했을때할당하는것과는다르다.
default parameter code>>
let salary = [100, 200, 300];
let [low, avg, high = 500] = salary;
console.log(high); //500
high 값으로 300 을넘겨주었고 그 값을다시 500 으로변경한다.
let assignment code>>
let salary = [100, 200, 300];
let low, avg, high = 500;
[low, avg, high] = salary;
console.log(high); //300
원래 500 이었는데salary의 300 이그 값을대체한다.
5. end

More Related Content

Similar to [ES6] 5. Destructuring

Parallel objects
Parallel objectsParallel objects
Parallel objects
용준 김
 
Start IoT with JavaScript - 6.함수
Start IoT with JavaScript - 6.함수Start IoT with JavaScript - 6.함수
Start IoT with JavaScript - 6.함수
Park Jonggun
 
12장 상속 (고급)
12장 상속 (고급)12장 상속 (고급)
12장 상속 (고급)
유석 남
 
[스프링 스터디 3일차] @MVC
[스프링 스터디 3일차] @MVC[스프링 스터디 3일차] @MVC
[스프링 스터디 3일차] @MVC
AnselmKim
 
[스프링 스터디 2일차] 서비스 추상화
[스프링 스터디 2일차] 서비스 추상화[스프링 스터디 2일차] 서비스 추상화
[스프링 스터디 2일차] 서비스 추상화
AnselmKim
 
자바스크립트 클래스의 프로토타입(prototype of class)
자바스크립트 클래스의  프로토타입(prototype of class)자바스크립트 클래스의  프로토타입(prototype of class)
자바스크립트 클래스의 프로토타입(prototype of class)
탑크리에듀(구로디지털단지역3번출구 2분거리)
 
Startup JavaScript 6 - 함수, 스코프, 클로저
Startup JavaScript 6 - 함수, 스코프, 클로저Startup JavaScript 6 - 함수, 스코프, 클로저
Startup JavaScript 6 - 함수, 스코프, 클로저
Circulus
 
스파르탄스터디 E04 Javascript 객체지향, 함수형 프로그래밍
스파르탄스터디 E04 Javascript 객체지향, 함수형 프로그래밍스파르탄스터디 E04 Javascript 객체지향, 함수형 프로그래밍
스파르탄스터디 E04 Javascript 객체지향, 함수형 프로그래밍
Young-Beom Rhee
 
Lambda 란 무엇인가
Lambda 란 무엇인가Lambda 란 무엇인가
Lambda 란 무엇인가
Vong Sik Kong
 
Javascript 교육자료 pdf
Javascript 교육자료 pdfJavascript 교육자료 pdf
Javascript 교육자료 pdf
Hyosang Hong
 
[IT기술칼럼#2] 고급자바스크립트 for AngularJS, React_고급자바스크립트,AngularJS,React전문교육학원
[IT기술칼럼#2] 고급자바스크립트 for AngularJS, React_고급자바스크립트,AngularJS,React전문교육학원[IT기술칼럼#2] 고급자바스크립트 for AngularJS, React_고급자바스크립트,AngularJS,React전문교육학원
[IT기술칼럼#2] 고급자바스크립트 for AngularJS, React_고급자바스크립트,AngularJS,React전문교육학원
탑크리에듀(구로디지털단지역3번출구 2분거리)
 
Startup JavaScript 8 - NPM, Express.JS
Startup JavaScript 8 - NPM, Express.JSStartup JavaScript 8 - NPM, Express.JS
Startup JavaScript 8 - NPM, Express.JS
Circulus
 
Learning Node Book, Chapter 5
Learning Node Book, Chapter 5Learning Node Book, Chapter 5
Learning Node Book, Chapter 5Ji Hun Kim
 
읽기 좋은 코드가 좋은 코드다 Part one
읽기 좋은 코드가 좋은 코드다   Part one읽기 좋은 코드가 좋은 코드다   Part one
읽기 좋은 코드가 좋은 코드다 Part oneJi Hun Kim
 
TR 069 클라이언트 검토자료 3편
TR 069 클라이언트 검토자료 3편TR 069 클라이언트 검토자료 3편
TR 069 클라이언트 검토자료 3편
ymtech
 
Xe hack
Xe hackXe hack
Xe hack
sejin7940
 
Javascript
JavascriptJavascript
Javascript
Hong Hyo Sang
 
#19.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_국비지원IT학원/실업자/재직자환급교육/자바/스프링/...
#19.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_국비지원IT학원/실업자/재직자환급교육/자바/스프링/...#19.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_국비지원IT학원/실업자/재직자환급교육/자바/스프링/...
#19.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_국비지원IT학원/실업자/재직자환급교육/자바/스프링/...
탑크리에듀(구로디지털단지역3번출구 2분거리)
 
8.hooks
8.hooks8.hooks
8.hooks
Daniel Lim
 

Similar to [ES6] 5. Destructuring (20)

Parallel objects
Parallel objectsParallel objects
Parallel objects
 
Start IoT with JavaScript - 6.함수
Start IoT with JavaScript - 6.함수Start IoT with JavaScript - 6.함수
Start IoT with JavaScript - 6.함수
 
12장 상속 (고급)
12장 상속 (고급)12장 상속 (고급)
12장 상속 (고급)
 
[스프링 스터디 3일차] @MVC
[스프링 스터디 3일차] @MVC[스프링 스터디 3일차] @MVC
[스프링 스터디 3일차] @MVC
 
[스프링 스터디 2일차] 서비스 추상화
[스프링 스터디 2일차] 서비스 추상화[스프링 스터디 2일차] 서비스 추상화
[스프링 스터디 2일차] 서비스 추상화
 
자바스크립트 클래스의 프로토타입(prototype of class)
자바스크립트 클래스의  프로토타입(prototype of class)자바스크립트 클래스의  프로토타입(prototype of class)
자바스크립트 클래스의 프로토타입(prototype of class)
 
Startup JavaScript 6 - 함수, 스코프, 클로저
Startup JavaScript 6 - 함수, 스코프, 클로저Startup JavaScript 6 - 함수, 스코프, 클로저
Startup JavaScript 6 - 함수, 스코프, 클로저
 
스파르탄스터디 E04 Javascript 객체지향, 함수형 프로그래밍
스파르탄스터디 E04 Javascript 객체지향, 함수형 프로그래밍스파르탄스터디 E04 Javascript 객체지향, 함수형 프로그래밍
스파르탄스터디 E04 Javascript 객체지향, 함수형 프로그래밍
 
Lambda 란 무엇인가
Lambda 란 무엇인가Lambda 란 무엇인가
Lambda 란 무엇인가
 
Javascript 교육자료 pdf
Javascript 교육자료 pdfJavascript 교육자료 pdf
Javascript 교육자료 pdf
 
[IT기술칼럼#2] 고급자바스크립트 for AngularJS, React_고급자바스크립트,AngularJS,React전문교육학원
[IT기술칼럼#2] 고급자바스크립트 for AngularJS, React_고급자바스크립트,AngularJS,React전문교육학원[IT기술칼럼#2] 고급자바스크립트 for AngularJS, React_고급자바스크립트,AngularJS,React전문교육학원
[IT기술칼럼#2] 고급자바스크립트 for AngularJS, React_고급자바스크립트,AngularJS,React전문교육학원
 
Startup JavaScript 8 - NPM, Express.JS
Startup JavaScript 8 - NPM, Express.JSStartup JavaScript 8 - NPM, Express.JS
Startup JavaScript 8 - NPM, Express.JS
 
Learning Node Book, Chapter 5
Learning Node Book, Chapter 5Learning Node Book, Chapter 5
Learning Node Book, Chapter 5
 
읽기 좋은 코드가 좋은 코드다 Part one
읽기 좋은 코드가 좋은 코드다   Part one읽기 좋은 코드가 좋은 코드다   Part one
읽기 좋은 코드가 좋은 코드다 Part one
 
TR 069 클라이언트 검토자료 3편
TR 069 클라이언트 검토자료 3편TR 069 클라이언트 검토자료 3편
TR 069 클라이언트 검토자료 3편
 
06장 함수
06장 함수06장 함수
06장 함수
 
Xe hack
Xe hackXe hack
Xe hack
 
Javascript
JavascriptJavascript
Javascript
 
#19.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_국비지원IT학원/실업자/재직자환급교육/자바/스프링/...
#19.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_국비지원IT학원/실업자/재직자환급교육/자바/스프링/...#19.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_국비지원IT학원/실업자/재직자환급교육/자바/스프링/...
#19.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_국비지원IT학원/실업자/재직자환급교육/자바/스프링/...
 
8.hooks
8.hooks8.hooks
8.hooks
 

More from Han JaeYeab

07. type system
07. type system07. type system
07. type system
Han JaeYeab
 
06. decorator
06. decorator06. decorator
06. decorator
Han JaeYeab
 
05. generics in typescript
05. generics in typescript05. generics in typescript
05. generics in typescript
Han JaeYeab
 
04. interface in typescript
04. interface in typescript04. interface in typescript
04. interface in typescript
Han JaeYeab
 
03. function in typescript
03. function in typescript03. function in typescript
03. function in typescript
Han JaeYeab
 
02. class in typescript
02. class in typescript02. class in typescript
02. class in typescript
Han JaeYeab
 
01. basic types
01. basic types01. basic types
01. basic types
Han JaeYeab
 
intro. typescript playground
intro. typescript playgroundintro. typescript playground
intro. typescript playground
Han JaeYeab
 
[ES6] 12. Array
[ES6] 12. Array[ES6] 12. Array
[ES6] 12. Array
Han JaeYeab
 
[ES6] 11. Modularization, import와 export
[ES6] 11. Modularization, import와 export[ES6] 11. Modularization, import와 export
[ES6] 11. Modularization, import와 export
Han JaeYeab
 
[ES6] 10. Generator
[ES6] 10. Generator[ES6] 10. Generator
[ES6] 10. Generator
Han JaeYeab
 
[ES6] 9. Iterator
[ES6] 9. Iterator[ES6] 9. Iterator
[ES6] 9. Iterator
Han JaeYeab
 
[ES6] 8. Symbol
[ES6] 8. Symbol[ES6] 8. Symbol
[ES6] 8. Symbol
Han JaeYeab
 
[ES6] 7. Template literal
[ES6] 7. Template literal[ES6] 7. Template literal
[ES6] 7. Template literal
Han JaeYeab
 
[ES6] 6. Class
[ES6] 6. Class[ES6] 6. Class
[ES6] 6. Class
Han JaeYeab
 
[ES6] 4. Spread, Rest parameter
[ES6] 4. Spread, Rest parameter[ES6] 4. Spread, Rest parameter
[ES6] 4. Spread, Rest parameter
Han JaeYeab
 
[ES6] 3. iteration
[ES6] 3. iteration[ES6] 3. iteration
[ES6] 3. iteration
Han JaeYeab
 
[ES6] 2. arrow function
[ES6] 2. arrow function[ES6] 2. arrow function
[ES6] 2. arrow function
Han JaeYeab
 
[ES6] 1. let과 const
[ES6] 1. let과 const[ES6] 1. let과 const
[ES6] 1. let과 const
Han JaeYeab
 
클라우드 컴퓨팅에 대한 기본적인 이해
클라우드 컴퓨팅에 대한 기본적인 이해클라우드 컴퓨팅에 대한 기본적인 이해
클라우드 컴퓨팅에 대한 기본적인 이해
Han JaeYeab
 

More from Han JaeYeab (20)

07. type system
07. type system07. type system
07. type system
 
06. decorator
06. decorator06. decorator
06. decorator
 
05. generics in typescript
05. generics in typescript05. generics in typescript
05. generics in typescript
 
04. interface in typescript
04. interface in typescript04. interface in typescript
04. interface in typescript
 
03. function in typescript
03. function in typescript03. function in typescript
03. function in typescript
 
02. class in typescript
02. class in typescript02. class in typescript
02. class in typescript
 
01. basic types
01. basic types01. basic types
01. basic types
 
intro. typescript playground
intro. typescript playgroundintro. typescript playground
intro. typescript playground
 
[ES6] 12. Array
[ES6] 12. Array[ES6] 12. Array
[ES6] 12. Array
 
[ES6] 11. Modularization, import와 export
[ES6] 11. Modularization, import와 export[ES6] 11. Modularization, import와 export
[ES6] 11. Modularization, import와 export
 
[ES6] 10. Generator
[ES6] 10. Generator[ES6] 10. Generator
[ES6] 10. Generator
 
[ES6] 9. Iterator
[ES6] 9. Iterator[ES6] 9. Iterator
[ES6] 9. Iterator
 
[ES6] 8. Symbol
[ES6] 8. Symbol[ES6] 8. Symbol
[ES6] 8. Symbol
 
[ES6] 7. Template literal
[ES6] 7. Template literal[ES6] 7. Template literal
[ES6] 7. Template literal
 
[ES6] 6. Class
[ES6] 6. Class[ES6] 6. Class
[ES6] 6. Class
 
[ES6] 4. Spread, Rest parameter
[ES6] 4. Spread, Rest parameter[ES6] 4. Spread, Rest parameter
[ES6] 4. Spread, Rest parameter
 
[ES6] 3. iteration
[ES6] 3. iteration[ES6] 3. iteration
[ES6] 3. iteration
 
[ES6] 2. arrow function
[ES6] 2. arrow function[ES6] 2. arrow function
[ES6] 2. arrow function
 
[ES6] 1. let과 const
[ES6] 1. let과 const[ES6] 1. let과 const
[ES6] 1. let과 const
 
클라우드 컴퓨팅에 대한 기본적인 이해
클라우드 컴퓨팅에 대한 기본적인 이해클라우드 컴퓨팅에 대한 기본적인 이해
클라우드 컴퓨팅에 대한 기본적인 이해
 

[ES6] 5. Destructuring