[웹 국비 교육 17일차] JS: 조건문(if, else if, else), 논리 연산자(&&, ||) 정리 (2025. 6. 18.)

안녕하세요!

2025년 6월 18일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 17일차 내용을 정리해보았습니다.  
오늘은 자바스크립트의 가장 기본이자 핵심인 조건문 if, else if, else와
&&, || 같은 논리 연산자, 그리고 이를 활용한 실습 문제  풀이를 정리했습니다.

 

---

 

17일차 학습내용

 

JS - 3강

## 조건문(if, else if, else)

: 조건문은 프로그램 흐름을 제어하고, 상황에 따라 다르게 동작하도록 만드는 기본 도구이다.

if (조건) {
  // 조건이 true일 때 실행
} else if (다른 조건) {
  // 첫 조건이 false이고 이 조건이 true일 때 실행
} else {
  // 모든 조건이 false일 때 실행
}

: 조건은 true 또는 false로 판별된다.

 

---

## 연산자 종류

## 사칙연산

기호	설명
+	더하기
-	빼기
*	곱하기
/	나누기

 

---

 

## 논리연산

기호	의미
==	같다
!=	다르다
>	크다 (초과)
<	작다 (미만)
>=	크거나 같다 (이상)
<=	작거나 같다 (이하)
&&	그리고(and)
||	또는(or)

 

> &&는 모든 조건이 참이어야 전체가 참

> ||는 하나라도 참이면 전체가 참

---

# 3강 실습 문제

- 변수 age의 값에 따라서 성년인지 미성년인지 출력해주세요.

console.clear();

let age;

console.log("== 정답 v1 ==");

age = 20;

if ( age >= 20 ) {
  console.log("성년입니다.");
}

if ( age < 20 ) {
  console.log("미성년입니다.");
}

console.log("== 정답 v2 ==");

age = 15;

if ( age >= 20 ) {
  console.log("성년입니다.");
}
else {
  console.log("미성년입니다.");
}

console.log("== 정답 v3 ==");

age = 215;

if ( age < 20 ) {
  console.log("미성년입니다.");
}
else {
  console.log("성년입니다.");
}

: 조건을 판단한 후, 해당 블록의 코드를 실행한다.
: 이때 else는 모든 조건이 거짓일 때 실행된다.

---

JS - 4강

## 비교연산자(&&, ||)

: 조건문에서 두 가지 이상의 조건을 조합할 때 사용하는 연산자이다.

 

---

# && (그리고 / AND)

모든 조건이 참일 때만 전체가 참

if (나이 >= 19 && 학생 === true)

:  나이가 19세 이상이고, 학생이어야만 조건을 만족한다.

 

# || (또는 / OR)

하나라도 참이면 전체가 참

if (나이 >= 65 || 학생 === true)

: 나이가 65세 이상이거나, 학생이면 조건을 만족한다.

 

- 비교연산자 예시

console.clear();

// 원빈은 남자이고, 잘생겼다. o => and &&
// 원빈은 여자이고, 잘생겼다. x => and &&

// 원빈은 남자이거나, 잘생겼다. o => or ||
// 원빈은 여자이거나, 못생겼다. x => or ||

var age = 200; // 이 값을 바꿔서 실행해보세요.

if (age > 19 && age < 60) {
    console.log("할인 대상이 아닙니다.");
}

if (age <= 19 || age >= 60) {
    console.log("할인 대상입니다.");
}

console.clear();

var num = 10; // 이 값을 바꿔서 실행해보세요.

if (num == 10) {
    console.log(num + "(은)는 10과 같다");
} else if (num == 20) {
    console.log(num + "(은)는 20과 같다");
} else {
    console.log("그 이상");
}

---

 

# 4강 실습 문제

- 실행되는 출력문에는 참 그렇지 않으면 거짓 이라고 적어주세요.

---

 

 

# 4강 실습 문제

- 할인 대상인지 아닌지 출력(&& 사용)

 

---

 

 

 

# 4강  실습 문제

- 할인 대상인지 아닌지 출력(|| 사용)

 

---

 

# 4강 실습 문제

- 할인 대상인지 아닌지 출력(중첩 if문 사용, &&와 ||는 사용 금지)

 

---

 

# 4강 실습 문제

- 할인 대상인지 아닌지 출력(if, else if, else 만 사용, &&와 ||는 사용 금지)

 

---

 

마무리

오늘은 자바스크립트 조건문의 기본 구조와, 비교/논리 연산자를 활용해 흐름을 제어하는 방법을 배웠습니다.

특히 &&, ||와 중첩 조건문을 비교하며 문제를 해결하는 부분이 어려웠습니다.

네.. 그렇습니다.

 

복습 완료! 끝-