[한입챌린지] 2일차 - JS 조건문과 반복문

자바스크립트의 조건문

---

if 문 (if 조건문)

- 조건문이란 특정 조건을 만족했을 때에만 실행되는 코드를 작성하기 위한 문법

- 대표적으로 if, switch 조건문이 존재함

- 문법은 먼저 if 키워드를 써주고, 이어서 조건식을 써줄 소괄호와 조건식이 만족했을 때 실행할 코드가 들어가는 중괄호를 써준다.

- 중괄호 안에는 여러줄의 코드를 작성할 수도 있다.

- 조건식의 결과가 거짓으로 조건을 만족하지 않으면, 중괄호 안의 코드가 실행되지 않는다.

- if문의 조건식을 만족하지 않았을 때 수행하고 싶은 코드가 있는 경우 (조건식의 결과가 거짓일 때) if 문 아래 else문의 중괄호를 열어서 코드를 추가할 수 있다.

- else의 의미는 '그렇지 않으면' 이며, 전체적인 의미를 표현하면 'if 조건문이 참이면 이어서 오는 if 중괄호의 코드를 실행하고, 그렇지 않으면 else 중괄호 안의 코드를 실행해라"가 된다.

- if문에는 추가 조건을 연달아 달 수도 있다. 방식은 if문 아래 else if 문을 추가해주면 된다. (else if 문은 갯수 제한 없음)

- else if문 또한 if 문과 같이 소괄호에 조건식을 넣고, 조건이 만족했을 때 코드를 중괄호에 넣으면 된다.

- 주의할 점은 if 문은 if로 시작해서 if 또는 else로 끝나야 한다.
(else if 문으로 시작하거나, else 문이 else if 문 위에 있으면 Error 발생)

// 1. if 조건문 (if문)

let num = 10;

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

 

Switch 문

- if 문과 기능 자체는 동일하다. 조건에 따라서 다른 코드를 실행시켜 주는 행위는 같다.

- 하지만 다수의 조건을 처리할 때 if 보다 더 직관적이라는 특징이 있다.

- switch 소괄호에는 변수가 들어간다. 실행될 코드는 중괄호에 작성하며, case 문을 통해서 소괄호의 변수가 될 수 있는 각각의 후보를 작성해준다.

- case 문은 case 키워드와 변수의 후보 값을 써준뒤 콜론(:)을 쓰고 다시 중괄호를 사용해 실행할 코드를 작성한다.

- 주의할 점은 Switch 문은 일치하는 case 구문이 있으면, 그 하위의 case의 코드까지 모두 실행한다.

- 그렇기 때문에, case 문의 중괄호 코드 마지막 줄에는 필수적으로 break 키워드를 작성해줘야 한다.

- 어떠한 케이스에도 해당되지 않는 경우에는, 마치 if 문의 else 문과 같은 기능이다. Switch 구문의 마지막에 default 문을 사용해주면 된다. case 문과 사용법은 동일하다.

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

let animal = "cat";
animal = "owl";

switch (animal) {
    case "cat": {
        console.log("고양이");
        break;
    }
        case "dog": {
        console.log("강아지");
        break;
    }
        case "bear": {
        console.log("곰");
        break;
    }
        case "snake": {
        console.log("뱀");
        break;
    }
        case "tiger": {
        console.log("호랑이");
        break;
    }
    default: {
        console.log("그런 동물은 전 모릅니다");
        break;
    }
}

 

If 문과 Switch 문 중에 뭘 써야 할까?

어떤 변수 값을 기준으로 각각 다른 코드를 작동시키고 싶다면 Switch 문을, 그렇지 않고 복잡한 여러개의 조건을 적용하고 싶다면 if 문을 이용하는 것이 좋다.

 

자바스크립트의 반복문

---

반복문 (Loop, Iteration)은 어떠한 동작을 반복해서 수행할 수 있도록 만들어 주는 문법이다.조건문과 함께 프로그래밍에서 가장 기본적이면서도 핵심적인 문법이다. 반복문은 조건문과 함께 앞으로 굉장히 많이 이용할 것이기 때문에 확실히 이해하고 넘어가도록 한다.

 

