[멋쟁이 사자처럼 프론트엔드 스쿨] 27일차 TIL - 비교, if문, 논리 연산자

🍴 비교 연산자

불린형 반환

: true 반환-참, false 반환-거짓

• 반환된 불린값은 변수에 할당 가능
• falsy 값 - 0, 빈 문자열"", null, undefined, NaN
• 이 외의 값은 불린형으로 변환 시 true가 되므로 truthy 값

문자열 비교

: 사전 편집(lexicographical) 순으로 문자열 비교

• 대소문자 따짐
• 정확하게는 사전 순이 아니라 유니코드 순임 ex) a > A

다른 형을 가진 값 간의 비교

: 비교하려는 값의 자료형이 다를 때 숫자형으로 바꿈

console.log('2' > 1); // true
console.log('01' == 1); // true

/* 이상한 상황 */
let a = 0;
console.log( Boolean(a) ); // false

let b = "0";
console.log( Boolean(b) ); // true

console.log(a == b); // true!

• 동등 비교 연산자는 "0"(문자열)을 0(숫자)으로 변환시켜서 둘 다 숫자로 인식하기 때문에 true값이 출력됨

🍴 일치 연산자(strict equality operator)

• 동등 연산자 ==은 0과 false를 구별하지 못함
• 동등 연산자는 형이 다른 피연산자를 비교할 때 피연산자를 숫자형으로 바꾸기 때문에 발생

console.log( 0 == false ); // true

• 일치 연산자는 엄격한 동등 연산자
• 자료형의 동등 여부까지 검사

console.log( 0 === false ); // false

🍴 null과 undefined 비교하기

• null이나 undefined를 다른 값과 비교할 땐 예상치 못한 결과 발생할 수 있음

console.log( null === undefined ); // false
console.log( null == undefined ); // true 각별한 커플...

🍴 null과 0

console.log( null > 0 );  // false: null이 0이 됨
console.log( null == 0 ); // false: '=='은 null과 undefined 끼리만 true 반환
console.log( null >= 0 ); // true: null이 숫자형으로 변환돼 0이 됨

• 동등 연산자와 비교 연산자의 동작 방식이 다르기 때문에 위와 같은 결과

🍴 if문

: 조건에 따라 다른 행동 취할 때 사용

• 괄호 안의 조건식이 true면 코드 블록 실행
• 조건이 참일 때 실행되는 구문이 한 줄이더라도 중괄호로 감싸기를 권장

let year = 2024;

if(year == 2024) { // 조건식이 true
	console.log("올해"); // 이 코드 실행됨
   } else {
   	console.log("올해 아님");
   }

else 절

: else 뒤에 이어지는 코드 블록은 조건이 거짓일 때 실행

• else if로 복수 조건 처리할 수 있음

🍴 조건부 연산자 '?'

: 조건식의 평가 결과에 따라 반환 값 결정

조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false 일 때 반환할 값

let result = score >= 70 ? 'pass' : 'fail';
// 점수가 70 이상이면 'pass' 반환, 아니면 'fail' 반환

• 조건식의 평가 결과가 불리언 값이 아닌 경우 불리언 값으로 암묵적 타입 변환됨

🍴 || (OR)

: 둘 중 하나라도 true면 true 반환. 둘 다 false면 false 반환.

• OR의 추가 기능: 첫 번째 truthy를 찾음
• 단락 평가(short circuit evaluation): truthy를 만나면 나머지 값은 건드리지 않고 평가를 멈춤

console.log(undefined || null || 0);
// 모두 falsy, 마지막 값 반환

console.log(null || 1 || 0);
// 1은 truthy이므로 1 반환

🍴 && (AND)

: 두 피연산자가 모두 참일 때만 true 반환

• 첫 번째 falsy 값을 반환
• 각 피연산자는 불린형으로 변환됨
• 변환 후 값이 false면 평가를 멈추고 해당 피연산자의 변환 전 원래 값 반환

🍴 ! (NOT)

: 피연산자를 불린형으로 변환, 변환된 값의 역을 반환

console.log(!true); // false
console.log(!!0); // false