ECMAScript2015 강의 자료입니다.

1. ECMAScript 2015
by jbee

2. [ES6] 3. Iteration and for‑of statement

3. Iteration
ES6에서이터레이션프로토콜은 Iterable 프로토콜 과 Iterator 프로토
콜 로구성된다. 결론부터말하자면 Iterable 프로토콜은 반복 가능한 오
브젝트를나타내는프로토콜이며 Iterator 프로토콜은이터러블오브젝트
( Iterable 프로토콜을따르는오브젝트)의값을 작성한 순서대로 처리하는
프로토콜이다.

4. Iterable 프로토콜
오브젝트의반복처리규약을정의한다.
Iterable Object
String , Array , Map , Set , TypedArray , Argument 오브젝트
그리고 DOM의 NodeList

5. iterator
위built in 오브젝트들은디폴트로이터러블프로토콜을갖고 있다.
오브젝트에 Symbol.iterator 가 있어야한다. Symbol.iterator 가 있
는오브젝트는이터러블오브젝트이다. 또한상속받은prototype chain에있
어도이터러블오브젝트이다. ( Symbol 에대해서는다음포스팅에서다룰예
정이다.)

6. 오브젝트에프로퍼티존재여부를체크할때, Symbol의경우에는
arrayObj[Symbol.iterator] 와같이대괄호 [] 안에작성해야한다.
let arr = [];
console.log(arr[Symbol.iterator]); //function values() { [nativ
let obj = {a:1};
console.log(obj[Symbol.iterator]); //undefined

7. Array 오브젝트는기본적으로 iterable 프로토콜을구현한다. 하지만
Object 오브젝트는 iterable 프로토콜을구현하지않는다.
위와같은방식으로 Array 오브젝트는 iterator 를받을수있다.
let iteratorObj = arr[Symbol.iterator](); //iterator object

8. JavaScript’s for statement

9. forEach
forEach 문은arrow function과 조합해서사용하면추가적인변수사용없이
코드가 깔끔해질수있다.
const categories = ["Korean", "English", "Science"];
categories.forEach(subject => {
console.log(subject);
});
// console>
// Korean
// English
// Science

10. forEach 한계
그러나for문중간에 continue or break or return 선언문을사용할
수없다. 기존의for‑statement를사용하는경우를보자.
const categories = ["Korean", "English", "Science"];
for (let i = 0; i < subject.length; i++) {
console.log(categoried[i]);
}
// console>
// Korean
// English
// Science

11. i 의역할이index를잡아주는것 외에별다른기능이없다. 그래서기존에는
for-in statement 를사용했다. 하지만 for-in statement 은문자열
키를가진일반 Object 객체들을위해만들어졌다.
const categories = ["Korean", "English", "Science"];
for (let item in categories) {
console.log(item);
}
// console>
// 0
// 1
// 2
배열을for‑in으로돌리면그 index가 추출된다.

12. for‑of statement
for-in loop statement 는객체의프로퍼티들을루프시키지만 for-of
loop statement 는데이터, 즉배열내의value들을루프시킨다. 또한for‑
of는배열뿐만아니라다양한Collection에도동작한다. DOM의
NodeList 같은유사배열객체들에도동작하고 문자열에도동작한다. 문자
열을유니코드문자의배열로취급하는것이다. Set , Map 에대해서도물론
동작한다. key‑value 형식의 Map 에대해서는for (let [key, value] of …) 형
식의 destructuring 을사용한다.

13. const categories = ["Korean", "English", "Science"];
for (let item of categories) {
console.log(item);
}
// console>
// Korean
// English
// Science
단for‑of 가 만능은아니다. Object 의프로퍼티를루프시키려면 for-in
statement 를사용해야한다. 사실 for-in statement 의원래목적이
Object 프로퍼티순회이다. Object를순회하는경우를살펴보자.

14. let obj = {
one : 1,
two : 2,
three : 3
};
위와같은obj라는오브젝트를정의한다.

15. for (let key in obj) {
console.log(key);
}
// console>
// one
// two
// three

16. for-in statement 를통해서정의한오브젝트(obj)의key를순회했다. 그
리고 그 key를가지고 value에접근하는방법이다.
for (let key in obj) {
console.log(obj[key]);
}
// console>
// 1
// 2
// 3

17. 오브젝트를 for-of statment 로순회하면어떻게 될까?
JavaScript의Object는 iterable 프로토콜을구현하고 있지않기 때문에,
Symbol.iterator 가 존재하지않는다.
for (let item of obj) {
console.log(item);
}
// console>
// Uncaught TypeError: obj[Symbol.iterator] is not a function

18. 3. end