// 중첩 함수를 최상위로 옮기기// Before: calculateDistance 함수가 trackSummary 함수 내부에 중첩으로 선언되어 있다.// 목표: calculateDistance 함수를 최상위로 옮겨 추적 거리를 다른 정보와 독립적으로 계산하고 싶다.function trackSummary(points) {  const totalTime = calculateTime();  const totalDistance = calculateDistance();  const pace = totalTime / 60 / totalDistance;  return {    time: totalTime,    distance: totalDistance,    pace: pace  }  function calculateDistance() {        let result = 0;    for (const i = 1; i < points.length; i++) {      result += distance(points[i-1], points[i]);     }    return result;  }  function distance(p1, p2) { ... }   function radians(degrees) { ... }   function calculateTime() { ... } }// 목표 달성 후function trackSummary(points) {    const totalTime = calculateTime();    const pace = totalTime / 60 / totalDistance(points);    return {        time: totalTime,        distance: totalDistance(points),        pace: pace    };}function totalDistance(points) { ... } // totalDistance내부에 distance와 radians를 중첩 함수로 선언할 수도 있다.function distance(p1, p2) { ... }function radians(degrees) { ... }function calculateTime() { ... }

// 다른 클래스로 옮기기 예시// Before : Account에 계좌 종류에 따라 이자 책정 알고리즘이 달라지는 함수가 존재한다.// 목표 : 이자 책정 책임을 별도로 분리해보자.class Account {    get bankCharge() {        let result = 4.5;        if (this._daysOverdrawn > 0) result += this.overdraftCharge;        return result;    }    get overdraftCharge() {         if(this.type.isPremium) {            const baseCharge = 10;            if(this.daysOverdrawn <= 7) {                return baseCharge;            } else {                return baseCharge + (this.daysOverdrawn - 7) * 0.85;            }        } else {            return this.daysOverdrawn * 1.75;        }    }}// After : AccountType 클래스로 이동class Account {    get bankCharge() {        let result = 4.5;        if (this._daysOverdrawn > 0) result += this.type.overdraftCharge(this.daysOverdrawn);        return result;    }    // 위임 메서드로 만들거면 get overdraftCharge 메소드를 둔다.}class AccountType {    overdraftCharge(daysOverdrawn) { // daysOverdrawn은 계좌별로 달라지는 메서드이기 때문에 그대로 둔다.    // 사용하는 컨텍스트가 많으면 daysOverdrawn이 아니라 account를 통째로 사용한다.        if(this.isPremium) {            const baseCharge = 10;            if(daysOverdrawn <= 7) {                return baseCharge;            } else {                return baseCharge + (daysOverdrawn - 7) * 0.85;            }        } else {            return daysOverdrawn * 1.75;        }    }}

// Before : Customer 클래스에 discountRate이 존재.// 목표 : 할인율을 뜻하는 discountRate 필드를 Customer -> CustomerContract로 옮기기class Customer {    constructor(name, discountRate) {        this._name = name;        this._discountRate = discountRate;        this._contract = new CustomerContract(dateToday());    }    get discountRate() {        return this._discountRate;    }    becomePreferred() {        this._discountRate += 0.03;        // + 다른 일들    }    applyDiscount(amount) {        return amount.subtract(amount.multiply(this._discountRate));    }    dateToday() {        return new Date();    }}class CustomerContract { // 계약 클래스    constructor(startDate) {        this._startDate = startDate;    }}// After : discountRate필드를 CustomerContract로 이동시킨다.class Customer {  constructor(name, discountRate) {    this._name = name;    this._contract = new CustomerContract(this.dateToday());    this._setDiscountRate(discountRate); // contract 클래스 호출 뒤 실행  }  get discountRate() {    return this._contract.discountRate;  }  setDiscountRate(number) {    return this._contract.discountRate = number;  }  becomePreferred() {    this._contract.discountRate += 0.03;    // 등등  }  applyDiscount(amount) {    return amount.subtract(amount.multiply(this._contract.discountRate));  }  dateToday() {    return new Date();  }}class CustomerContract {    constructor(startDate, discountRate) {        this._startDate = startDate;        this._discountRate = discountRate;    }    get discountRate() {        return this._discountRate;    }    _setDiscountRate(aNumber) { // 접근 제어 캡슐, 타입스크립트면 굳이 aNumber로??        this._discountRate = aNumber;    }}

