(자바스크립트) 조건문

if

• 표현식이 참으로 표현될 때 실행되는 블록

  if (표현식) {
      표현식이 참일 때 실행
  } 

  const a = 1;
  if (a + 6 === 7 ) {
      console.log('a+6은 7이다');
  }
  
  const a = 2;
  if (a + 6 === 7) {
      console.log('a+6은 7이 아니다');
  }

• 블록에 코드가 한 줄이면 중괄호{} 생략 가능

  if (true) console.log('항상 실행');

---

else

• if에 해당하지 않을 때

  const n = 9;

  if (n > 10) {
      console.log('n이 10보다 큼');
  } else {
      console.log('n이 10보다 작음');  // n이 10보다 작기 때문에 else의 조건이 출력됨
  }

---

else if

• 조건을 나눌 수 있음

• 위의 else는 if 조건이 참이 아니라면 else 조건을 실행하는 것이라면, else if는 그 사이에 여러 조건들로 구분할 수 있음

  const n = 15;

  if (n % 3 === 0 && n % 5 === 0) {
      console.log('n은 15의 배수');
  } else if (n % 3 === 0) {
      console.log('n은 3의 배수');
  } else if (n % 5 === 0) {
      console.log('n은 5의 배수');
  } else {
      console.log('n은 3의 배수도 아니고, 5의 배수도 아님');
  }

• 중첩도 가능함

  if (n % 3 === 0 && n % 5 === 0) {  
      console.log('n은 15의 배수입니다');
  } else {  // 15의 배수가 아닌 경우 안에서 조건문
    if (n % 3 === 0) {
        console.log('n은 3의 배수입니다');
    } else if (n % 5 === 0) {
        console.log('n은 5의 배수입니다');
    } else {
        console.log('n은 3의 배수도 아니고, 5의 배수도 아니다');
    }
  }

---

switch case

• 특정 값에 따라 다른 작업을 하고 싶을 때 사용

  const fruit = 'orange';

  switch (fruit) {
      case 'orange':
          console.log('오렌지');
          break;
      case 'pineapple':
          console.log('파인애플');
          break;
      case 'mango':
          console.log('망고');
          break;
      default:  // 위의 케이스 중 아무것에도 해당하지 않는 경우에 실행
          console.log('과일이 아닙니다');
  }

• default - 어떤 조건에도 안맞더라도 default 뒤의 문장은 항상 참이기 때문에 실행됨.
  default는 항상 실행되는데, case를 충족했을 때 default는 실행하고 싶지 않다면 반드시 break로 끝내줘야 함

• break - 다음 코드까지 실행되기 때문에 꼭 break로 끝내줘야 함
  
  

---

논리연산자

• 논리연산자를 이용한 조건부 실행

• 논리연산자는 앞의 표현식을 먼저 평가한다

• 이때 단락 평가( short-circuit )를 수행함

  (거짓 표현식) && expr  // 거짓 표현식으로 단락 평가
  (참 표현식) || expr   // 참 표현식으로 단락 평가

  // "단락"이란, 위 규칙에서 expr을 평가하지 않음을 의미

• and &&

• 앞 표현식이 참이어야 뒤 표현식도 평가
  → 💥 앞 표현식이 참이면 뒤 표현식이 실행 됨
  
  ( 앞참 뒤실행 / 앞거짓 앞실행)

  const n = 7;
  (n % 5 === 0) && console.log('앞 표현식이 참일 때 실행됨')
  // 앞 표현식이 false이므로 뒤의 문자열 출력되지 않음

  console.log(false && (3 === 4));  // false
  console.log('Cat' && 'Dog');      // Dog
  console.log('Cat' && false);      // false
  console.log('' && false);         // ""
  console.log(false && '');         // false

• OR ||

• 앞 표현식 평가해서 참이면 뒤는 평가할 필요 없기때문에 실행하지 않음
  → ✨ 앞 표현식이 거짓이어야 뒤 표현식이 실행됨
  
  ( 앞참 앞실행 / 앞거짓 뒤실행 )

  const n = 7;
  (n % 5 === 0) || console.log('앞 표현식이 거짓일 때 실행됨')
  // 앞 표현식이 false이므로 뒤의 문자열 출력됨

  console.log(false || (3 === 4));  // false
  console.log('Cat' || 'Dog');      // Cat
  console.log('Cat' || false);      // Cat
  console.log('' || false);         // false
  console.log(false || '');         // ""

🏆 단락 평가 응용

• 특정 값이 유효할 때, 어떤 값을 조회해야 하는 경우에 유용

  const object = { color: 'orange' };  
  // 객체가 아닌 다른 값이 들어오면 에러 발생 -> ( object && object.color )

  const color = object.color;
  console.log(color);  // orange

  const object = null;  // (falsy)

  const color = object && object.color;
  console.log(color);  // null

  const object = { color: 'orange' };  // (truthy)

  const color = object && object.color;
  console.log(color);  // orange

---

삼항연산자

• 삼항연산자를 이용한 조건부 실행

• ? 와 : 으로 작성함

• 하나의 표현식만 가능하기 때문에 중괄호 {} 사용할 수 없음
  
  

조건 ? 조건이 참일 때 실행되는 표현식 : 조건이 거짓일 때 실행되는 표현식

  let n = 5;
  console.log(n % 5 === 0 ? '5의 배수' : '5의 배수 아님');  // 5의 배수

• 표현식의 결과를 변수에 할당할 수도 있음

  const message = n % 5 === 0 ? '5의 배수' : '5의 배수 아님'
  console.log(message);  // 5의 배수

  const array = [];
  let text = '';
  if (array.length === 0) {
    text = '배열이 비어있음';
  } else {
    text = '배열이 비어있지 않음';
  }

  console.log(text);  // 배열이 비어있음

• 위와 같은 코드를 삼항연산자를 사용하여 간단하게 바꿀 수 있음

  const array = [];
  let text = array.length === 0 
    ? '배열이 비어있음' 
    : '배열이 비어있지 않음';
  console.log(text);  // 배열이 비어있음

💡 참고