if문과 삼항연산자 사용 기준
조건문을 짧게 쓰려다가 코드가 오히려 읽기 어려워지는 상황
- 문제 상황 확인
- 짧은 코드로 재현
- 브라우저에서 결과 점검
if문과 삼항연산자 사용 기준에서 먼저 볼 부분
if문은 흐름이 복잡할 때 좋고, 삼항연산자는 간단한 값 선택에 좋습니다. 짧다고 항상 좋은 코드는 아닙니다.
삼항연산자는 조건에 따라 값 하나를 고를 때 간결합니다. 버튼 문구, 클래스 이름, 간단한 표시 텍스트에 잘 맞습니다.
if문은 여러 줄의 작업이 필요하거나 조건 분기가 복잡할 때 더 읽기 쉽습니다. 특히 early return 패턴과 함께 쓰면 흐름이 선명해집니다.
중첩 삼항연산자는 초보자뿐 아니라 숙련자에게도 읽기 어렵습니다. 두 번 이상 겹치면 if문으로 바꾸는 편이 좋습니다.
로그인 상태 문구
const isLoggedIn = true;
const message = isLoggedIn ? "환영합니다" : "로그인이 필요합니다";
if (!isLoggedIn) {
console.log("로그인 페이지로 이동합니다.");
}
이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.
if문과 삼항연산자 사용 기준 비교 기준
| 상황 | 추천 |
| 값 하나 선택 | 삼항연산자 |
| 여러 작업 실행 | if문 |
| 조건이 3개 이상 | if문 |
| JSX 안 짧은 표시 | 삼항연산자 가능 |
잘못 작성했을 때 나타나는 흐름
JavaScript 글은 값이 언제 만들어지고 함수가 언제 실행되는지를 순서대로 따라가면 이해가 쉬워집니다.
console.log는 단순 확인용이 아니라 현재 값의 모양과 실행 흐름을 확인하는 가장 기본적인 디버깅 도구입니다.
DOM을 다루는 코드는 HTML 요소가 먼저 준비되었는지 확인해야 하며, 선택 결과가 null인지 보는 습관이 중요합니다.
브라우저에서 직접 확인하는 순서
먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.
초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.
실습 후 점검할 항목
- 조건 결과가 값 하나인지 확인하기
- 삼항연산자가 한 줄을 넘겨 복잡해지면 if문 고려하기
- 중첩 삼항연산자 피하기
- 읽는 사람이 바로 이해할 수 있는지 확인하기
공식 문서로 더 확인하기: JavaScript 공식 문서