TIL (2022.1.5) -[JS] 리팩토링 경험

박세진·2022년 1월 5일
0

오늘은 조건문과 관련된 문제를 풀고, 언니한테 내가 만든 코드에 대해서 처음으로 피드백을 받아봤다.

  • 함수의 인자로 숫자 두 개가 주어졌을 때 함수는 2가지 조건을 검사한다.
  • 두 숫자 모두 짝수인지 확인하고, 두 숫자 모두 9보다 작은지 확인한다.
  • 두 조건을 모두 만족하는 경우만 true를 반환.

처음에 내가 짠 코드

function isBothEvenAndLessThan9(num1, num2) {
  if (num1 % 2 === 0 && num1 < 9) {
    if (num2 % 2 === 0 && num2 < 9) {
      return true;
    } else {
      return false;
    }
  } else {
    return false;
  }
};

let output = isBothEvenAndLessThan9(2, 4);
console.log(output); // true;

let output2 = isEitherEvenAndLessThan9(72, 2);
console.log(output2); // false;

중첩된 if문 제거

  • 일단 if 조건문이 중첩되어 있다 보니까 중괄호가 어디서 끝이 난 건지, 맞게 닫은 건지 확실하게 분간이 가지 않기 때문에 중첩된 조건문을 제거.

  • 이건 단순한 코드이기 때문에 중첩된 if문을 사용해도 문제 없지만, 만약 코드가 길어질 경우에는 복잡해지고, 조건이 한 눈에 보이지 않기 때문에 중첩된 조건문을 제거.

function isBothEvenAndLessThan9(num1, num2) {
  if () {
  } else {
    return false;
  }
};

동일한 작업을 하는 코드 함수로 추출


// 일단 조건이 num1, num2가 둘 다 짝수이고, 9보다 작아야 된다.
// 동일한 조건이기 때문에 따로 중복 작업을 함수로 추출해준다.

function checkNumber (num) {
	return num % 2 === 0 && num <9;
};

// 이렇게 조건을 체크해주는 동일한 작업을 하는 코드를 함수로 추출하면 조건도 잘 보인다.
// checkNumber는 boolean값을 반환하도록 만들었기 때문에 함수를 return 값으로 반환하면 된다.

function isBothEvenAndLessThan9(num1, num2) {
  if (checkNumber(num1)) {
    // console.log(checkNumber(num2));
  	return checkNumber(num2);
  } else {
    return false;
  }
};

//
let output = isBothEvenAndLessThan9(2, 4);
console.log(output); // true;

let output2 = isEitherEvenAndLessThan9(72, 2);
console.log(output2); // false;

불필요한 조건 제거

// 불필요한 조건을 제거하고, 더욱 간단하게 적을 수 있다.

function checkNumber (num) {
  return num % 2 === 0 && num < 9;
};

function isBothEvenAndLessThan9 (num1, num2) {
	return checkNumber(num1) && checkNumber(num2);
}

처음에 이 코드를 만들었을 때, 중첩된 조건문만 사용할 수 있다고 생각했다. 조건에 조건을 충족해야 되면, 어떻게든 중첩 조건문을 써야 된다고 생각했기 때문이다.

근데 이렇게 깔끔하고 가독성도 높고, 에러가 날 확률도 적어질 수가 있다는 것에 놀랐다.
(처음에 중첩된 조건문을 적으면서 중괄호를 안 닫아서 에러가 자주 났다.)

갑자기 드는 생각이지만, 현재의 자바스크립트는 나에게 약간 로또 같다. 어찌 저찌 했지만, 나중에 보고 나면 아~ 이거 맞출 수 있었는데 하게 되는...ㅎㅎ

코드에 대한 피드백을 받고 나니까 '아 이렇게 함수로 추출할 수 있었구나~ 왜 나는 이런 생각을 못 했지?' 이랬다. 오늘의 공부는 다른 날보다 더 나에게 값진 시간이었다.

profile
경험한 것을 기록

0개의 댓글