// Before : Account의 이자가 Account에 따라 다르다// 목표 : AccountType에 따라 이자가 다르게 변경했으며 DB까지 일치하는지 확인하기.class Account {    constructor(number, type, interestRate) {        this._number = number;        this._type = type;        this._interestRate = interestRate;    }    get interestRate() {return this._interestRate;}}class AccountType {    constructor(name) {        this._name = name;    }}// After : AccountType에 따라 이자가 결정되며, 겉보기 동작도 일치하는지 확인하며 만들어야 함.class Account {    constructor(number, type, interestRate) {        this._number = number;        this._type = type;    }    get interestRate() {return this._type.interestRate;}}class AccountType {    constructor(name, interestRate) {        this._name = name;        this._interestRate = interestRate;    }    get interestRate() {return this._interestRate;}}

class Account {    constructor(number, type, interestRate) {        this._number = number;        this._type = type;        assert(interestRate === this._type.interestRate); // 운영, 테스트 중에 오류 확인하여 겉보기 동작 일치 여부 확인        this._interestRate = interestRate;    }    get interestRate() {return this._interestRate;}}

 // Before : "제목"은 사진 정보의 일부이며 emitPhotoData와 항상 함께 호출된다. // 목표 : 제목을 출력하는 코드를 emitPhotoData로 옮겨 중복을 제거한다.function renderPerson(person) {  const result = [];  result.push(`<p>${person.name}</p>`);  result.push(renderPhoto(person.photo));  result.push(`<p>제목: ${person.photo.title}</p>`);  result.push(emitPhotoData(person.photo));  return result.join("\n");}function photoDiv(aPhoto) {  return [    '<div>',     `<p>제목: ${p.title}</p>`,    emitPhotoData(aPhoto),    '</div>'].join("\n");}function emitPhotoData(aPhoto) {  const result = [];  result.push(`<p>위치: ${aPhoto.location}</p>`);  result.push(`<p>날짜: ${aPhoto.date.toDateString()}</p>`);  return result.join("\n");}// After : emitPhotoData에서 제목을 함께 출력하게 변경function renderPerson(person) {   const result = [];  result.push(`<p>${person.name}</p>`);  result.push(renderPhoto(person.photo));  result.push(emitPhotoData(person.photo));  return result.join("\n");}function photoDiv(aPhoto) {  return [    '<div>',     emitPhotoData(aPhoto),    '</div>'].join("\n");}function emitPhotoData(aPhoto) {  return [    `<p>제목: ${aPhoto.title}</p>`    `<p>위치: ${aPhoto.location}</p>`    `<p>날짜: ${aPhoto.date.toDateString()}</p>`  ].join("\n");}

// Before : photo의 location이 항상 같게 렌더링 된다.// 목표 : listRecentPhotos()가 위치 정보(location)을 다르게 렌더링해야 한다.function renderPerson(outStream, person) {  outStream.write(`<p>${person.name}</p>\n`);  renderPhoto(outStream, person.photo);  emitPhotoData(outStream, person.photo);}function listRecentPhotos(outStream, photos) {  photos    .filter((p) => p.date > recentDateCutoff())    .forEach((p) => {      outStream.write('<div>\n');      emitPhotoData(outStream, p);      outStream.write('</div>\n');    });}function emitPhotoData(outStream, photo) {  outStream.write(`<p>제목: ${photo.title}</p>\n`);  outStream.write(`<p>날짜: ${photo.date.toDateString()}</p>\n`);  outStream.write(`<p>위치: ${photo.location}</p>\n`);}// After : function renderPerson(outStream, person) {  outStream.write(`<p>${person.name}</p>\n`);  renderPhoto(outStream, person.photo);  emitPhotoData(outStream, person.photo);  outStream.write(`<p>위치: ${person.photo.location}</p>\n`) // 위치가 별도로 빠짐}function listRecentPhotos(outStream, photos) {  photos    .filter((p) => p.date > recentDateCutoff())    .forEach((p) => {      outStream.write('<div>\n');      emitPhotoData(outStream, p);      outStream.write(`<p>위치: ${p.location}</p>\n`); // 위치가 별도로 빠짐      outStream.write('</div>\n');    });}function emitPhotoData(outStream, photo) {  outStream.write(`<p>제목: ${photo.title}</p>\n`);  outStream.write(`<p>날짜: ${photo.date.toDateString()}</p>\n`);}

// 리팩터링 전let appliesToMass = false;for(const s of states) {    if (s === "MA") appliesToMass = true;}// 리팩터링 후const appliesToMass = states.includes("MA");

// Before : 코드가 관심사에 상관없이 배치된 경우들이 있음. 중간에 어떤 과정이 추가되면 추적하기도 힘들것이다.// 목표 : 코드를 비슷한 관심사끼리 묶어보자const pricingPlan = retrievePricingPlan();const order = retreiveOrder();const baseCharge = pricingPlan.base;let charge;const chargePerUnit = pricingPlan.unit;const units = order.units;let discount;charge = baseCharge + units * chargePerUnit;let discountableUnits = Math.max(units - pricingPlan.discountThreshold, 0);discount = discountableUnits * pricingPlan.discountFactor;if(order.isRepeat) discount += 20;charge = charge - discount;chargeOrder(charge);// 9번 줄까지는 선언문으로 보인다. 그다음 줄부터는 요금 계산이 시작된다. 12번 줄에 는 discount를 계산한다.// 위와 같은 방식으로 한번 슬라이싱 해보자. 단 위치 변경이 가능한지 반드시 확인하면서 해야한다.// After : 관심사 끼리 묶어보자const pricingPlan = retrievePricingPlan();const order = retreiveOrder(); // 주문const units = order.units;     // 주문 단위 수let discountableUnits = Math.max(units - pricingPlan.discountThreshold, 0); // 할인 가능 개수let discount; // 할인가discount = discountableUnits * pricingPlan.discountFactor; // 할인가 계산if(order.isRepeat) discount += 20; // 할인가 계산2const baseCharge = pricingPlan.base; // 요금 기본const chargePerUnit = pricingPlan.unit; // 요금 단위let charge; // 요금charge = baseCharge + units * chargePerUnit; // 요금 계산1charge = charge - discount;// 요금 계산2chargeOrder(charge);// 주문 요금 부과

// Before : allocatedResources.push가 조건문 마다 중복된다.// 목표 : 밖으로 슬라이싱 하여 중복을 제거해보자.let result;if (availableResources.length ===0) {    result = createResource();    allocatedResources.push(result);} else {    result = availableResources.pop();    allocatedResources.push(result);}return result;// After : 조건문마다 allocatedResouces.push가 여전히 실행되지만, 중복이 제거되었다.let result;if (availableResources.length ===0) {    result = createResource();} else {    result = availableResources.pop();}allocatedResources.push(result);return result;

// Before : 하나의 반복문에 2가지 일을 한다.// 목표 : 반복문을 쪼 개서 한 개의 반복문이 하나의 책임을 수행하게 해보자.let averageAge = 0;let totalSalary = 0;for (const p of people) {    averageAge += p.age;    totalSalary += p.salary;}averageAge = averageAge / people.length;// After : 하나의 반복문에 1가지 일을 처리한다.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;

// Before : 반복문 쪼개기 적용 전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 `youngestAge: ${youngest}, totalSalary: ${totalSalary}`;// After : 반복문 쪼개기에 youngestAge와 totalSalary 함수로 추출하기 까지 적용.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));}

// Before : 단순 for문 사용// 목표 : 컬렉션 파이프라인을 이용하여 논리의 흐름 파악을 쉽게 만들어 보자.function acquireData(input) {  const lines = input.split('\n');  let firstLine = true;  const result = [];  for (const line of lines) { // line 별 순회    if (firstLine) {      firstLine = false; // 1번째 line이면 버리기      continue;    }    if (line.trim() === '') continue; // trim한 경우 빈 라인이면 버리기    const record = line.split(','); // ,을 구분자로 레코드 분리    if (record[1].trim() === 'India') { // India인 레코드면 결과에 저장      result.push({ city: record[0].trim(), phone: record[2].trim() }); // 저장된 레코드의 도시와 전화번호만 저장    }  }  return result;}// After : 내장 Array 함수 사용function acquireData(input) {  const lines = input.split('\n');  return lines      .slice  (1) // 1번째 라인 버리기      .filter (line   => line.trim() != '') // line을 트림한 경우 빈라인이면 버리기      .map    (line   => line.split(',')) // ,을 구분자로 레코드 분리      .filter (fields => fields[1].trim() === 'India') // 레코드가 India꺼면 저장      .map    (fields => ({city: fields[0].trim(), phone: fields[2].trim()})); // 저장된 레코드의 도시와 전화번호만 저장}