26장. ES6 함수의 추가 기능
1. 함수의 구분
⇒ callable(호출할 수 있는 함수 객체) 이면서 constructor(인스턴스를 생성할 수 있는 함수 객체)
사용 목적에 따라 명확한 구분이 없으므로 실수를 유발할 가능성 높음
•
이러한 문제를 해결하기 위해 ES6에서는 함수를 사용 목적에 따라 세가지 종류로 구분
ES6 함수의 구분 | constructor | prototype | super | arguments |
일반 함수 | O | O | X | O |
메서드 | X | X | O | O |
화살표 함수 | X | X | X | X |
2. 메서드
ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미
생성자 함수로서 호출할 수 없음
인스턴스를 생성할 수 없는 non-constructor
⇒ prototype 프로퍼티가 없고 프로토타입도 생성하지 않음
super 키워드를 사용 가능
3. 화살표 함수
ES6에서 도입된 화살표 함수는 function 키워드 대신 화살표를 사용하여 기존의 함수 정의 방식보다 간략하게 함수를 정의함
콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용
4. Rest 파라미터
Rest 파라미터는 매개변수 이름 앞에 세개의 점 … 을 붙여서 정의한 매개변수를 의미
Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달 받음
function foo(...rest) {
// 매개변수 rest는 인수들의 목록을 배열로 전달받는 Rest 파라미터다.
console.log(rest); // [ 1, 2, 3, 4, 5]
}
foo( 1, 2, 3, 4, 5);
JavaScript
복사
Rest 파라미터는 먼저 선언된 매개변수에 할당된 인수를 제외한 나머지 인수들로 구성된 배열이
할당 되므로 반드시 마지막 파라미터이어야 한다.
function bar ( a, b, ...rest) {
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]
bar( 1, 2, 3, 4, 5);
JavaScript
복사
Rest 파라미터는 단 하나만 선언 할 수 있음
function foo(...rest1, ...rest2) {}
foo( 1, 2, 3, 4, 5);
// SyntaxError : Rest parameter must be last formal parameter
JavaScript
복사
34장. 이터러블
1. 이터러블
•
이터레이션 프로토콜을 준수하는 순회 가능한 자료구조이다.
•
이터러블은 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 구현하거나
프로토타입 체인을 통해 상속받은 객체를 말함
•
이터레이션 프로토콜은 "이터러블 프로토콜"과 "이터레이터 프로토콜"이 있다.
•
이터러블은 for…of 문으로 순회 가능하며, 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용가능
•
이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환
•
이터러블의 Symbol.iterator 메서드가 반환한 이터레이터는 next 메서드를 갖는다.
⇒ 이터러블의 각 요소를 순회하기 위한 포인터의 역할
const hi = ['지원', '현희', '경보', '민철', '보경', '양래', '수빈'];
// 배열은 Array.prototype의 Symbol.iterator 메서드를 상속받는 이터러블
console.log (Symbol.iterator in hi); // true
// Synbol.iterator 메서드는 이터레이터를 반환한다. 이터레이터는 next 메서드를 갖는다.
const iterator = hi[Symbol.iterator]();
// 이터레이터 리절트 객체는 value와 done 프로퍼티를 갖는다.
JavaScript
복사
2. for …of 문
for …of 문은 이터러블을 순회하면서 이터러블의 요소를 변수에 할당
for (변수선언문 of 이터러블) { ... }
JavaScript
복사
for (const item of ['지원', '현희', '경보', '민철', '보경', '양래', '수빈']) {
console.log(item)
}
// 지원
// 현희
// 겯보
// 민철
// 보경
// 양래
// 수빈
JavaScript
복사
3. 이터레이션 프로토콜의 필요성
이터레이션 프로토콜은 다양한 데이터 공급자가 하나의 순회방식을 갖도록 규정하여
데이터 소비자가 효율적으로 다양한 데이터 공급자를 사용할 수 있도록 데이터 소비자와 데이터 공급자를 연결하는 인터페이스의 역할을 한다.
35장. 스프레드 문법
1. 스프레드 문법
- 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다.
•
스프레드 문법을 사용할 수 있는 대상
⇒ Array, String, Map, Set, DOM 컬렉션, arguments와 같이 for…of 문으로 순회할 수 있는
”이터러블”에 한정
•
스프레드 문법의 결과는 값이 아니라 값들의 목록이므로 결과를 변수에 할당할 수 없다.
•
배열을 함수의 인수 목록으로 전달할 경우 스프레드 문법을 사용해서 값의 목록을 만든후 전달!!
2. 이터러블을 배열로 변환
ES5에서 이터러블을 배열로 변환하기 위해 Function.prototype.apply 또는 Function.prototype.call 메서드를 사용하여 slice메서드를 호출해야 한다
⇒ 이터러블 뿐만 아니라 이터러블이 아닌 유사 배열 객체도 배열로 변환 가능
⇒ ES6에서는 Array.from메서드를 사용하여 유사배열객체 또는 이터러블을 인수로 전달받아 배열로
변환하여 반환
const arrayLike = {
0: '수빈',
1: '보경',
2: '양래',
3: '민철',
4: '지원',
length : 5
};
Array.from(arrayLike); // -> [수빈,보경,양래,민철,지원]
JavaScript
복사
36장. 디스트럭처링 할당
1. 디스트럭처링 할당
- 구조화된 배열과 같은 이터러블 또는 객체를 비구조화 하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 할당 기준은 배열의 인덱스이므로 순서 주의!
- 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.
const array1 = [1, 2, 3];
// 변수 one, two, three를 선언하고 배열 array1를 디스트럭처링하여 할당
// 할당 기준은 배열의 인덱스
const [one,two,three] = array1;
console.log(one,two,three); // 1 2 3
JavaScript
복사
// 기본값 보다 할당된 값이 우선
const [e,f = 10, g =3] = [1, 2];
console.log(e,f,g); // 1 2 3
JavaScript
복사
2. 객체 디스트럭처링 할당
- 객체의 각 프로퍼티를 객체로 부터 추출하여 1개 이상의 변수에 할당한다.
이때 객체 디스트럭처링 할당의 대상은 객체여야 하며 할당기준은 프로퍼티 키다.
순서는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.
const user = { firstName : '보경님', lastName : '이' , Character : '수달',};
// 변수를 선언하고 user 객체를 디스트럭처링하여 할당
const {lastName, Character, firstName} = user;
console.log(lastName,firstName,Character); // 이 보경님 수달
JavaScript
복사
- 객체 디스트럭처링 할당은 객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출하여 변수에 할당하고 싶을 때 유용
const str = 'Hello';
// 객체로 부터 length 프로퍼티만 추출한다.
const {length} = str;
console.log(length); // 5
JavaScript
복사
Quiz
1.
가벼운 O / X 문제
1. ES6에서는 rest 파라미터를 사용하여 가변인자 함수의 인수 목록을 배열로 직접 전달 받을 수 있다. ( O / X )
2. 객체 디스트럭처링 할당의 대상은 객체여야 하며 할당시에 순서와 프로퍼티키를 고려해야한다. ( O / X )
정답은 ?
2.
Math.max 메서드를 사용해 주어진 배열의 최대값을 구하고자 합니다.
다음과 같은 코드를 사용하였을때 Nan이 반환됩니다.
이 코드로 최대값을 구할수 없는 이유를 생각해보고 이를 해결하기 위한 코드를 작성해주세요.
Math.max([109,542,178,254,364]); // -> Nan
JavaScript
복사
힌트
정답은?
3. 다음 빈칸에 알맞은 답을 맞춰보시롱요
이터러블의 Symbol.iterator 메서드가 반환한 이터레이터는( )메서드를 갖는다.
( )메서드는 이터러블의 각 요소를 순회하기 위한 ( )역할을 한다.
정답은?
4. 다음과 같은 유사 배열 객체를 배열로 변환하기 위한 코드를 작성하고자 합니다.
실행결과에 알맞은 코드를 작성해보세요! (ES6에서 도입된 메서드를 활용하여보아요)
// 유사 배열 객체 arrayLike
const arrayLike = {
0: '수빈',
1: '지원',
2: '보경',
3: '양래',
4: '민철',
length : 5
};
// 해당 위치에 들어갈 코드를 작성해주세요
->
// 실행결과
console.log(member); // ['수빈','지원','보경','양래','민철']
JavaScript
복사
정답은?
코어자바스크립트
