JS - Condition

이바덕·2024년 1월 25일

JavaScript condition nullish optional chaining switch문 논리연산자 멋쟁이사자처럼

Javascript 이론

목록 보기

4/12

📌논리연산자란?

자바스크립트의 논리연산자는 불린 값 간의 연산을 수행하는 데 사용됩니다.

🔎 OR (||)
🔎 AND (&&)
🔎 NOT (!)

📝OR (||)

인수 중 '하나'라도 true이면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

사용예시:


a = a || b;
a ||= b;
// logical or addignment 논리합 할당 연산자


if (1 || 0) { // if( true || false ) 와 동일하게 동작합니다.
  alert( 'truthy!' );
}

OR (||) 의 특징

각 피연산자를 불린형으로 변환합니다. 변환 후 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환합니다.
피연산자 모두를 평가한 경우(모든 피연산자가 'false'로 평가되는 경우)엔 마지막 피연산자를 반환합니다.
연산자를 여러 개 체이닝(chaining) 하면 첫 번째 'Truthy'를 반환합니다.

📝AND (&&)

두 피연산자가 '모두'가 참일 때 true를 반환합니다. 그 외의 경우는 false를 반환하죠.

사용예시:


a = a && b;
a &&= b;
// logical or addignment 논리합 할당 연산자


if (1 && 0) { // 피연산자가 숫자형이지만 논리형으로 바뀌어 true && false가 됩니다.
  alert( "if 문 안에 falsy가 들어가 있으므로 alert창은 실행되지 않습니다." );
}

AND (&&) 의 특징

각 피연산자는 불린형으로 변환됩니다. 변환 후 값이 false이면 평가를 멈추고 해당 피연산자의 변환 전 원래 값을 반환합니다.
피연산자 모두가 평가되는 경우(모든 피연산자가 'true'로 평가되는 경우)엔 마지막 피연산자가 반환됩니다.
연산자를 여러 개 체이닝(chaining) 하면 첫 번째 'Falsy'를 반환합니다.

❗❗ '[]' '{}' 객체나 배열은 빈 틀만 만들어줘도 이미 생성이 되어있다고 판단되어 true라는 값을 반환

📝NOT (!)

단항 연산자로, 불리언 값을 반대로 뒤집는 역할을 합니다.

🧐 NOT 연산자의 우선순위는 모든 논리 연산자 중에서 가장 높기 때문에 항상 &&나 || 보다 먼저 실행됩니다.

사용예시:

alert( !true ); // false
alert( !0 ); // true

❗❗ 만약 NOT을 연달아 사용하면 특정 값을 '불린형'으로 변환할 수 있습니다.

사용예시

let value = "Hello";

// 불리언 값으로 변환하기
let booleanValue = !!value;

console.log(booleanValue);  // 결과: true

위에 예시를 설명하자면
1. 첫 번째 NOT 연산자는 피연산자로 받은 값을 불린형으로 변환한 후 이 값의 역을 반환합니다.
2. 두 번째 NOT 연산자는 첫 번째 NOT 연산자가 반환한 값의 역을 반환합니다.

📌switch문이란?

프로그램에서 다수의 조건 중 하나를 선택하여 해당하는 블록을 실행하는 제어문입니다.

사용예시:


switch (변수) {
 case 값1:
   // 값1과 일치하는 경우 실행되는 코드
   break;
 case 값2:
   // 값2와 일치하는 경우 실행되는 코드
   break;
 // 추가적인 case문들
 default:
   // 어떠한 case에도 일치하지 않을 때 실행되는 코드
}

Case 값: 일치하는 경우 실행될 코드 블록을 정의합니다.
Break: break 문은 switch 문에서 빠져나가게 하며, 이후의 다른 case나 default 블록을 실행하지 않습니다.
Default: 어떠한 case에도 일치하지 않을 때 실행될 코드 블록을 정의합니다. default는 선택사항이며, 생략할 수 있습니다.

switch문의 case는 같이 묶어서 사용가능합니다.

switch (a) {
  case 1:
    alert('계산이 맞습니다!');
    break;

  case 2: // (*) 두 case문을 묶음
  case 3:
    alert('계산이 틀립니다!');
    alert("수학 수업을 다시 들어보는걸 권유 드립니다.");
    break;

  default:
    alert('계산 결과가 이상하네요.');
}

❗❗ switch문은 일치 비교로 조건을 확인합니다. 비교하려는 값과 case문의 값의 형과 값이 같아야 해당 case문이 실행됩니다.

그렇기 때문에 자료형이 같은지 꼭 확인하기.✅✅

📌nullish 병합 연산자란?

nullish병합 연산자(nullish coalescing operator) '??'를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 ‘확정되어있는’ 변수를 찾을 수 있습니다.

사용예시

a ?? b

x = (a !== null && a !== undefined) ? a : b; //nullish연산자가 없으면 이처럼 작성해야함

위에 코드를 해석해보면 아래와 같다.

a가 null도 아니고 undefined도 아니면 a
그 외의 경우는 b

📝'??'와 '||'의 차이

||는 첫 번째 truthy 값을 반환합니다.
??는 첫 번째 정의된(defined) 값을 반환합니다.

사용예시

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

❗❗ 안정성 관련 이슈 때문에 ??는 &&나 ||와 함께 사용하지 못합니다. 그렇기때문에 같이 사용시 '괄호()'를 꼭 같이 사용해주기

📌'?.' 옵셔널체이닝(optional chaining)이란?

프로퍼티나 메서드를 호출하는 과정에서 해당 프로퍼티나 메서드가 null이나 undefined인지 판단하고 해당된다면 'undefined'값을 반환함.

사용예시

const test = {
	a: 'Hello',
	b: {
		c: 'World!'
	}
}

const testOptional = test.d?.c;
// 이와 같이 존재하지 않는 프로퍼티를 참조하려고 하는 경우 undefined를 반환합니다.

test.randomFunction?.();
// 또는 이와 같이 존재하지 않는 메서드를 호출하려 하는 경우에도 undefined를 반환합니다.