연산자, 조건문, 반복문으로 프로그램의 흐름을 제어한다.
연산자와 제어 흐름
프로그램은 조건에 따라 갈라지고, 같은 일을 반복합니다. 이번 레슨에서는 연산자와 제어 구조로 코드의 흐름을 다스리는 법을 배웁니다.
학습 목표
- 산술·비교·논리 연산자를 구분해 사용할 수 있다
==와===의 차이를 설명할 수 있다- truthy / falsy 값을 판단할 수 있다
if·switch로 분기하고for·while로 반복할 수 있다- 삼항 연산자와 단축 평가(
&&,||,??)를 활용할 수 있다
산술 연산자
console.log(7 + 3); // → 10
console.log(7 - 3); // → 4
console.log(7 * 3); // → 21
console.log(7 / 3); // → 2.333...
console.log(7 % 3); // → 1 (나머지)
console.log(2 ** 10); // → 1024 (거듭제곱)
비교 연산자 — == vs ===
이것이 초보자가 가장 많이 헷갈리는 부분입니다.
console.log(1 == '1'); // → true (타입 변환 후 비교)
console.log(1 === '1'); // → false (타입까지 비교)
console.log(null == undefined); // → true
console.log(null === undefined); // → false
⚠️ 주의 — 항상
===(엄격한 같음) 를 쓰세요.==는 예상치 못한 타입 변환을 일으켜 버그의 원인이 됩니다.
| 연산자 | 의미 |
|---|---|
=== | 값과 타입이 모두 같음 |
!== | 값 또는 타입이 다름 |
> < >= <= | 크기 비교 |
truthy / falsy
조건문에서 boolean 이 아닌 값도 참/거짓으로 취급됩니다. falsy 한 값은 다음 8가지뿐이고, 나머지는 모두 truthy 입니다.
// falsy: false, 0, -0, 0n, '', null, undefined, NaN
if ('') console.log('실행 안 됨'); // 빈 문자열은 falsy
if ('hello') console.log('실행됨'); // → 실행됨
if (0) console.log('실행 안 됨');
if ([]) console.log('빈 배열도 truthy'); // → 빈 배열도 truthy
논리 연산자
const a = true, b = false;
console.log(a && b); // → false (둘 다 참이어야 참)
console.log(a || b); // → true (하나라도 참이면 참)
console.log(!a); // → false (반전)
if / else if / else
const score = 82;
if (score >= 90) {
console.log('A');
} else if (score >= 80) {
console.log('B'); // → B
} else {
console.log('C 이하');
}
switch
값이 여러 갈래로 나뉠 때 switch 가 읽기 좋습니다.
const fruit = 'apple';
switch (fruit) {
case 'apple':
console.log('사과'); // → 사과
break;
case 'banana':
console.log('바나나');
break;
default:
console.log('모르는 과일');
}
💡 TIP —
break를 빠뜨리면 다음case로 흘러내려 갑니다(fall-through). 일부러 쓰는 경우가 아니면 꼭 넣으세요.
반복문 — for / while
// 기본 for
for (let i = 0; i < 3; i++) {
console.log(i); // → 0, 1, 2
}
// 배열 순회는 for...of 가 깔끔
const colors = ['빨강', '파랑'];
for (const c of colors) {
console.log(c); // → 빨강, 파랑
}
// while
let n = 3;
while (n > 0) {
console.log(n); // → 3, 2, 1
n--;
}
삼항 연산자
조건 ? 참일때 : 거짓일때 형태로 짧은 분기를 한 줄에 씁니다.
const age = 17;
const label = age >= 18 ? '성인' : '미성년자';
console.log(label); // → 미성년자
단축 평가 — &&, ||, ??
논리 연산자는 boolean 뿐 아니라 값을 그대로 돌려줍니다.
const name = '';
console.log(name || '익명'); // → 익명 (왼쪽이 falsy면 오른쪽)
console.log(name ?? '익명'); // → '' (null/undefined 일 때만 오른쪽)
const user = { profile: { nickname: '코더' } };
console.log(user.profile && user.profile.nickname); // → 코더
💡 TIP —
||는0이나''같은 falsy 값도 기본값으로 바꿔버립니다. "값이 없을 때만" 기본값을 주려면??(nullish 병합)를 쓰세요.
요약
- 비교는 항상
===/!==를 사용해 타입 변환 버그를 피한다 - falsy 값은
false·0·''·null·undefined·NaN등 8가지뿐이다 if·switch로 분기하고,switch에서는break를 잊지 않는다- 배열 순회는
for...of가 가장 깔끔하다 ||는 falsy,??는 null/undefined 일 때만 기본값을 적용한다
연습문제
==와===로0 == false와0 === false를 각각 비교해 결과를 설명하세요.- 점수(0~100)를 받아 90 이상 A, 80 이상 B, 70 이상 C, 그 외 F 를 돌려주는 함수를
if/else if로 작성하세요. - 1부터 100까지 더하는 코드를
for문으로 작성하세요.힌트 — 누적 변수
let sum = 0을 두고 매 반복마다 더합니다. - 사용자 입력값이 빈 문자열이면
'손님', 아니면 그 값을 쓰도록||로 작성하세요. 입력값이0이어도 그대로 쓰려면??로 어떻게 바꿔야 할까요?
💡 연습문제 풀이
불러오는 중…
댓글 0
“JavaScript” 강좌에 대한 댓글입니다.