08 - 기능이동 - 문장을 함수로 옮기기

개요

중복 제거는 건강한 코드를 위해 필요하다.

중복되는 코드를 발견하면 반복 부분을 함수로 합치는 방법을 강구한다.

합쳐놓으면 변경이 발생 시 단 한곳만 수정하면 된다.

 

코드를 여러 변형으로 나눠야 하는 순간이 오면 문장을 호출한 곳으로 옮기기를 적용하면 된다.

 

예시

사진 관련 데이트럴 HTML로 내보내는 코드

function renderPerson(outStream, 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(p){     return [         "<div>",         `<p>제목: ${p.title}</p>`,         emitPhotoData(p),         "</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"); }

function photoDiv(p){     return [         "<div>",         zznew(p),         "</div>",     ].join("\n"); } //중복 제거를 위해 함수 추출 function zznew(p){     return [         `<p>제목: ${p.title}</p>`,         emitPhotoData(p) ,     ].join("\n"); }

function renderPerson(outStream, person){     const result = [];     result.push(`<p>${person.name}</p>`);     result.push(renderPhoto(person.photo));     //추가 중복 제거     result.push(zznew(person.photo));     return result.join("\n"); }

function renderPerson(outStream, person){     const result = [];     result.push(`<p>${person.name}</p>`);     result.push(renderPhoto(person.photo));     //추가 중복 제거     result.push(zznew(person.photo));     return result.join("\n"); } function photoDiv(p){     return [         "<div>",         zznew(p),         "</div>",     ].join("\n"); } //emitPhotoData()인라인하기 function zznew(p){     return [         `<p>제목: ${p.title}</p>`,         `<p>위치: ${p.location}</p>` ,         `<p>날짜: ${p.date.toDateString()}</p>`,     ].join("\n"); }

function renderPerson(outStream, 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(p){     return [         "<div>",         emitPhotoData(p),         "</div>",     ].join("\n"); } //함수 이름 바꾸기로 마무리 function emitPhotoData(p){     return [         `<p>제목: ${p.title}</p>`,         `<p>위치: ${p.location}</p>` ,         `<p>날짜: ${p.date.toDateString()}</p>`,     ].join("\n"); }

function renderPerson(outStream, 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"); }