📖 비교 연산자

자바스크립트 기본 수학 연산을 공부하면서 자료형을 대상으로 어떻게 비교를 하고 그에 따라 생기는 현상을 포함, 예방하는 방법에 대해 알아보자! 😆

• 보다 크다, 작다 : a > b, a < b
• 보다 크거나 작거나 같다 : a >= b, a <= b
• 같다(동등) : a == b 👉 두 개 연달 오는 것에 유의, a = b와 같이 등호가 하나일 때는 '할당'을 의미한다.
• 같지 않음(부등) : a != b 👉 할당 연산자 = 앞에 !를 붙여서 표시
• 정확하게 같다 : a === b 👉 같은 수를 표현하더라고 데이터 형이 같은 경우에만 같다고 판단한다.

👉 불린형 데이터 형식

• true : '긍정', '참', '사실'을 의미
• false : '부정', '거짓', '사실이 아님'을 의미

alert(2>1);  //true

alert(2==1);  //false

alert(2!=1);  //true

alert(2=>3);  //false

변환된 불린 값은 변수에 할당 할 수 있다.

let result = 3 > 4;  //비교 결과를 변수에 할당

alert(result);  //false

👉 문자열 비교

유니코드 순으로 문자열을 비교한다. 유니코드 뒤 쪽의 문자열은 앞 쪽의 문자열 보다 크다. (사전과 유사하지만 유니코드에서는 대문자보다 소문자가 크다 ex : A < a )

1. 첫 글자를 비교한다.

alert('z'>'a');  //true : z가 a 보다 더 뒤 쪽의 문자열이여서 참으로 나옴

2. 첫 글자가 같으면 두 번째 글자를 같은 방식으로 비교한다.

alert('love'>'lose');  //true : v가 s 보다 더 뒤 쪽의 문자열이여서 참으로 나옴

3. 문자열의 길이가 다르면 길이가 긴 문자열이 크다.

alert('bye'>'by');  //true : bye의 문자열이 더 길어서 참으로 나옴

👉 다른 형을 가진 값의 비교

자바스크립트 성질은 비교하려는 값의 자료형이 다르면 이 값을 숫자형으로 바꾼다.

alert('2'>1);  //true : 문자열 '2'가 숫자 2로 변환 된 후 비교가 진행 된다.

alert('02'>3);  //false : 문자열 '02'가 숫자 2로 변환 된 후 비교가 진행 된다.

불린 값의 경우 true는 1, false는 0으로 바뀌고 비교한다.

alert(true == 1);  //true

alert(false == 0);  //true

👉 일치 연산자

동등 연산자 == 는 '', 0, false를 구별하지 못한다. 왜냐하면 피연산자를 비교할 때 피연산자를 숫자형으로 바꿔 빈 문자열, false는 숫자형으로 변환되기 때문이다.

alert(0 == false);  //true

alert('' == fasle);  //true

일차 연산자 ===를 사용하면 형 변환 없이 값을 비교 할 수 있다. 자료형의 동응 여부까지 검사하기 때문에 a와 b가 형이 다르면 즉시 false를 반환한다.

alert(0 === false);  //false : 피연산자의 형이 달라서 거짓으로 나옴

👉 null, undefined 비교

일치 연산자 ===를 사용하여 null과 undefined 비교하면 두 값의 자료형이 다르기 때문에 거짓이 나옴

alert(null === undefined);  //false

동등 연산자 ==를 사용하여 null과 undefined 비교하면 규칙이 적용되어 true가 반환된다. 동등 연산자는 null과 undefined를 특별 취급을 해주며 두 값은 서로 잘 어울리지만 다른 값들과는 어울리지 못한다.

alert(null == undefined);  //true

산술 연산자나 기타 비교 연산자 >,<,>=,<=를 사용하여 null과 undefined 비교하면 null과 undefined 은 숫자형으로 바뀌고 null은 0, undefined은 NaN으로 바뀐다.

Null vs 0

alert(null > 0);  /false

alert(null == 0);  //false

alert(null >= 0);  //true

3번째에서 null은 0보다 크거나 같다고 했기 때문에, 1,2 번째 중 하나는 참이어야 하는데 거짓이 나왔다. 이유는 동등 연산자 == 와 기타 연산자 >, <, >=, <=의 동작 방식이 다르기 때문이다.

• 1은 거짓이 3은 참이 나오는 이유는 기타 비교 연산자의 동작 원리에 따라 null이 숫자형으로 변환되어 0이 되기 때문이다.
• 2가 거짓이 나오는 이유는 동등 연산자 '=='는 피연산자가 null, undefined일 때 형을 변환하지 않는다. undefined와 null을 비교하는 경우에만 true가 나오고 그 이외 경우는 무조건 false를 반환한다.이유 때문에 2는 거짓이 나온다.

undefined와 비교

undefined를 다른 값과 비교해서는 안된다.

alert(undefined > 0);  /false

alert(undefined == 0);  //false

alert(undefined < 0);  //false

• 1과 2에선 undefined가 NaN(숫자형으로의 변환)으로 변환되는데, NaN이 피연산자인 경우 비교 연산자는 항상 false를 반환한다.
• undefined는 null이나 undefined와 같고, 그 이외의 값과는 같지 않기 때문에 3은 false를 반환한다.

👉 형 변환

문자형으로 변환

무언가 출력할 때 주로 일어난다. String(Value)을 사용하면 문자형으로 변환이 가능하다. 자료형을 문자형으로 변환할 땐, 대부분 그 결과를 예상할 수 있다.

숫자형으로 변환

수학 연산시 주로 일어난다. Number(Value)로도 형 변환이 가능하다.

전달받은 값	형 변환 후
undefined	NaN
null	0
true / false	1 / 0
string	전달받은 문자열을 "그대로" 읽고, 처음과 끝의 공백을 무시합니다. 문자열이 비어있다면 0 이 되고, 오류 발생 시 NaN이 됩니다.

문자형으로 변환

논리 연산 시 발생한다. Boolean(Value)으로 변환 가능하다.

전달받은 값	형 변환 후
0, null, undefined, NaN, ""	false
그 외의 값	true

❗️마치며 ❗️

비교 연산자 부분은 이해가 쉽게 되어서 좋다. 조건문 들어가기 앞서 배웠던 부분은 정확히 이해하고 들어가려한다. 복잡한 부분 이해하는데 방해 되지 않기 위해서 n번 더 읽어보고 연습해보아야겠다. 😅