[JavaScript] 코드 리팩터링과 재사용

* 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다.

(섹션 2 : 38~39)

 

 

 

 

---

 

 

 

 

코드 리팩터링

 

조금 더 명확하고 효율적인 코드 작성하는 방법

 

 

• 코드의 반복 줄이기
• 작성했던 코드나 로직을 변경해야 할 때 변경이 필요한 횟수 줄이기

 

 

⬇ 변경 전 코드

 

 

const defaultResult = 0;
let currentResult = defaultResult;
 
function add(num1, num2) {
  const calcDescription = `${currentResult} + ${userInput.value}`;
  currentResult = currentResult + parseInt(userInput.value);
  outputResult(currentResult, calcDescription);
}
 
addBtn.addEventListener("click", add);

 

 

 

 

 

⬇ 변경 후 코드

 

 

function add(num1, num2) {
  const enteredNumber = parseInt(userInput.value);
  const calcDescription = `${currentResult} + ${enteredNumber}`;
  currentResult = currentResult + parseInt(enteredNumber);
  outputResult(currentResult, calcDescription);
}

 

 

userInput.value가 2번 반복되고 있고 만약 이 변수의 이름이 변경되면 2번 반복 작업을 해야 하므로 const로 새로운 변수 enteredNumber를 생성하여 userInput.value 값을 넣어준다. 이제 userInput에 대한 수정 사항이 생겼을 때 enteredNumber 변수만 수정해주면 되므로 조금 더 효율적이다.  

 

 

 

여기에서 한 단계 더 나아가 새로운 함수를 만들어 userInput.value 값을 반환해주도록 만들어 이를 활용할 수 있게 만들 수도 있다.

 

 

 

 

 

새로운 함수를 만들어 userInput.value 값을 반환해주기

 

 

function getUserNumberInput() {
  return parseInt(userInput.value);
}
 
function add(num1, num2) {
  const enteredNumber = getUserNumberInput();
  const calcDescription = `${currentResult} + ${enteredNumber}`;
  currentResult = currentResult + parseInt(enteredNumber);
  outputResult(currentResult, calcDescription);
}

 

 

 

getUserNumberInput이라는 함수를 하나 더 만들어 parseInt(userInput.value) 값을 반환해준다. 그리고 방금 생성했던 enteredNumber 변수에 함수를 호출하여 그 함수의 반환 값을 저장하도록 한다. 이와 같은 방법은 코드가 길거나 공유하려는 로직이 여러 줄일 때 사용하면 좋은 방법이다.

 

 

 

 

---

 

 

 

add, subtract, multifly, divide 함수를 작성할 시 반복되는 코드 수정하기

 

 

⬇ 원래 코드 (add 함수)

 

 

function add(num1, num2) {
  const enteredNumber = getUserNumberInput();
  const initialResult = currentResult;
  currentResult = currentResult + enteredNumber;
  createAndWriteOutput("+", initialResult, enteredNumber);
}

 

 

 

 

⬇ 수정 코드 (add 함수)

 

 

function createAndWriteOutput(operator, resultBeforeColc, calNumver) {
  const calcDescription = `${resultBeforeColc} ${operator} ${calNumver}`;
  outputResult(currentResult, calcDescription);
}
 
function add(num1, num2) {
  const enteredNumber = getUserNumberInput();
  const initialResult = currentResult;
  currentResult = currentResult + enteredNumber;
  createAndWriteOutput("+", initialResult, enteredNumber);
}

 

 

 

반복되는 계산 설명 부분과 출력하는 부분을 따로 함수를 만들어 사용할 수 있다.

 

 

 

이렇게 작성하면 코드가 더 길어져서 좋지 않은 코드라고 느껴질 수도 있지만 코드가 변경될 때의 반복 작업을 줄임으로써 더 효율적인 코드를 만들 수 있다. 

 

 

 

 

 

 

 

📝 전체 코드

 

 

const defaultResult = 0;
let currentResult = defaultResult;

function getUserNumberInput() {
  return parseInt(userInput.value);
}

function createAndWriteOutput(operator, resultBeforeColc, calNumver) {
  const calcDescription = `${resultBeforeColc} ${operator} ${calNumver}`;
  outputResult(currentResult, calcDescription);
}

function add(num1, num2) {
  const enteredNumber = getUserNumberInput();
  const initialResult = currentResult;
  currentResult = currentResult + enteredNumber;
  createAndWriteOutput("+", initialResult, enteredNumber);
}

function subtract() {
  const enteredNumber = getUserNumberInput();
  const initialResult = currentResult;
  currentResult = currentResult - enteredNumber;
  createAndWriteOutput("-", initialResult, enteredNumber);
}

function multifly() {
  const enteredNumber = getUserNumberInput();
  const initialResult = currentResult;
  currentResult = currentResult * enteredNumber;
  createAndWriteOutput("*", initialResult, enteredNumber);
}

function divide() {
  const enteredNumber = getUserNumberInput();
  const initialResult = currentResult;
  currentResult = currentResult / enteredNumber;
  createAndWriteOutput("/", initialResult, enteredNumber);
}

addBtn.addEventListener("click", add);
subtractBtn.addEventListener("click", subtract);
multiplyBtn.addEventListener("click", multifly);
divideBtn.addEventListener("click", divide);