---
robots: noindex, nofollow
tags: refactoring
---

# Split Loop

> 練習用的 [REPL](https://repl.it/@yaosiang/SplitLoop)

let youngest = people[0] ? people[0].age : Infinity;
let totalSalary = 0;
for (const p of people) {
    if (p.age < youngest) youngest = p.age;  // 判斷最年輕的年齡
    totalSalary += p.salary;                 // 加總薪水
}

return `youngestAge: ${youngest}, totalSalary: ${totalSalary}`;

迴圈裡面顯然做了多件事情。

let youngest = people[0] ? people[0].age : Infinity;
let totalSalary = 0;
for (const p of people) {
//   if (p.age < youngest) youngest = p.age;
  totalSalary += p.salary;
}

for (const p of people) {                      // 把 loop 拆開，接著移除重複程式碼
  if (p.age < youngest) youngest = p.age;
//   totalSalary += p.salary;
}

return `youngestAge: ${youngest}, totalSalary: ${totalSalary}`;

挪動程式碼，方便抽取。

let totalSalary = 0;
for (const p of people) {
    totalSalary += p.salary;
}

let youngest = people[0] ? people[0].age : Infinity;  // 接著用 Slide Statement 為 Extract Function 做準備
for (const p of people) {
    if (p.age < youngest) youngest = p.age;
}

return `youngestAge: ${youngest}, totalSalary: ${totalSalary}`;

抽取出不同的任務。

return `youngestAge: ${youngestAge()}, totalSalary: ${totalSalary()}`;

function totalSalary() {
    let totalSalary = 0;
    for (const p of people) {
        totalSalary += p.salary;
    }
    return totalSalary;
}

function youngestAge() {
    let youngest = people[0] ? people[0].age : Infinity;
    for (const p of people) {
        if (p.age < youngest) youngest = p.age;
    }
    return youngest;
}

利用 map-reduce 來移除迴圈。

return `youngestAge: ${youngestAge()}, totalSalary: ${totalSalary()}`;

function totalSalary() {
    return people.reduce((total,p) => total + p.salary, 0);
}

function youngestAge() {
    return Math.min(...people.map(p => p.age));
}