자바스크립트(JavaScript) 비교 연산자 동등(==)과 일치(===) 차이점 알아보기

프로그램을 개발할 때 가장 많이 사용하는 구문이 비교연산자(Comparison operators)가 아닐까 생각합니다.

비교연산자(Comparison operators)란 두 피연산자를 서로 비교해서 “참(True)” 또는 “거짓(False)“의 논리(Boolean) 값을 반환하는 기호를 말합니다.

가장 많이 사용하는 비교 연산자로 ==, ===, !=, >=, <=, <, > 등이 있습니다.

개발 언어(JavaScript, Java, C#, C++, VB 등)마다 거의 비슷하게 동작하지만 일부 개발 언어에서는 조금 다른 동작으로 작동하는 비교 연산자도 있으니 각 개발 언어 비교 연산자 구문을 잘 이해하시기 바랍니다.

이번 글에서는 다른 개발 언어와 조금 차이가 있는 자바스크립트(JavaScript) 비교 연산자 동등(==)과 일치(===) 차이점 알아보기를 예제를 통해 설명해 보겠습니다.

JavaScript(자바스크립트) 비교 연산자

▶ 자바스크립트에서 사용하는 비교 연산자는 다음과 같습니다.

• == (동등) : 두 피연산자가 서로 같으면 true를 반환합니다.
• != (부등) : 두 피연산자가 서로 다르면 true를 반환합니다.
• === (일치) : 두 피연산자가 값과 타입이 모두 같은 경우 true를 반환합니다.
• !== (불일치) : 두 피연산자의 값 또는(or) 타입이 서로 다른 경우 true를 반환합니다.
• > (크다) : 왼쪽 피연산자가 오른쪽 피연산보다 크면 true를 반환합니다.
• >= (크거나 같음) : 왼쪽 피연산자가 오른쪽 피연산보다 크거나 같으면 true를 반환합니다.
• < (작다) : 왼쪽 피연산자가 오른쪽 피연산보다 작으면 true를 반환합니다.
• <= (작거나 같음) : 왼쪽 피연산자가 오른쪽 피연산보다 작거나 같으면 true를 반환합니다.

자바스크립트 비교 연산자 동등(==)과 일치(===) 차이점

▶ 자바스크립트의 비교 연산자 중에 헷갈리기 쉬운 동등(==)과 일치(===)에 대해 구체적으로 차이점을 알아보겠습니다.

1. 동등(==) 비교 연산자

• 비교 연산자 중에 이중 등호(==)를 사용하는 동등은 ‘Loose equality(느슨한 동등)‘이라고 표현할 수 있습니다.
• ‘Loose equality(느슨한 동등)‘은 두 피연산자를 같은 타입으로 변환한 후에 서로 비교합니다.
• 따라서 두 피연산자의 타입(String, Number 등)에 영향을 받지 않습니다.

2. 일치(===) 비교 연산자

• 비교 연산자 중에 삼중 등호(===)를 사용하는 일치는 ‘Strict equality(엄격한 동등)‘이라고 표현할 수 있습니다.
• ‘Strict equality(엄격한 동등)‘은 두 피연산자의 값 뿐만 아니라 타입까지 모두 일치하는지 비교합니다.
• 따라서 두 피연산자의 타입(String, Number 등)이 중요한 비교 대상이 됩니다.

자바스크립트 비교 연산자 동등(==)과 일치(===) 차이점 예제 비교

▶ 비교 연산자 동등(==)과 일치(===)의 차이점을 실제 예제를 통해 알아보겠습니다.

• 사용된 변수 : const num = 0;
  const str = “0”;
  const obj = new String(“0”);

• “0” == 0 : true
• num == 0 : true
• num == str : true
• num == obj : true
• str == 0 : true
• 0 == false : true
• “” == false : true
• “” == 0 : true
• null == undefined : true

• “0” === 0 : false
• num === 0 : true
• num === str : false
• num === obj : false
• str === 0 : false
• str === obj : false
• 0 === false : false
• “” === false : false
• “” === 0 : false
• null === undefined : false
• obj === null : false

마무리

개인적으로 자바스크립트에서 동등(같음) 비교 연산자는 명확한 비교를 위해 삼중 등호(===)를 사용하는 것을 권합니다.

앞 단락의 예제를 통해서도 알 수 있듯이 이중 등호(==)의 느슨한 동등 비교는 원치 않는 논리 값이 반환 될 수 있습니다.
JavaScript 프로그램을 개발할 때 꼭 참고하시기 바랍니다.

이 글이 도움이 되었기를 바랍니다. ^-^