해보자고

[인프런] 웹 프론트엔드를 위한 자바스크립트 첫 걸음 - if ~ else if, switch ~ case 본문

프로그래밍/자바스크립트

[인프런] 웹 프론트엔드를 위한 자바스크립트 첫 걸음 - if ~ else if, switch ~ case

초코맛동산 2024. 4. 9. 15:59

0. 간단한 조건문 개념

 

 

1. if - else if 조건문 

  • 여러 조건에 따라 서로 다른 코드를 실행할 때 사용되는 조건.
let num1 = 5;

if (num1 == 10) { 
    console.log("num1 is 10");
} else if (num1 == 20) {
    console.log("num1 is 20");
} else {
    console.log(num1);
}

// 결과값: 5

 

 

2. switch ~ case 문 

  • 특정 값이 무엇인지에 따라 각각 다른 작업을 수행할 수 있는 조건문 
  • switch 괄호 안의 변수값과 case문의 변수값이 같으면 해당 case문의 코드가 실행된다. 
let answer = 3;

switch (answer) {

    case 1:
        console.log( answer + " is not corret.");
        break;

    case 2:
        console.log( answer + " is not corret.");
        break;

    case 3:
        console.log( answer + " is corret.");
        break;

        // 결과값: 3 is correct.

}

 

let answer = 1;

switch (answer) {

    case 1:
        console.log( answer + " is not corret.");
        break;

    case 2:
        console.log( answer + " is not corret.");
        break;

    case 3:
        console.log( answer + " is corret.");
        break;

        // 결과값: 1 is not correct.

}

 

 

간단한 switch ~ case 문 예시 인데 해당 조건문에서 주의 해야할 점이 있다. 

주의 1) case 문 안의 break 를 조심하자. 

let answer = 2; // 정답 값을 2로 변경 해주었다. -> case 2가 실행.

switch (answer) {

    case 1:
        console.log( answer + " is not corret."); 
        // break;

    case 2:
        console.log( answer + " is corret.");
        // break;

    case 3:
        console.log( answer + " is not corret.");
        // break;

        // 2 is corret. 
	// 2 is not corret.

}
  • break문에 주석 처리를 하고 실행해주었다. 실행결과 case 2번이 실행되고, 3번까지 실행된 것을 확인할 수 있다.

-> break를 작성하지 않으면 조건에 맞는 case 문 이후의 코드들이 전부 다 실행된다. 

 

 

- 사실 해당 코드는 정답이 아니면 같은 값을 출력한다. 코드의 간결성을 위해 switch ~ case 문에서 default:를 사용해 준다. 

let answer = 2;

switch (answer) {

    case 2:
        console.log( answer + " is corret.");
        break;

    default:
        console.log( answer + " is not corret.");
        break;

        // 결과값: 2 is correct

}

 

-> 정답이 아닌 모든 값에 대해 ${answer 변수 값} is not corret. 를 출력해준다. 

 

 

 

 

 

30% 할인 쿠폰

강의 링크 : https://inf.run/7AC37

쿠폰 번호 : 15510-513af80c45b8