Skip to content

Commit

Permalink
init
Browse files Browse the repository at this point in the history
  • Loading branch information
@indongyoo
indongyoo committed Dec 27, 2018
1 parent 5967d89 commit 9fc3255
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 109 deletions.
21 changes: 13 additions & 8 deletions 01. 함수형 자바스크립트 기본기/1.html
View file
Expand Up @@ -10,20 +10,25 @@
- 함수의 결과로 사용될 수 있다.

<script>
const a = 20;
const add1 = a => a + 1;
log( add1(a) );
const a = 10;
const add10 = a => a + 10;
const r = add10(a);
// log(r);
</script>

# 일급 함수
- 함수를 값으로 다룰 수 있다.
- 조합성과 추상화의 도구

<script>
const add2 = a => a + 2;
log(add2);
const f = () => () => 1;
log(f());
const f2 = f();
const add5 = a => a + 5;
log(add5);
log(add5(5));

const f1 = () => () => 1;
log(f1());

const f2 = f1();
log(f2);
log(f2());
</script>
130 changes: 60 additions & 70 deletions 02. ES6에서의 순회와 이터러블|이터레이터 프로토콜/index.html
View file
@@ -1,110 +1,100 @@
<script>const log = console.log;</script>

## 기존과 달라진 ES6에서의 리스트 순회
- for i++
- for of

<script>
const log = console.log;

/*var list = [1, 2, 3];
const list = [1, 2, 3];
for (var i = 0; i < list.length; i++) {
log(list[i]);
}*/
// log(list[i]);
}
const str = 'abc';
for (var i = 0; i < str.length; i++) {
// log(str[i]);
}
for (const a of list) {
// log(a);
}
for (const a of str) {
// log(a);
}
</script>

### Array를 통해 알아보기

<script>
log('Array ----');
const arr = [1, 2, 3];
const iter1 = arr[Symbol.iterator]();
log(iter1.next());
log(iter1.next());
log(iter1.next());
log(iter1.next());
for (const a of arr) {
log(a);
}
log('Array ----');
log('Arr -----------');
const arr = [1, 2, 3];
let iter1 = arr[Symbol.iterator]();
for (const a of iter1) log(a);
</script>

### Set을 통해 알아보기

<script>
log('Set ----');
const set = new Set([1, 2, 3]);
const iter2 = set[Symbol.iterator]();
log(iter2.next());
log(iter2.next());
log(iter2.next());
log(iter2.next());
for (const a of set) {
log(a);
}
log('Set ----');
log('Set -----------');
const set = new Set([1, 2, 3]);
for (const a of set) log(a);
</script>

### Map을 통해 알아보기

<script>
log('Map ----');
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
const iter3 = map.values();
log( iter3.next() );
log( iter3.next() );
log( iter3.next() );
log( iter3.next() );
for (const a of map.values()) {
log(a);
}
log('Map ----');
log('Map -----------');
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (const a of map.keys()) log(a);
for (const a of map.values()) log(a);
for (const a of map.entries()) log(a);
console.clear();
</script>

## 이터러블/이터레이터 프로토콜
- 이터러블: 이터레이터를 리턴하는 [Symbol.iterator]() 를 가진 값
- 이터레이터: { value, done } 객체를 리턴하는 next() 를 가진 값
- 이터러블/이터레이터 프로토콜: 이터러블을 for...of, 전개 연산자 등과 함께 동작하도록한 규약

### 사용자 정의 이터러블을 통해 알아보기

