[TIL]JavaScript_조건문

Sohee Yeo·2023년 6월 5일

조건문(Conditional Statement)

자바스크립트에서 조건문은 주어진 조건식의 평가 결과에 따라 코드 블록의 실행을 결정한다.

if문

if문은 괄호 안에 들어가는 조건이 true이면 코드 블록이 실행된다.

if(조건식){
  // 조건이 참이면 실행될 코드
}

조건이 참인 경우 실행할 코드가 여러개라면, 중괄호{}로 감싸준다.

if(name === 'kim'){
  alert('안녕하세요.');
  alert('반갑습니다.');
}

📢 조건이 참인 경우 실행할 코드가 한 줄 뿐이라면 중괄호를 생략할 수 있지만, 코드의 가독성을 위해 중괄호로 감싸는 것을 추천한다.

if ... else 문

if ... else문은 조건식의 평가 결과가 true일 경우 if문의 코드 블록이 실행되고, false인 경우 else문의 코드 블록이 실행된다.

if(조건식){
  // 조건이 참이면 실행될 코드
} else {
  // 조건이 거짓이면 실행될 코드
}

if(x % 2){ // x값이 2로 나누어질 경우
  console.log('짝수');
} else { // x값이 2로 나누어지지 않은 경우
  console.log('홀수');
}

조건 여러개를 처리해야 할 경우 else if 문을 사용한다. if문과 else문은 한 번만 사용 가능하지만 else if문은 여러 번 사용할 수 있다.

if(조건식1){
  // 조건식1이 참이면 실행될 코드
} else if(조건식2) {
  // 조건식2가 참이면 실행될 코드
} else {
  // 조건식1, 조건식2 모두 거짓이면 실행될 코드
}

if(x > 0){ // x값이 0보다 클 경우
  console.log('양수');
} else if(x < 0) { // x값이 0보다 작을 경우
  console.log('음수');
} else { // x값이 0보다 크지도 작지도 않을 경우
  console.log('영');
}

조건부 연산자 '?'

if ... else 문은 조건부 연산자 '?'를 사용해 나타낼 수 있다.

조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값

// x가 2로 나누어지면 짝수, 나누어지지 않으면 홀수
(x % 2) ? '짝수' : '홀수';

📢 단순히 값을 결정하여 변수에 할당하는 경우 조건부 연산자를 사용하는 편이 가독성이 좋다. 하지만 여러 줄의 문이 필요하다면 if ... else 문을 사용하는 편이 가독성이 좋다.

switch문

복수의 if 조건문은 switch 문으로 바꿔 사용할 수 있다. switch 문은 하나 이상의 case 문으로 구성되어 있다. 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 이동한다. 일치하는 case 문이 없다면 default 문으로 이동하는데, default 문은 필수는 아니다.

switch(표현식) {
  case 표현식1:
    switch 문의 표현식과 표현식1이 일치하면 실행될 문;
    break;
  case 표현식2:
    switch 문의 표현식과 표현식2이 일치하면 실행될 문;
    break;
  default:
    switch 문의 표현식과 일치하는 case 문이 없을 때 실행될 문;
}

let month = 5;
let thisMonth;

switch(month) {
  case 1: thisMonth = 'Jan';
    break;
  case 2: thisMonth = 'Feb'
    break;
  case 3: thisMonth = 'Mar'
    break;
  case 4: thisMonth = 'Apr'
    break;
  case 5: thisMonth = 'May'
    break;
  case 6: thisMonth = 'Jun'
    break;
  case 7: thisMonth = 'Jul'
    break;
  case 8: thisMonth = 'Aug'
    break;
  case 9: thisMonth = 'Sep'
    break;
  case 10: thisMonth = 'Oct'
    break;
  case 11: thisMonth = 'Nov'
    break;
  case 12: thisMonth = 'Dec'
    break;
  default: thisMonth = 'Invalid month';
}

console.log(thisMonth); // Jun