[JavaScript] if와 else if에서의 문제 해결

❓ 문제

부트캠프에서 주어진 과제를 풀다가 헷갈렸던 개념이 있었습니다.

차례대로 문자열 3개를 입력받아서 그 중 가장 짧은 문자열을 리턴하면 되는데,

동일한 문자열이 있다면 먼저 나온 것을 리턴하면 되는 문제입니다.

 

아래 코드는 문제가 되었던 풀이입니다.

function fn(word1, word2, word3) {
  const l1 = word1.length;
  const l2 = word2.length;
  const l3 = word3.length;

  if (l1 <= l2) {
    if (l1 <= l3) return word1;
  }
  else if (l2 <= l3) {
    if (l2 < l1) return word2;
  }
  else if (l3 < l1) {
    if (l3 < l2) return word3;
  }
}

테스트케이스가 gold, silver, no 일 경우 각각의 길이는 4, 6, 2 입니다.

저 풀이에 대입해보았을 때

• 첫 번째 조건문: 4 ≤ 6 이지만 4 ≤ 2가 아니므로 다음 조건문으로 넘어감
• 두 번째 조건문: 6 ≤ 2 가 아니므로 넘어감
• 세 번째 조건문: 2 < 4 이면서 2 < 6 이므로 조건을 모두 만족

따라서 no가 나올 것이라고 생각했습니다.

하지만 나온 것은 undefined 였습니다…!

왜 그런지 구글링도 해보고 콘솔로그 찍어서 디버깅도 해봤더니 이유를 찾았습니다.

 

---

✅ 해결

첫 번째 조건문에서 처음 조건인 4 ≤ 6을 만족하고 내부로 들어갑니다.
제 생각은 여기서 4 ≤ 2를 만족하지 않으니 밑에 있는 두 번째 조건문으로 넘어갈거라고 생각했지만, 사실은 4 ≤ 2를 만족하지 않으니 거기서 바로 undefined를 return하고 함수가 종료된 것이었습니다.

따라서 위 풀이를 아래 풀이로 고쳐서 실행하면 통과하게 됩니다.

function fn(word1, word2, word3) {
  const l1 = word1.length;
  const l2 = word2.length;
  const l3 = word3.length;

  if (l1 <= l2) {
    if (l1 <= l3) return word1;
  }
  if (l2 <= l3) { // else 제거!!
    if (l2 < l1) return word2;
  }
  if (l3 < l1) { // else 제거!!
    if (l3 < l2) return word3;
  }
}