개발공부일지
Javascript - 일급함수, 고차함수, Set객체, Symbol, iterator, iterable, map함수 본문
목차
1. 일급함수
2. Set 객체와 for ... of 반복문
3. Symbol
4. iterator
5. iterable만들기
6. map함수
1. 일급함수
※ 일급이란 ?
- 값으로 다룰수있고
- 변수에 담을수있고
- 함수 인자에 사용할수있고
- 함수 결과로 사용할수있는
일급함수로 함수를 반환하면 고차함수, 함수 인자로 사용한다면 콜백함수
① 고차함수
function a() {
return function () {
console.log("hello world");
};
}
a()()
//아니면
const b = a();
b();
const a = () => () => {
console.log("hello world");
};
// 화살표 함수를 풀어써보면
const a = () => {
return () => {
console.log("hello world");
};
};
② 함수를 인자로 받아서 사용하는 경우
const apply1 = (f) => f(1);
const a = apply1((a) => a + 1);
console.log(a); // 2
const add = (a) => a + 2;
const b = apply1(add); // 3
2. Set 객체와 for ... of 반복문
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Keyed_collections
const set = new Set([1, 2, 3]);
console.log(set.size); // 3
for (let i = 0; i < set.size; i++) {
console.log(set[i]); // undefined
}
for (const item of set) {
console.log(item); // 1 2 3
3. Symbol
- ES6에서 추가된 원시타입.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol
console.dir(Symbol);
4. iterator
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Iterators_and_generators
const arr = [1, 2, 3];
arr[Symbol.iterator];
const iterator = arr[Symbol.iterator](); // {}
console.dir(iterator);
iterator.next();
5. iterable만들기
https://ko.javascript.info/iterable
const iterable = {
[Symbol.iterator]() {
let i = 1;
return {
next() {
const done = i === 4;
const value = done ? undefined : i++;
return {
value: value,
done: done,
};
},
[Symbol.iterator]() {
return this;
},
};
},
};
const iterator = iterable[Symbol.iterator]();
console.log(iterator);
for (const a of iterator) console.log(a);
6. map함수
const products = [
{ name: "반팔티", price: 15000 },
{ name: "긴팔티", price: 20000 },
{ name: "핸드폰케이스", price: 15000 },
{ name: "후드티", price: 30000 },
{ name: "바지", price: 25000 },
];
const map = (callback, arr) => {
const result = [];
for (const a of arr) {
result.push(callback(a));
}
return result;
};
map((v) => v.name, products);
// ['반팔티', '긴팔티', '핸드폰케이스', '후드티', '바지']
map((v) => v.price, products);
// [15000, 20000, 15000, 30000, 25000]
※ 스프레드 연산자도 iterator를 가지고있다!
※ [Symbol.iterator] 형태
'Javascript' 카테고리의 다른 글
Javascript - Comment 구현하기 (0) | 2023.10.16 |
---|---|
Javascript - comment 만들기 (0) | 2023.10.15 |
Javascript - 모듈과 Class, 로컬스토리지를 활용하여 Board 만들기 ② write의 데이터 저장해서 view에서 보여주기 (0) | 2023.08.10 |
Javascript - 모듈과 Class, 로컬스토리지를 활용하여 Board 만들기 ① 게시판의 형태를 만들고 로컬스토리지에 데이터 저장 (0) | 2023.08.09 |
Javascript - 브라우저 / 로컬스토리지 / 모듈(module) (0) | 2023.08.09 |