시작 오늘 분석할 코드
점수를 입력받아 90점 이상이면 A, 80점대는 B, ... 이런 식으로 등급을 매기는 아주 흔한 예제다. 짧은 코드지만 if / else if / else의 실행 순서, prompt의 반환 타입, parseInt의 역할까지 조건문의 핵심이 전부 들어있다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>if-else</title></head> <body> <h3>if-else를 이용한 학점 매기기</h3> <hr> <script> let grade; let score = prompt("황기태 님 점수를 입력하세요", 100); // 문자열로 타이핑을 받아서 score에 저장 score = parseInt(score); // 문자열을 (정수)숫자로 바꿈 if(score >= 90) // score가 90 이상 grade = "A"; else if(score >= 80) // 80 이상 90 미만 grade = "B"; else if(score >= 70) // 70 이상 80 미만 grade = "C"; else if(score >= 60) // 60 이상 70 미만 grade = "D"; else // 60 미만 grade = "F"; document.write(score + "는 " + grade + "입니다.<br>") </script> </body> </html>
실제 출력 미리보기
if-else를 이용한 학점 매기기
85는 B입니다.
용어 용어 정리
if조건이 true일 때만 다음 문장을 실행하는 조건문
else if앞 조건이 false일 때 이어서 검사하는 추가 조건
else위의 모든 조건이 false일 때 실행되는 마지막 처리
prompt()사용자에게 입력창을 띄우고 값을 받는 함수, 반환값은 항상 문자열
parseInt()문자열 맨 앞의 숫자 부분을 정수(number)로 변환하는 함수
비교 연산자 >="크거나 같다"를 검사, 경계값을 포함시킬 때 사용
조건식계산 결과가 true 또는 false로 나오는 식
사다리 구조if - else if - else if - ... - else 를 계단식으로 이어붙인 구조
1 if의 기본 구조 — 조건이 true일 때만 실행
if(조건)은 왜 필요한가?
if(조건)은 "괄호 안의 식을 계산해서, 그 결과가 true이면 바로 다음 문장을 실행하고, false이면 통째로 건너뛴다"는 뜻이다. 조건문이 없다면 모든 코드가 무조건 위에서 아래로 실행되는데, if는 그 흐름에 분기(branch)를 만들어준다.
if(score >= 90) grade = "A"; → score가 90 이상이면 grade에 "A"를 대입 → score가 90 미만이면 이 줄은 아예 실행되지 않는다
※ if 문 자체는 "값을 돌려주는 것"이 아니라 "실행할지 말지를 결정하는 것"이다. 그래서 if만으로는 등급을 나눌 수 없고, 여러 개의 경우의 수를 나누려면 else if가 필요하다.
2 else if 사다리 — 여러 조건을 순서대로 이어붙이기
경우의 수가 5개일 때 어떻게 나누는가?
등급은 A·B·C·D·F 다섯 가지다. if 하나로는 "맞다/아니다" 두 갈래밖에 못 나누므로, else if를 계단처럼 이어붙여서 다섯 갈래를 만든다. 핵심은 앞의 조건이 false일 때만 다음 else if의 조건을 검사한다는 점이다. 즉 한 번 true가 나오면 그 아래 조건들은 아예 검사조차 하지 않는다.
1
score >= 90 검사true면 grade = "A" 하고 사다리 전체 종료
2
(1번이 false일 때만) score >= 80 검사true면 grade = "B" 하고 종료
3
(2번까지 false일 때만) score >= 70 검사true면 grade = "C" 하고 종료
4
(3번까지 false일 때만) score >= 60 검사true면 grade = "D" 하고 종료
5
여기까지 다 false면 else조건 없이 무조건 grade = "F"
※ else if가 많아 보여도 실제로 검사되는 조건은 최대 4번뿐이다(else는 조건이 없으니까). 하나가 true가 되는 순간 나머지는 전부 건너뛴다.
3 조건 순서가 왜 중요한가 — 큰 값부터 걸러야 한다
순서를 바꾸면 무슨 일이 생기는가?
이 코드가 반드시 90 → 80 → 70 → 60 순서로 검사하는 이유가 있다. else if 사다리는 처음 true가 나온 조건에서 멈추기 때문에, 만약 순서를 거꾸로(낮은 값부터) 검사하면 높은 점수도 낮은 등급의 조건에 먼저 걸려버린다.
올바른 순서 (큰 값 먼저)
score = 95 입력
① score >= 90 → true
→ grade = "A" (정답)
순서를 뒤바꾼 경우
if(score >= 60) 를 맨 위로 옮기면
score = 95도 ① score >= 60 → true
→ grade = "D" (오답! 95점이 D가 됨)
※ else if 사다리는 "가장 넓은 범위"가 아니라 "가장 먼저 걸리는 조건"이 이긴다. 그래서 겹치는 범위가 있는 조건들은 반드시 더 좁고 높은 조건(90 이상)을 먼저, 넓고 낮은 조건(60 이상)을 나중에 배치해야 한다.
4 else의 역할 — 조건 없는 마지막 안전망
else에는 왜 조건식이 없는가?
else는 괄호도 조건도 없다. "위에서부터 검사한 90, 80, 70, 60 이상 조건이 전부 false였던 나머지 전부"를 뜻하기 때문이다. 즉 60 미만인 모든 경우(59, 30, 0, 심지어 음수까지)를 한 번에 처리하는 기본값(default) 처리다.
※ 만약 else를 빼먹는다면? score가 60 미만일 때 어떤 grade = ... 문장도 실행되지 않아서 grade는 처음 선언한 대로 undefined로 남는다. 그러면 마지막 출력이 "55는 undefined입니다."처럼 어색해진다.
5 prompt는 문자열이다 — parseInt가 필요한 이유
입력값이 왜 곧바로 숫자가 아닌가?
prompt()로 받은 값은 사용자가 무엇을 입력했든 관계없이 항상 문자열(string) 타입이다. "85"라는 글자 뭉치이지 85라는 숫자가 아니라는 뜻이다. 그래서 코드는 score = parseInt(score);로 문자열을 정수로 바꿔준 다음에야 score >= 90 같은 크기 비교를 안심하고 쓴다.
let score = prompt(...); // "85" (문자열) score = parseInt(score); // 85 (숫자)
※ parseInt를 생략해도 단순한 숫자 비교는 자바스크립트가 자동으로 형변환을 해줘서 우연히 맞는 것처럼 보일 때가 있다. 하지만 입력값에 공백이나 문자가 섞이면 parseInt는 NaN을 돌려주고 NaN과의 비교는 항상 false가 되어 예상 밖의 결과("F"만 계속 나옴 등)로 이어질 수 있다. 그래서 명시적으로 변환해두는 습관이 중요하다.
6 중괄호 { } 없는 단일 문장 — 조용히 퍼지는 버그
왜 { }가 안 보이는데도 동작하는가?
이 코드의 if / else if / else 뒤에는 중괄호가 없다. 자바스크립트는 중괄호를 생략하면 바로 다음 한 문장만을 그 조건에 속하는 것으로 본다. 지금은 등급 대입 한 줄씩만 있어서 문제가 없지만, 실행할 문장이 두 줄 이상이 되는 순간 위험해진다.
※ 예를 들어 아래처럼 줄을 하나 더 추가하면 들여쓰기와 상관없이 두 번째 줄은 조건과 무관하게 항상 실행된다. if(score >= 90) grade = "A"; document.write("우수상 대상자<br>"); // 조건 무시하고 매번 실행!
※ 안전한 습관
- 실행할 문장이 1개뿐이어도 습관적으로
{ }를 붙이면 이런 실수를 원천 차단할 수 있다
- 특히 나중에 코드를 수정하면서 문장을 추가할 가능성이 있다면 처음부터 중괄호를 쓰는 편이 안전하다
7 >= 경계값 — "이상"과 "초과"는 다르다
왜 >가 아니라 >=를 쓰는가?
90점을 정확히 받은 학생도 A를 받아야 하므로 조건은 score > 90(90 초과)가 아니라 score >= 90(90 이상)이어야 한다. 부등호 하나 차이지만 경계에 있는 값(정확히 90, 80, 70, 60)을 어느 등급에 넣을지가 완전히 달라진다.
| score 값 |
score >= 90 결과 |
score > 90 이었다면 |
| 90 |
true → A |
false → A를 못 받음(오답) |
| 89 |
false → 다음 조건 검사 |
false → 동일 |
| 100 |
true → A |
true → 동일 |
※ 문제에서 "90점 이상이면 A"라고 했다면 코드도 그대로 >=로 옮겨야 한다. 경계값 처리는 요구사항 문장을 그대로 번역하는 감각이 필요하다.
8 자주 하는 실수
| 실수 |
증상 |
해결 |
대입 =과 비교 ==/=== 혼동 |
if(grade = "A")처럼 써서 조건이 항상 true가 됨 |
비교에는 반드시 == 또는 ===, 대입은 =로 구분해서 쓴다 |
| else if 순서를 낮은 값부터 씀 |
90점, 100점도 낮은 등급(D 등)으로 잘못 판정됨 |
겹치는 조건은 큰 값(좁은 범위)부터 위에 배치 |
| parseInt 없이 문자열 그대로 비교 |
입력값에 공백·문자가 섞이면 NaN이 되어 항상 false |
prompt 결과는 parseInt(또는 Number)로 변환 후 비교 |
| 중괄호 없이 실행문을 2줄 이상 작성 |
두 번째 줄이 조건과 무관하게 항상 실행됨 |
실행문이 2개 이상이면 반드시 { }로 묶기 |
| 사다리 끝에 else를 빠뜨림 |
모든 조건에 해당 안 되는 값은 grade가 undefined로 남음 |
마지막에 조건 없는 else로 나머지 전부를 처리 |
핵심 한 줄 요약
실행 방식위에서부터 순서대로 검사하다가 처음 true인 조건 하나만 실행하고 끝난다
순서 규칙겹치는 범위가 있다면 좁고 큰 조건(90 이상)을 먼저, 넓고 낮은 조건(60 이상)을 나중에
else 역할모든 조건을 다 통과 못한 나머지를 처리하는 조건 없는 안전망
형변환prompt의 반환값은 문자열이므로 parseInt로 반드시 숫자로 바꾼 뒤 비교
중괄호실행문이 여러 줄이면 반드시 { }로 묶어야 조건과 무관하게 실행되는 버그를 막는다
Tags
#JavaScript #if #else #elseif #조건문 #학점 #분기 #prompt #parseInt #자바스크립트기초 #JS #웹개발 #티스토리 #비교연산자 #형변환
▼ 티스토리 태그 입력란 복사용
JavaScript, if, else, elseif, 조건문, 학점, 분기, prompt, parseInt, 자바스크립트기초, JS, 웹개발, 티스토리, 비교연산자, 형변환
왕진 블로그
댓글