[JavaScript] 조건문 응용

이 글은 벨로퍼트와 함께하는 모던 자바스크립트의 내용을 공부하고 정리한 글입니다.

05. 조건문 더 스마트하게 쓰기 · GitBook

 

1. 특정 값이 참인지 확인하는 상황

function isAnimal(text) {
  return (
    text === '고양이' || text === '개' || text === '거북이' || text === '너구리'
  );
}

isAnimal('개'); // true
isAnimal('노트북'); // false

특정 값이 동물인지 확인하는 함수 isAnimal 을 만든다고 가정하자.

함수에서 return을 만나면 그 지점에서 함수는 중단되고 return 값을 반환한다.

반환하는 값을 보면, text 가 '고양이' 일 때, 혹은 '개' 일 때, 혹은 '거북이' 일 때, 혹은 '너구리' 일 때 true를 반환한다.

논리연산자에 따라 false || true 는 true이므로 매개변수에 위 네 가지 동물 중에 하나를 작성했다면 true를 반환하고 그렇지 않다면 모두 false 로 false 값을 반환한다.

 

위 함수는 비교해야할 값이 많아질수록 동일한 내용을 중복 작성하게 되어 코드가 쓸데없이 길어진다.

 

이 때 배열을 사용하여 중복을 줄일 수 있다.

function isAnimal(name) {
  const animals = ['고양이', '개', '거북이', '너구리'];
  return animals.includes(name);
}

isAnimal('개'); // true
isAnimal('노트북'); // false

 

includes() 메서드는 배열이 특정 요소를 포함하고 있는지 확인한다.

[1, 2, 3].includes(2); // true

 

insAinmal('개') 는 ['고양이', '개', '거북이', '너구리'].includes('개) 로 동작하여 true를 반환한다.

 

화살표 함수를 사용하면 더 짧게 만들 수 있다.

화살표 함수에서 return이 유일한 문장이라면 중괄호와 return을 생략할 수 있다.

const isAnimal = name => ['고양이', '개', '거북이', '너구리'].includes(name);

console.log(isAnimal('개')); // true
console.log(isAnimal('노트북')); // false

 

 

2. 매개변수에 따라 다른 값을 반환하는 상황

참과 거짓을 판별하는 경우 외에 입력한 매개변수에 따라 다른 값을 반환해야 하는 경우가 있다.

동물 이름을 입력하면 해당 동물 소리를 반환하는 함수를 만든다고 하자.

function getSound(animal) {
  if (animal === '개') return '멍멍!';
  if (animal === '고양이') return '야옹~';
  if (animal === '참새') return '짹짹';
  if (animal === '비둘기') return '구구 구 구';
  return '...?';
}

getSound('개'); // 멍멍!
getSound('비둘기'); // 구구 구 구

한 줄 짜리 if문이라면 중괄호를 생략할 수 있다.

따라서 위처럼 if문을 만들 수 있는데 이 역시 마찬가지로 중복 작성하는 코드가 많다.

 

switch문을 사용하여 중복을 줄일 수 있다.

function getSound(animal) {
  switch (animal) {
    case '개':
      return '멍멍!';
    case '고양이':
      return '야옹~';
    case '참새':
      return '짹짹';
    case '비둘기':
      return '구구 구 구';
    default:
      return '...?';
  }
}

getSound('개'); // 멍멍!
getSound('비둘기'); // 구구 구 구

 

덕분에 중복 작성은 줄었지만 여전히 보기 좋은 코드는 아니다.

 

객체를 사용하면 훨씬 보기 좋게 줄일 수 있다.

function getSound(animal) {
  const sounds = {
    개: '멍멍!',
    고양이: '야옹~',
    참새: '짹짹',
    비둘기: '구구 구 구'
  };
  return sounds[animal] || '...?';
}

getSound('개'); // 멍멍!
getSound('비둘기'); // 구구 구 구

 

 

3. 매개변수에 따라 다른 동작을 하는 상황

단순히 값이 달라지는 것이 아니라 전혀 다른 동작을 하는 상황에서는 객체에 함수를 사용할 수 있다.

function makeSound(animal) {
  const tasks = {
    개() {
      console.log('멍멍');
    },
    고양이() {
      alert('고양이');
    },
    비둘기() {
      confirm('구구 구 구');
    }
  };
  if (!tasks[animal]) {
    console.log('...?');
    return;
  }
  tasks[animal]();
}

makeSound('개'); // 콘솔로그 실행
makeSound('비둘기'); // 알림창 실행

 

makeSound 함수는 task[animal] 함수를 실행한다.

task[animal] 은 task 안에 있는 요소들 중에서 animal 과 같은 이름의 메서드를 의미한다.

 

 

------------------------------

마지막 객체에 함수를 사용하는 방법은 눈으로 보기엔 쉽지만 실전에서 떠올리기 쉽지 않을 것 같다.