개요

이번 포스트에서는 JavaScript 연산자 중에서도 실무에서 가장 자주 헷갈리는 포인트인 비교 연산자(동등/일치), 문자열 비교 규칙, 삼항 연산자, 그리고 typeof/void 같은 기타 연산자를 정리한다.
마지막에는 “입력값(문자열) → 숫자 변환(Number) → 삼항 연산자”로 더 큰 값을 화면에 출력하는 미니 실습까지 연결한다.

• https://jiyean99.github.io/HTML-CSS-Javascript/10.js_operator.html
• 실습 시트 전체 : https://jiyean99.github.io/HTML-CSS-Javascript/

버튼 클릭 시 콘솔출력(개발자도구 실행)/화면 DOM 변경/alert 출력 등으로 확인 가능하다

---

비교 연산자: == vs ===

JavaScript에서 비교 연산은 크게 “동등(==)”과 “일치(===)”로 나뉜다고 생각하면 편하다.

• == (동등 비교)
  • 값이 같으면 true
  • 단, 타입이 다르면 자동 형변환이 개입할 수 있음
  • 반대는 !=
• === (일치 비교)
  • 값도 같고 타입도 같아야 true
  • 반대는 !==

실습 코드 핵심(콘솔에서 확인):

console.log(10 == 10);    // true
console.log(10 == "10");  // true (자동 형변환 가능성)
console.log(10 === 10);   // true
console.log(10 === "10"); // false (타입이 다름)

null vs undefined 비교가 위험한 이유

null과 undefined는 “없음”이라는 점에서 비슷하지만 의미가 다르다.

• undefined: 값이 할당되지 않음(예: 선언만 한 변수)
• null: “없음”을 명시적으로 넣음

실습 코드 포인트:

let v1;
let v2 = null;

console.log(v1);        // undefined
console.log(v2);        // null
console.log(v1 == v2);  // true
console.log(v1 === v2); // false

그리고 객체에서 “없는 필드”를 접근하면 undefined가 나오고, “필드는 있는데 값이 null”이면 null이 나온다.

const p1 = { name: "홍길동", email: "hong@naver.com", nickName: null };

console.log(p1.nickName); // null
console.log(p1.age);      // undefined (없는 key)

실습 코드에서 if (p1.age == null)처럼 작성한 이유는, age가 null이거나 undefined인 경우를 한 번에 처리하려는 의도가 들어간 형태다.
반대로 if (p1.age === null)은 “정말 null인 경우만” 잡는다.

---

문자열 비교 규칙

문자열끼리 비교할 때는 “사전식(lexicographical)”으로 비교된다고 이해하면 된다.
즉, "abc" < "bcd" 처럼 첫 글자부터 순서대로 비교한다.

실습 코드:

const compareStringResult = "a" > "b";
document.getElementById("result-string").innerHTML = compareStringResult;

---

삼항 연산자(조건 연산자)

삼항 연산자는 if/else를 한 줄로 표현하는 대표 문법이다.

형태:

표현식 ? 반환값1 : 반환값2

실습 코드(두 수 중 큰 값 출력):

const bigger = (a > b) ? a : b;
document.getElementById("result").innerHTML = bigger;

“입력값 비교”에서 자주 하는 실수: input.value는 문자열

HTML <input>의 value는 항상 문자열로 들어오기 때문에, 숫자 비교를 하려면 형변환이 필요하다.
그래서 실습 코드에서 Number()로 바꾼 뒤 비교한다.

const firstValue = document.getElementById("firstValue").value;
const secondValue = document.getElementById("secondValue").value;

const firstNum = Number(firstValue);
const secondNum = Number(secondValue);

document.getElementById("result-test").innerHTML =
  firstNum > secondNum ? firstNum : secondNum;

---

기타 연산자: typeof, void

typeof 연산자

typeof는 피연산자의 타입을 문자열로 반환한다.

실습 코드에서 이미 확인 가능한 포인트:

let st1 = "10";
let num1 = Number(st1);
console.log(typeof num1); // "number"

num1 = String(num1);
console.log(typeof num1); // "string"

또한 숫자로 변환할 수 없는 문자열을 Number()로 바꾸면 결과가 NaN이 될 수 있다.

let st2 = "hello";
let num2 = Number(st2);
console.log(num2); // NaN

void 연산자

void는 어떤 표현식을 넣어도 항상 undefined를 반환한다.
주로 링크(a 태그)를 “이동 목적이 아니라 버튼처럼” 쓰고 싶을 때, 기본 동작을 막는 용도로 예시가 많이 나온다.

<a href="javascript:void(0)">이 링크는 동작하지 않습니다.</a>

다만 실무에서는 보통 a 태그 대신 button을 쓰거나, a 태그라면 클릭 이벤트에서 기본 동작을 막는 패턴을 더 많이 쓴다.