자바스크립트 - if

[자바스크립트 if문 완전 정복 가이드] – 조건 처리의 핵심 로직을 쉽게 배우자!

웹페이지에서 버튼을 클릭했을 때 메시지를 보여주거나, 로그인 상태에 따라 화면을 다르게 구성하려면 반드시 필요한 게 있어요. 바로 조건문, 그중에서도 if문이죠.
자바스크립트를 처음 배우는 사람부터 실무자까지 무조건 알아야 할 필수 개념이에요.
오늘 이 글로 if문의 모든 걸 깔끔하게 정리해드립니다!

🔗  [자바스크립트  else문 전체 개념 정리 보러가기]

 

if문이 뭐예요? – 개념부터 시작

if문은 말 그대로 "만약 ~라면" 이라는 조건을 검사해서,
조건이 참일 때만 특정 코드를 실행하는 제어 구조예요.

if (조건) {
  // 조건이 참일 때 실행되는 코드
}

 

예를 들어, 어떤 사람이 성인인지 확인하려면?

let age = 20;

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

 

위 코드에서 age >= 18이 참이기 때문에 "성인입니다."가 출력돼요.

 

조건에는 어떤 게 들어가요?

if문 안의 조건은 불린(Boolean) 값으로 평가되는 표현식이면 뭐든 들어갈 수 있어요!

조건식 예시설명

age > 18	숫자 비교
isLoggedIn === true	불린 값 직접 비교
name.length === 0	문자열 길이 검사
input !== ""	빈 값 여부 확인

 

 

if ~ else if ~ else로 흐름 제어하기

조건이 여러 개인 경우 이렇게 단계적으로 분기할 수 있어요.

let score = 75;

if (score >= 90) {
  console.log("A학점");
} else if (score >= 80) {
  console.log("B학점");
} else if (score >= 70) {
  console.log("C학점");
} else {
  console.log("F학점");
}

 

조건을 위에서부터 순서대로 검사하고, 처음으로 참인 조건만 실행돼요.

 

자주 하는 실수 Tip!

1. 조건 뒤에 중괄호 생략하지 마세요
   가독성이 떨어지고, 버그 발생 위험이 커요.
2. 조건은 항상 불린값으로 평가됨을 기억하세요
   if("문자열"), if(0), if(null) 등도 작동하지만 헷갈릴 수 있어요.
   → 명확한 비교식 사용 추천!
3. else if는 여러 번 가능하지만 else는 1번만!
   마지막 처리용으로만 써주세요.

 

이미지로 흐름 정리 – if문 플로우 차트

{
  "prompt": "A simple flowchart explaining JavaScript if statements, showing branches like if (score >= 90) → 'A grade', else if → 'B grade', else → 'F grade'. Use arrows, code snippets, and colored boxes.",
  "size": "1024x1024"
}

 

실전 예제 – 로그인 상태에 따라 화면 제어

let isLoggedIn = true;

if (isLoggedIn) {
  console.log("환영합니다!");
} else {
  console.log("로그인해주세요.");
}

 

이런 구조는 사이트 어디에나 존재하죠?
if문만 잘 써도 훨씬 동적인 웹페이지를 만들 수 있어요.

 

마무리 요약

• if문은 조건을 검사해 코드 실행을 제어하는 기본 도구
• 복잡한 조건은 else if, else와 함께 구조화 가능
• 조건식은 반드시 불린으로 평가됨
• 실무에서는 사용자 상태, 입력값 유효성 검사, UI 조건 제어 등 다방면에 활용