[JavaScript]map、filter、reduceのクリーンアップ

以下の商品名と価格定義のproducts配列を使用して、map、filter、reduce関数を適用します.

const products = [
    {name: '반팔', price: '15000'},
    {name: '긴팔', price: '20000'},
    {name: '목걸이', price: '18000'},
    {name: '귀걸이', price: '7000'},
    {name: '신발', price: '42000'},
];

1. map

指定した関数を呼び出した結果をアレイ内の各要素に集約して、新しいアレイに戻ります.
map関数を実現しましょう.

const map = (f, iter) => {
    let res = [];
    for (const p of iter) {
        res.push(f(p));
    }
    return res;
};

console.log(map((p) => p.name, products));
console.log(map((p) => p.price, products));

関数言語では、パラメータと戻り値を使用してコミュニケーションすることをお勧めします.
したがって、コンソール.log()ではなくreturnを使用することをお勧めします.
Mapobjectはkey-valueペアを保持し、keyの元の挿入順序を覚えます.
すべての値はkey、valueとして使用できます.

let m = new Map();
m.set('a', 10);
m.set('b', 20);

m.has('a') // true

m.get('c') // undefined
m.get('a') // 10

m.delete('d') // false
m.delete('c') // true

const it = m[Symbol.iterator]();
console.log(it.next()); // {value: ['a', 10], done: false}
console.log(it.next()); // {value: ['b', 20], done: false}
console.log(it.next()); // {value: undefined, done: true}

let m = new Map();
m.set('a', 10);
m.set('b', 20);

const map2 = new Map(map(([k, a]) => [k, a*2], m));
console.log(map2);

value値を2倍にして新しい配列を返します.

2. filter

指定した関数でテストされたすべての要素を収集し、新しい配列に戻ります.
上の商品配列では、20000ウォン未満の商品情報のみを出力する配列を作成します.

let under20000 = [];
for (const p of products){
  	if (p.price < 20000) under20000.push(p);
}
console.log(...under20000);

20,000ウォン未満の商品しか輸出していません.
今回はfilter関数を実装し、結果を返します.

const filter = (f, iter) => {
    let res = [];
    for (const a of iter) {
        if (f(a)) res.push(a);
    }
    return res;
};

console.log(...filter((p) => p.price < 20000, products));

構造分解配分を使用して、priceの値だけを受け取り、20000ウォン未満の値だけをフィルタリングすれば返却できる.

const filtered = products.filter(({_, price}) => price < 20000);
console.log(filtered);

3. reduce

反復可能な値を1つの値に縮小する関数.
配列内の各要素に対して指定されたreducer関数を実行し、結果値を返します.
配列numsの値を加算したtotalのコードです.

const nums = [1, 2, 3, 4, 5];
let total = 0;

for(const n of nums){
  	total += n;
}

console.log(total); // 15

今回は、reduce関数を実装し、出力총 합のコードを記述します.

const reduce = (f, acc, iter) => {
	if (!iter){
      	iter = acc[Symbol.iterator]();
      	acc = iter.next().value;
    }
  	for (const a of iter){
    	acc = f(acc, a);
    }
  	return acc;
};

const add = (a, b) => a + b;
console.log(reduce(add, 0, [1, 2, 3, 4, 5])); // 15
console.log(reduce(add, [1, 2, 3, 4, 5])); // 15

Reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter