Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript 비교 연산자와 동등 연산자 완벽 가이드

연산자는 누구나 초등학교 시절 산수를 배우며 처음 접했던 익숙한 개념입니다. 두 피연산자 사이에 놓인 기호가 바로 연산자죠. 웹 개발에서는 이러한 연산자를 활용해 두 값을 비교하고, 표현식이 참(true)인지 거짓(false)인지 판단합니다. 이 글에서는 자바스크립트에서 가장 자주 마주하게 되는 두 가지 연산자, 바로 비교(관계) 연산자와 동등 연산자에 대해 자세히 알아보겠습니다.

비교 연산자(Comparison Operators)

문제를 해결하기 위한 로직을 작성하다 보면, 조건에 따라 화면에 무언가를 렌더링해야 할 때 비교 연산자나 관계 연산자를 사용해야 하는 순간이 반드시 찾아옵니다. 실무 코드에서 가장 흔하게 볼 수 있는 연산자들을 하나씩 살펴보겠습니다. 먼저 앞으로 사용할 객체부터 확인해 보세요.

in 연산자

in 연산자는 객체 안에 특정 프로퍼티가 존재하는지 확인할 때 사용합니다.

const cityData = {
     city: "San Jose",
     state: "California",
     area: 181.36,
     land: 178.24,
     water: 3.12,
     urban: 342.27,
     metro: 2694.61,
     elevation: 82,
     population: 1021795,
     timezone: "Los_Angeles/Pacific",
     website: "www.sanjoseca.gov"
}
console.log("metro" in cityData); // true
console.log("country" in cityData); // false

instanceof 연산자

instanceof 연산자는 어떤 객체가 특정 클래스나 생성자 함수의 인스턴스인지 확인할 때 사용합니다.

function Class(subject, teacher, numStudents) {
     this.subject = subject;
     this.teacher = teacher;
     this.numStudents = numStudents;
}
const classroom = new Class('Academic Geometry', 'Jane Doe', 24);

console.log(classroom instanceof Class);
// 출력 결과: true

console.log(classroom instanceof Object);
// 출력 결과: true

작다(<), 작거나 같다(<=)

피연산자 A가 피연산자 B보다 작을 때 조건문에서 true를 반환하는 비교 연산자입니다. 가장 대표적인 활용 예는 for 반복문입니다.

for(let i = 1; i <= n; i++) {
     // 코드 작성
}
for(let i = 0; i < arr.length; i++) {
     // 코드 작성
}

크다(>), 크거나 같다(>=)

피연산자 A가 피연산자 B보다 클 때 조건문에서 true를 반환하는 비교 연산자입니다. 배열에서 최댓값을 찾을 때 자주 사용됩니다.

let maximum = -Infinity;
for(let i = 0; i < arr.length; i++) {
     if(arr[i] >= maximum) {
          maximum = arr[i];
     }
}

참고: >=는 =>와 전혀 다른 기호입니다. 후자는 ES6 문법에서 화살표 함수(arrow function)를 정의할 때 사용됩니다.

동등 연산자(Equality Operators)

비교 연산자와 마찬가지로, 동등 연산자 역시 표현식이 참인지 거짓인지를 나타내는 불리언(Boolean) 값으로 평가됩니다.

동등(==) vs 일치(===)

자바스크립트에서 등호(=)를 볼 때 한 가지 주의할 점이 있습니다. 등호 하나는 할당 연산자로, 수학 시간에 배웠던 '같음'의 의미가 아니라는 것입니다.

등호 두 개(==)는 동등 연산자입니다. 두 값을 서로의 데이터 타입으로 변환한 뒤 값이 같은지만 확인하는데, 이 과정을 타입 강제 변환(type coercion)이라고 부릅니다.

console.log(8 == '8'); // true

마찬가지로 느낌표와 등호 하나를 함께 사용한(!=) 부등 연산자는 두 값이 서로 다른지 비교합니다. 단, 타입은 확인하지 않습니다.

console.log(8 != '4'); // true

반면 등호 세 개(===)로 이루어진 일치(identity) 연산자는 값을 비교할 때 숫자뿐만 아니라 타입까지 함께 검사합니다.

console.log(8 === '8'); // false
console.log(8 === 8); // true

부등 연산자와 마찬가지로, 불일치(!==) 연산자도 피연산자가 서로 다른지 확인합니다. 여기에 더해 타입까지 검사하며, 값과 타입이 모두 다르면 true를, 그렇지 않으면 false를 반환합니다.

console.log(8 !== '8'); // true
console.log(8 !== 8); // false

마무리

비교 연산자와 동등 연산자는 프로그래밍에서 로직을 구성하는 데 없어서는 안 될 필수 요소입니다. 왼쪽 피연산자와 오른쪽 피연산자를 비교할 때, 동등 연산자를 활용하면 값이 타입만 같은지, 값만 같은지, 아니면 타입과 값이 모두 같은지(또는 모두 다른지) 정확히 판별할 수 있습니다. 또한 비교 연산자는 사용자 인터페이스(UI)를 렌더링하는 조건 로직을 작성할 때 큰 도움이 됩니다. 이 연산자들에 충분히 익숙해졌다면 논리 연산자, 삼항 연산자, 그리고 비트 연산자도 이어서 학습해 보세요!

자바스크립트 학습을 더 원한다면?

아래 글들도 함께 확인해 보세요!

  • JavaScript 삼항 연산자: 단계별 완전 가이드
  • JavaScript switch-case 문: 단계별 완전 가이드
  • JavaScript 기본 문법: 초보자를 위한 가이드