Javascript : 조건문

kimsnmyng·2024년 11월 30일

Vanilla Javascript

목록 보기
3/23

출처: 한 입 크기로 잘라먹는 리액트, 모던 자바 스크립트

// if 조건문
let num = 10;

if (num >= 10) {
  // console.log('num은 10 이상입니다.');
  // console.log('조건이 참 입니다!')
} else if (num >= 5) {
  // console.log("num은 5 이상입니다.");
} else {
  // console.log('num이 10 이하입니다');
  // console.log('조건이 거짓입니다!')
}

// 2. swtich 문
// -> if문과 기능 자체는 동일
// -> 다수의 조건을 처리할 때 if보다 더 직관적이다.

let animal = "cat";

switch (animal) { // 비교하고 싶은 값을 괄호 안에 넣는다.
  case "cat": {
    console.log("고양이");
    break // case는 일치하는 값 이후의 모든 값들을 다 뱉어낸다. 그래서 원하는 조건을 만났을 때만 출력하고 싶으면 break가 필요하다.
  }
  case "dog": {
    console.log("강아지")
  }
  case "bear": {
    console.log("곰")
  }
  case "snake": {
    console.log("뱀")
  }
  case "tiger": {
    console.log("호랑이")
  }
  default: {
    console.log("그런 동물 없어요") // default는 else와 같은 역할을 한다.
  }
}

// swtich case는 break가 필요하다. python에서 for문 돌리다가 원하는 값 찾으면 break 하는 거랑 같은 원리
  • 제어문은 코드의 흐름을 이해하기 어렵게 만들어 가독성을 해치는 단점이 있다.
  • 그렇기에 ForEach, map, filter, reduce와 같은 고차 함수를 사용한 함수형 프로그래밍 기법에서는 제어문의 사용을 억제하여 복잡성을 해결하려고 노력한다.
  • 블록문은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부른다.
  • 자바스크립트는 블록문을 하나의 실행 단위로 취급한다. 단독으로 사용할 수도 있으나, 일반적으로 제어문이나 함수를 정의할 때 사용하는 것이 일반적이다.
  • 블록문의 끝에는 세미콜론을 붙이지 않는다. (93p)

조건문(if)

  • if문의 조건식이 불리언 값이 아닌 값으로 평가되면 자바스크립트 엔진에 의해 암묵적으로 불리언 값으로 강제 변환되어 실행할 코드 블록을 결정한다.

  • 삼항 조건 연산자의 경우의 수가 세가지라면 다음과 같이 바꿔쓸 수 있다.

var num = 2;
var kind = num ? (num > 0 '양수' :'음수') : '영';
console.log(kind); // 양수
  • 조건에 따라 단순히 값을 결정하여 변수에 할당하는 경우 if .. else문보다 삼항 조건 연산자를 사용하는 편이 가독성이 좋다. 하지만 여러 줄의 조건이 필요하다면 if ...else문을 사용하는 편이 가독성이 좋다.

조건문(switch)

  • switch문은 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case문으로 실행흐름을 옮긴다.

  • switch문의 표현식과 일치하는 case문이 없다면 실행 순서는 default 문으로 이동한다. default문은 선택사항으로, 사용할 수도 있고 사용하지 않을 수도 있다.

  • switch 문의 표현식은 불리언 값보다는 문자열이나 숫자 값인 경우가 많다.

  • switch 문은 논리적 참, 거짓 보다는 다양한 상황 (case)에 따라 실행할 코드 블록을 결정할 때 사용한다. (97p)

  • switch 문을 탈출하지 않고 끝날 때 까지 이후의 모든 case문과 default문을 실행하는 것을 폴스루 라고 한다. (98p)

  • default 문에는 break 문을 생략하는 것이 일반적이다. 그 외에는 전부 break를 넣어줌.

var month = 11;
var monthName;

switch (month) {
  case 1: monthName = 'Jan';
    break;
  case 2: monthName = 'Feb';
    break;
    .
    .
  case 11: monthName = 'Nov'; 
    .
    default: monthName = 'Invalid month';
}

console.log(monthName); // Nov
  • 폴스루를 활용해 윤년인지 판별해서 2월의 일수를 계산할 수 있다.
var year = 2000; // 2000년은 윤년, 2월이 29일
var month = 2;
var days = 0;

switch (month) {
  case 1: case 3: case 5: case 7: case 8: case 10: case 12:
    days = 31;
    break
  case 4: case 6: case 9: case 11:
    days = 30;
    break
    
  case 2:
    // 윤년 계산 알고리즘
    
    days = ((year % 4 === 0 && year % 100 !== 0) || (year % 400)) ? 29 : 28;
    break
  default:
    console.log('Invalid month);
 }
                
 console.log(days); // 29
  • if ...else 문으로 해결할 수 있다면 switch 보다 if ...else 문을 사용하는 편이 좋다.

  • 하지만 조건이 너무 많아서 가독성이 떨어진다면 switch 문을 사용하는 편이 좋다. (100p)


profile
안녕하세요 김선명입니다.

0개의 댓글