티스토리 뷰

728x90
반응형

여러개의 조건문에서 처리를 한다면 if/else문 또는 switch/case 문 을 떠오를 것이다.

if/else 문, switch/case 문 없이 조건문을 작성할 수 있을까?

 

 

true/false 로 리턴시키는 형태로는 가능할 거 같다.

그렇지만 조건문의 길이가 너무 길고, 읽기가 불편한다. 

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

조건문을 간결하게 줄일 수 없을까?

 

 

배열의 내장함수 includes 를 사용한다.

function isAnimal(text){
	const animals = [
    	'고양이',
        '개',
        '너구리',
        '거북이',
        '곰'
    ];
    
    // 배열의 내장함수 includes() : 배열에 포함되어있는지 찾아준다.
    return animals.includes(text);
}

 

 

arrow function을 사용하여 더 간단히 나타낼 수 있다.

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

 

 

하지만 true/false로 리턴할 뿐, if/else문 와 swit/case 문 처럼 조건별로 나타낸다고 볼 수 없다.

위의 예시를 참고하자면, 각 동물들마다 나타내는 소리를 다르게 하고싶다면 어떻게 해야될까?

 

if/else 문, switch/case문도 조건별로 나타낼 수 있다지만 간결하지 않다.

// if/else문
function getSound(animal) {
  if (animal === "개") return "멍멍멍";
  else if (animal === "고양이") return "야옹";
  else if (animal === "참새") return "짹짹";
  else if (animal === "비둘기") return "구구구";
  return "...?";
}


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

 

객체를  활용

key-value 형태로 나타내어, 해당 key에 대응되는 value값을 결과로 한다.

function getSound(animal) {
  const sounds = {
    개: "멍멍",
    고양이: "야옹",
    참새: "짹짹",
    비둘기: "구구"
  };

  return sounds[animal] || "...?";
}

 

return sound[animal] || '...?';  코드를 해석해보면

animal이라는 Key가 sounds에 존재하지 않으면

sounds[anmial]은 falsy한값(undefined)이 된다.

falsy한 값이 앞에 있을 때는 맨뒤값인 '...?' 을 리턴한다.

 

 

key별로 각 함수를 만들어서 리턴

function makeSound(animal) {
  const tasks = {
    개: () => {
      // 화살표 함수
      console.log("멍멍");
    },
    고양이() {
      // 추천하는 함수
      console.log("야옹");
    },
    비둘기: function () {
      // 익명함수.
      console.log("구구");
    }
  };

  // 선언을 해주는게 좋다.
  const task = tasks[animal];
  if (!task) {
    console.log("...?");
    return;
  }

  return task();
}

makeSound("개");		//멍멍
makeSound("고양이");	//야옹
makeSound("비둘기");	//구구
makeSound("인간");	//...?

 

 

 

728x90
반응형

'Backend > Typescript & Angular' 카테고리의 다른 글

함수의 기본 파라미터  (0) 2021.09.26
단축평가 논리 계산법  (0) 2021.09.26
Truthy와 Falsy  (0) 2021.09.26
삼항연산자  (0) 2021.09.26
프로토타입과 클래스  (0) 2021.09.09
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/04   »
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함