<script>
console.clear();
const iterable = {
[Symbol.iterator]: function() {
var limit = 3;
[Symbol.iterator]() {
let i = 3;
return {
next() {
return limit < 1 ? { done: true } : { value: limit--, done: false }
return i == 0 ? { done: true } : { value: i--, done: false };
},
[Symbol.iterator]: function() { return this; }
[Symbol.iterator]() { return this; }
}
}
};
const iter4 = iterable[Symbol.iterator]();
log( iter4.next() );
log( iter4.next() );
// log( iter4 == iter4[Symbol.iterator]() );
for (const a of iter4) {
log(a);
}
let iterator = iterable[Symbol.iterator]();
iterator.next();
iterator.next();
// log(iterator.next());
// log(iterator.next());
// log(iterator.next());
for (const a of iterator) log(a);

// const arr2 = [1, 2, 3];
// const iter5 = arr2[Symbol.iterator]();
// log( iter5.next() );
// for (const a of iter5) {
// log(a);
// }

for (const a of document.querySelectorAll('*')) {
log(a);
}
// let iter2 = arr2[Symbol.iterator]();
// iter2.next();
// log(iter2[Symbol.iterator]() == iter2);
// for (const a of iter2) log(a);

for (const a of document.querySelectorAll('*')) log(a);
const all = document.querySelectorAll('*');
let iter3 = all[Symbol.iterator]();
log(iter3.next());
log(iter3.next());
log(iter3.next());
</script>

## 이터러블/이터레이터 프로토콜
- 이터러블: 이터레이터를 리턴하는 [Symbol.iterator]() 를 가진 값
- 이터레이터: { value, done } 객체를 리턴하는 next() 를 가진 값
- 이터러블/이터레이터 프로토콜: 이터러블을 for...of, 전개 연산자 등과 함께 동작하도록한 규약

## 전개 연산자

<script>
console.clear();

const list3 = [1, 2];

log( [...map.keys(), ...iterable, ...list3] );
</script>
console.clear();
const a = [1, 2];
// a[Symbol.iterator] = null;
log([...a, ...arr, ...set, ...map.keys()]);
</script>
74 changes: 43 additions & 31 deletions 03. 제너레이터와 이터레이터/index.html
View file
Expand Up @@ -4,53 +4,65 @@
- 제너레이터: 이터레이터이자 이터러블을 생성하는 함수

<script>
function *gen1() {
function *gen() {
yield 1;
yield 2;
if (false) yield 2;
yield 3;
}
const iter1 = gen1();
log(iter1.next());
log(iter1.next());
log(iter1.next());
log(iter1.next());

for (const a of gen1()) {
log(a);
}
let iter = gen();
log(iter[Symbol.iterator]() == iter);
log(iter.next());
log(iter.next());
log(iter.next());
log(iter.next());

for (const a of gen()) log(a);
console.clear();
</script>

# odds

<script>
function *odds(limit) {
for (var i = 1; i <= limit; i++) {
if (i % 2) yield i;
function *infinity(i = 0) {
while (true) yield i++;
}
function *limit(l, iter) {
for (const a of iter) {
yield a;
if (a == l) return;
}
}
const iter2 = odds(9);
/*log( iter2.next() );
log( iter2.next() );
log( iter2.next() );
log( iter2.next() );
log( iter2.next() );
log( iter2.next() );*/

for (const a of odds(11)) log(a);
function *odds(l) {
for (const a of limit(l, infinity(1))) {
if (a % 2) yield a;
}
}
let iter2 = odds(10);
log(iter2.next());
log(iter2.next());
log(iter2.next());
log(iter2.next());
log(iter2.next());
log(iter2.next());
log(iter2.next());

for (const a of odds(40)) log(a);

console.clear();
</script>

# for of, 전개 연산자, 구조 분해, 나머지 연산자

<script>
log( [...odds(7), ...odds(5)] );
log(...odds(10));
log([...odds(10), ...odds(20)]);

const [head, ...tail] = odds(7);
log(head, tail);
const [head, ...tail] = odds(5);
log(head);
log(tail);

const iter3 = odds(9);
iter3.next();
iter3.next();
const [head1, ...tail2] = iter3;
log(head1, tail2);
const [a, b, ...rest] = odds(10);
log(a);
log(b);
log(rest);
</script>

0 comments on commit 9fc3255

Please sign in to comment.