[JavaScript] 조건문

조건문

• 조건문은 특정 조건이 성립되었을 때 그 조건에 해당하는 코드를 실행하게 하는 문법

if문

• if문은 영어 if의 뜻과 같이 ‘만약 ~ 하면 ~ 해라’라는 뜻

• if 문 옆에 작성하는 괄호 안에 특정 조건문을 얺어 해당 조건문이 성립하면 if문 안의 코드를 실행하는 조건문

  let num = 10;
  
  if (num === 10) {
    //조건
    console.log("num의 값은 10 입니다."); //실행 코드
  }
  

  • if문의 조건인 변수 num의 값이 숫자형 10이라면, if문 안에있는 console.log를 실행
  • num의 값은 숫자형 10과 일치하므로, 해당 코드 출력 결과 “num의 값은 10입니다” 라는 값이 출력

  let num = 5;
  
  if (num === 10) {
    //조건
    console.log("num의 값은 10 입니다."); //실행 코드
  }
  

  • 변수 num의 값에 10 이 아닌 5가 할당되면, if 문 안에 있는 조건에 맞지 않기 때문에, 코드가 실행되지 않고 아무것도 출력이 되지 않음
• if문은 이렇게 특정 조건이 만족 될 때만 코드를 실행 시키는 조건문

if-else문

• if-else 문은 위의 if 문에서 else문을 추가한 것으로 ‘만약 ~ 하면 ~하고, 그렇지 않다면 ~해라’ 라는 뜻을 가지고 있음

  let num = 5;
  
  if (num === 10) {
    console.log(`num값은 10입니다.`);
  } else {
    console.log(`num값은 ${num}입니다.`);
  }
  

  • else문은, if문에 있는 조건이 성립되지 않았을 경우에, 또다른 코드를 실행시키기 위한 조건문
  • 작성된 코드에서 변수 num의 값은 5이기 때문에, if 문의 조건에 알맞지 않아, else문으로 넘어가 “num값은 5입니다.” 가 출력

• else문은 특정 조건에 만족할 경우 와 만족하지 않을 경우를 구분해, 서로 다른 코드를 실행해야 할 경우 사용하는 조건문

if-else if문

• 여러 조건에 따라 서로 다른 코드를 실행해야 할 경우 사용

  let num = 5;
  
  if (num === 10) {
    console.log("num값은 10입니다.");
  } else if (num < 10) {
    console.log("num값은 10보다 작습니다.");
  } else {
    console.log("num값은 10보다 큽니다.");
  }
  

  • 변수 num의 값이 숫자 10과 일치한다면, “num의 값은 10입니다.” 를 출력
  • if문을 만족하지 않는다면, 아래로 내려가서 변수 num의 값이 10보다 작다 라는 조건을 만족하는지 검사하고, 조건과 일치한다면, “num의 값은 10보다 작습니다” 를 출력
  • 두가지 조건을 모두 만족하지 않는다면, 가장 마지막에 “num의 값은 10보다 큽니다” 라는 문장을 출력

switch/case문

• 웹 개발을 할 때 가장 자주 쓰는 조건문

  let fruit = "apple";
  
  switch (fruit) {
    case "banana":
      console.log("바나나");
      break;
    case "orange":
      console.log("오렌지");
      break;
    case "apple":
      console.log("사과");
      break;
    case "grape":
      console.log("포도");
      break;
    default:
      console.log("다른 과일");
  }
  

  • switch/case 문은 switch문 옆에 작성된 괄호안의 변수 값과, case문 옆에 작성된 값이 일치하는 코드블록을 찾은다음, 해당 case문 블록 안에 작성된 코드를 실행
  • case로 구분해두지 않은 값이라면 default에 작성된 코드가 실행

• break; 를 작성하지 않으면 조건에 맞는 case 문 이후의 모든 코드가 실행되게 됨

  • 그렇기 때문에 case 문에서 실행할 코드를 작성하고 맨 마지막에는 항상 break;를 작성해야 함

📚 이 글은 인프런 - 웹 프론트엔드를 위한 자바스크립트 첫걸음을 수강하며 정리한 내용입니다.
강의자: 효빈 (Hyobin)
※ 본 글은 개인 학습 목적으로 작성되었으며, 일부 내용은 강의 자료를 참고하였습니다.