22.03.04 조건문 if(else, else if, swith) / 조건부 연산자(삼항연산자)

[리뉴얼] 렛츠기릿 자바스크립트

교재 : https://thebook.io/080270/part01/ch02/04/

 

 

 

조건문(if)

 - 조건의 참/거짓 여부에 따라 '실행하거나 실행하지 않거나'이므로 '분기점'이 됨.

let condition = true;                  //변수에 true / false를 넣음
  if (condition) {
    console.log('Hello, if!');
  }

  Hello, if!

 - if문 끝에는 세미콜론 안 붙여도 됨!

 

---

else, else if, switch

 - 두 가지 조건으로 분기할 땐 if, else

if (조건식) { // 조건식이 참인 값일 때 실행
  실행문;
} else { // 조건식이 거짓인 값일 때 실행
  실행문;
}

 - 세 가지 조건 이상으로 분기할 땐 if, else if, else

if (조건식) {
  실행문;
} else if (조건식) {      //원하는 만큼 넣을 수 있음
  실행문;
} else if (조건식) {
  실행문;
}

 

 - 중첩 if 문

let first = true;
  let second = false;
  if (first) {
    console.log('첫 번째 조건 충족!');
    if (second) {
      console.log('두 번째 조건도 충족!');
    } else {
      console.log('두 번째 조건은 불충족!');
    }
  } else {
    console.log('첫 번째 조건 불충족!');
  }

  첫 번째 조건 충족!
  두 번째 조건은 불충족!

 

but, 중첩 if문을 사용하기 보다는 if-else if- else 문으로 변환해서 코드 가독성을 높이는 걸 권장 

 let first = true;
  let second = false;
  if (first && second) { //  first와 second 모두 true
    console.log('첫 번째 조건 충족!');
    console.log('두 번째 조건도 충족!');
  } else if (first) { //  first만 true
    console.log('첫 번째 조건 충족!');
    console.log('두 번째 조건은 불충족!');
  } else { //  둘 다 false
    console.log('첫 번째 조건 불충족!');
  }

 

---

 switch문

 - if문을 조금 편하게 만든 것이라고 보면 됨

 - if문은 조건식이 true면 동작문을 실행 / switch문은 조건식이 비교조건식과 일치하면 동작문 실행

switch (조건식) {                    // 변수
  case 비교 조건식:                  //변수와 비교할 값
    실행문;
}

 - {}안 써서 에러나는 경우는 많아도, 써서 에러나는 경우는 없으므로 웬만해선 써버릇하길 권장함. 

 - if - else if - else 처럼 case를 여러 번 사용하면 여러 번 분기 가능함. 

let value = 'B';
  switch (value) {
    case 'A':
      console.log('A');
    case 'B':
      console.log('B');
    case 'C':
      console.log('C');
  }
  
  B
  C

 

이 경우 도중에 일치하는 case를 발견하면 그 아래 case 실행문을 모조리 실행하게 됨 -> 이를 막고자 break 사용하기도 함. 

 let value = 'B';
  switch (value) {
    case 'A':
      console.log('A');
      break;
    case 'B':
      console.log('B');
      break;
    case 'C':
      console.log('C');
      break;
  }

  B

 

 - defalt : 어떠한 case도 일치하지 않을 때 실행할 동작

              if-else if-else에서 마지막 'else'역할이라고 생각하면 됨.

              단, if문에서 가장 마지막에 위치하는 else와 달리 switch문에서 defalt는 어디에나 위치할 수 있음. 

let value = 'F';
  switch (value) {
    case 'A':
      console.log('A');
      break;
    case 'B':
      console.log('B');
      break;
    case 'C':
      console.log('C');
      break;
    default:
      console.log('아무것도 일치하지 않음');
  }

  아무것도 일치하지 않음

 

---

 

조건부 연산자(삼항 연산자)

 - 조건부 연산자 = 삼항 연산자  conditional operator

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

 - 연산자 두 개가 하나의 세트 

 - ?와 :을 기준으로 세 가지 덩어리로 나뉨

 - OO식 -> 콘솔창에 결과값이 나옴!  ▶ 조건에 따라 달라지는 값을 변수에 대입할 수 있게 되지!

> let value = 5 < 0 ? '참입니다' : '거짓입니다';
< undefined
> value;
< "거짓입니다"

 - 조건부 연산자도 if 문으로 바꿀 수 있음.

 - 조건부 연산자는 간결하게 표현할 수 있어 좋지만 그만큼 가독성이 떨어진다는 단점이 있음. (취향차이)

 

 - 중첩해서 사용가능. -> 바깥쪽끼리 서로 짝이라고 생각하면 됨.

                                 헷갈리지 않게 소괄호로 적극적으로 사용해서 해결하기 or 들여쓰기로 구분 

 let condition1 = true;
  let condition2 = false;
  let value = condition1 ? condition2 ? '둘 다 참' : 'condition1만 참' : 'condition1이 거짓';
  console.log(value);

  condition1만 참

 

 

• [퀴즈] if문을 switch문, 조건부 연산자로 바꾸기

if문)

let cond = true;
let value = '';
if (cond) {
  value = '참';
} else {
  value = '거짓';
}

switch문) break 넣는 거 까먹지 말기

let cond = true
let value = '';
switch (cond) {
    case true : 
        value = '참';
        break;
    case false : 
        value = '거짓';
        break;
}

조건부 연산자 (삼항 연산자)

let cond = true;
let value = cond? '참' : '거짓';
console.log(value);