[JS문법] 조건문 사용하기

해당 내용들은 패스트캠퍼스 [올인원 패키지 : React.js] 강의 내용 일부입니다.

 

• 값 가져오기 
  • OR 연산자
  • Array.prototype.includes()
  • 화살표 함수 사용하는 방법 
• 특정 값을 반환하는 경우 
  • if문 사용방법
  • switch case문 사용방법
  • 객체 활용방법

---

값 가져오기 

 

OR 연산자

: OR 연산자로 값과 일치하면 return 시킨다. 

function isAnimal(text) {
    return text === '고양이' || text === '개' || text === '거북이';
};
console.log(isAnimal('고양이')); // true
console.log(isAnimal('사람')); // false

 

Array.prototype.includes()

: includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다.

function isAnimal(text) {
    const animas = ['고양이', '개', '거북이'];
    return animas.includes(text);
};
console.log(isAnimal('고양이'));    // true
console.log(isAnimal('사람'));       // false

 

화살표 함수 + Array.prototype.includes()

: ES6 Arrow Function 과 includes() 메서드 조합 

const isAnimal = (text) =>  ['고양이', '개', '거북이'].includes(text);
console.log(isAnimal('고양이'));    // true
console.log(isAnimal('사람'));      // false

 

---

 

특정 값을 반환하는 경우

 

IF문 사용

: 동일한 코드가 여러번 반복 됨으로 좋은 코드는 아님

function getSound(animal) {
    if(animal === '개') return '멍멍!';     
    if(animal === '고양이') return '야옹!';     
    if(animal === '참새') return '짹짹';
    return '...?';     
};
console.log(getSound('개'));     // 멍멍
console.log(getSound('사람'));    // ...?

 

동일한 코드를 Switch Case로 작성

* switch 문에서 return 사용 시에 따로 break를 사용할 필요가 없다. 

function getSound(animal) {
    switch(animal) {
        case '개' : 
            return '멍멍';
        case '고양이' : 
            return '야옹';
        case '참새' : 
            return '짹짹';
        default : 
            return '...?';
    } 
};
console.log(getSound('개'));    // 야옹
console.log(getSound('사람'));  // ...?

이런 경우에 switch문보다 if문으로 작성하는 것이 깔끔해보인다.

 

 

동일한 코드를 객체를 사용해 작성하는 방법

- sounds[animal]는 sounds의 value 값이 나온다.

- OR연산자를 사용해서 sounds[animal]이 false면 뒤의 코드가 실행된다.  

function getSound(animal) {
    const sounds = {
        개: '멍멍', 
        고양이: '야옹',
        참새: '짹짹'
    };
    return sounds[animal] || '...?';
};
console.log(getSound('개'));       // 멍멍 
console.log(getSound('사람'));     // ...?

 

동일한 코드를 함수를 사용해 작성하는 방법

function makeSound(animal) {
    const tasks = {
        개: () => {         // 화살표 함수 
            console.log('멍멍');
        },
        고양이() {          // 최신 자바스크립트 문법
            console.log('야옹');
        },
        참새: function() {
            console.log('멍멍');
        }
    };
 
    const task = tasks[animal];
 
    if(!task) {
        console.log('...?');
        return;
    };
 
    task();
};
makeSound('개');        // 멍멍
makeSound('사람');      // ...?