✏️8.7 반복문 쪼개기 (Split Loop)

리팩터링 전

let averageAge = 0;
let totalSalary = 0;

for (const p of people) {
  averageAge += p.age;
  totalSalary += p.salary;
}
averageAge = averageAge / people.length;

리팩터링 후

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

let averageAge = 0;
for (const p of people) {
  averageAge += p.age;
}

averageAge = averageAge / people.length;

🧷 배경

📍 반복문을 분리하는 이유?

• 두 개의 반복문으로 분리하여 수정해야 할 때 수정할 동작 하나만 이해하게 하자.

• 그 값만 곧바로 반환하기 때문에 사용하기 쉬워진다. 여러 일을 수행하면 구조체를 반환하거나 지역변수를 활용해야 한다.

리팩터링과 최적화를 구분하자.

🧷 절차

1. 반복문을 복제해 두 개로 만든다.

2. 사이드 이펙트를 제거한다.

3. 테스트 한다.

4. 각 반복문을 함수로 추출할지 고민한다.

🧷 예시

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 `최연소: ${younges}, 총 급여: ${totalSalary}`;

1. 단순히 반복문 복제하기

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) {
  if (p.age < youngest) youngest = p.age;
  totalSalary += p.salary;
}

return `최연소: ${younges}, 총 급여: ${totalSalary}`;

1. 부수효과를 초래할 수 있는 중복을 제거한다.

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

for (const p of people) {
  if (p.age < youngest) youngest = p.age;
}

return `최연소: ${younges}, 총 급여: ${totalSalary}`;