for 문

- for 문의 형태는 if 문과 동일하게 조건을 넣을 소괄호를 써주고, 조건을 만족했을 때 실행할 코드를 중괄호에 넣어준다.

- for 문의 조건식은 세미콘론(;)으로 분리된 세 개의 조건식(초기식, 조건식, 증감식)을 써준다.

- 초기식은 for문 내에서만 사용할 수 있는 특별한 변수(카운터 변수)를 초기화 해주기 위한 식이다.

- 조건식은 반복문이 언제까지 반복할 것인지에 대한 조건을 설정하는 식이다.

- 조건식이 참일 때에만 반복을 계속하고, 거짓일 때는 반복을 종료한다.

- 증감식은 매 반복 마다 카운터 변수에 증감시키는 용도로 사용된다. 증감시켜주므로써 몇번 반복했는지 기록한다.

- 정리하면, 반복문에는 카운터 변수가 있는데, 조건식을 만족할 때까지만 반복을 수행할 것이고, 매 반복마다 카운터 변수를 증감시킨다.

// for 문
for (let idx=0; idx < 10; idx++) {
    console.log(idx, "반복");
}
// 0, "반복"
// 1, "반복"
// ...
// 10, "반복"

 

 

for문의 break 문

- for 문이 반복하는 중간에 조건식이 거짓이 되지 않을 때에도 강제로 종료하는 방법

- for 문의 조건식을 변경할 수 없는 상황에서, 특정 조건을 만족할 경우 반복문을 종료할 수 있다.

// break 문
for (let idx=0; idx < 10; idx++) {
    console.log(idx, "반복");

    if (idx >= 5) {
        break; // for문 종료
    }
}

 

for 문의 continue 문

- for 문이 반복하는 중간에 해당 회차를 건너뛰는 방법이다.

- continue 문은 for 문에서 continue 키워드 아래의 코드 라인은 실행하지 않고 다음 반복 회차로 넘어간다.

- 그렇다면 아래 코드와 같이 짝수의 경우에는 건너뛰고, 홀수 회차만 실행되도록 할 수 있다.

// continue 문
for (let idx=0; idx < 10; idx++) {
    if (idx % 2 === 0) {
        continue; // 짝수 회차는 건너뛰기
    }
    console.log(idx, "반복");

    if (idx >= 5) {
        break; // for문 종료
    }
}

 

Day 2 미션

 

---

(1) 다음 요구사항을 만족하는 코드를 작성하세요.

- 새로운 변수 max를 만들어 x와 y중 더 큰 수를 할당합니다.

- max를 console 에 출력합니다.

const x = 15;
const y = 20;

let max;

 

(2) 다음 요구사항을 만족하는 코드를 작성하세요.

- 변수 a의 저장된 값의 타입을 문자열로 출력하세요.

- 조건문과 typeof 연산자를 이용해 코드를 작성하세요.

   ex) a가 number 타입이라면 console.log("숫자")

   ex) a가 string 타입이라면 console.log("문자열")

   ex) a가 boolean 타입이라면 console.log("불리언")

    ...

const a = true;

 

(3) 다음 요구사항을 만족하는 코드를 작성하세요.

- 주어진 온도에 따라 다음 메시지를 콘솔에 출력하세요.

   > 온도가 0도씨보다 낮으면 "매우 추움"을 출력합니다.

   > 온도가 0도씨 이상 10도씨 미만이면 "추움"을  출력합니다.

   > 온도가 10도씨 이상 20도씨 미만이면 "적당"을 출력합니다.

   > 온도가 20도씨 이상이면 "더움"을 출력합니다.

let temperature = 10;

 

정답: 내 GitHub에 써두었다.

https://github.com/redcontroller/onebite-react/blob/main/section01/mission-day02.js

onebite-react/section01/mission-day02.js at main · redcontroller/onebite-react

 

출처

---

(강의) 한입 크기로 잘라 먹는 리액트