[javascript]자바스크립트 논리 연산자

rondido·2022년 8월 29일
0

Javascript

목록 보기
6/21
post-thumbnail

논리 연산자

  • 자바스크립트엔 세 종류의 논리 연산 ||(or), &&(and), !(not) 연산이 존재

||(or)

  • 값을 비교 시 인수 중 하나라도 true 일시 true를 반환, 그렇지 안하면 false 반환

console.log( true || true); //true
console.log( true || false); // true
console.log( false || false); //false
console.log( false || true); //true

첫 번째 truthy를 찾는 OR 연산자 ‘||’


result = value1 || value2 || value3;

  • 이때 or || 연산자는 다음 순서에 따라 연산을 수행
    • 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가
    • 각 피연산자를 불린형으로 변환 변환 후 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환
    • 피연자 모두를 평가한 경우(모든 피연산자가 false로 평가되는 경우)엔 마지가 피연산자를 반환
  • 여기서 핵심은 반환 값이 형 변환을 하지 않는 원래 값
    • 여러 개 체이닝 하면 첫번째 truthy가 존재하지 않으면 마지막 피연산자를 반환

console.log( 1 || 0 ); // 1 (1은 truthy임)

console.log( null || 1 ); // 1 (1은 truthy임)
console.log( null || 0 || 1 ); // 1 (1은 truthy임)

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

  • 이런 OR의 추가 기능을 이용하면 여러 용도로 OR 연산자를 활용 가능

    • 변수 또는 표현식으로 구성된 목록에서 truthy 얻기
let firstName = "";
let lastName = "";
let nickName = "바이올렛";

alert( firstName || lastName || nickName || "익명"); // 바이올렛
  • 모든 변수가 falsy이면 "익명"을 반환

  • 단락 평가
    • 위에서 설명해 드린 바와 같이 OR | | 은 왼쪽부터 시작해서 오른쪽으로 평가를 진행하는데, truthy를 만나면 나머지 값들은 건드리지 않은 채 평가를 멈춥니다. 이런 프로세스를 '단락 평가’라고 합니다.

true || console.log("not printed");
false || console.log("printed");
  • 첫번쨰 연산자는 true를 만나자마자 평가를 멈추기 때문에 console.log가 실행되지 않는다.

&&(and)

  • 두 개의 앰퍼샌드를 연달아 쓰면 AND 연산자 &&를 만들 수 있습니다.

console.log( true && true );   // true
console.log( false && true );  // false
console.log( true && false );  // false
console.log( false && false ); // false

첫 번째 falsy를 찾는 AND 연산자 ‘&&’

result = value1 && value2 && value3;

  • 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가

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

  • 피 연산자 모두가 평가되는 경우 (모든 피연산자가 true로 평가되는 경우)엔 마지막 피연산자가 반환

  • 정리해 보자면 이렇습니다. AND 연산자는 첫 번째 falsy를 반환합니다. 피연산자에 falsy가 없다면 마지막 값을 반환합니다.


console.log( 1 && 2 && null && 3 ); // null

console.log( 1 && 2 && 3 ); // 마지막 값, 3

  • 주의할 점
    • &&의 우선순위가 ||보다 높습니다
    • AND 연산자 &&의 우선순위는 OR 연산자 ||보다 높습니다.
    • 따라서 a && b || c && d는 (a && b) || (c && d)와 동일하게 동작합니다.

! (NOT)

  • 논리 연산자 NOT은 느낌표 !를 써서 만들 수 있습니다.

result = !value;

  • NOT 연산자는 인수를 하나만 받고, 다음 순서대로 연산을 수행합니다.

    • 피연산자를 불린형(true / false)으로 변환합니다.
    • 1에서 변환된 값의 역을 반환합니다.

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

  • NOT을 두 개 연달아 사용하면 값을 불린형으로 변환

console.log( !!"non-empty string" ); // true
console.log( !!null ); // false

  • 이때, 첫 번째 NOT 연산자는 피연산자로 받은 값을 불린형으로 변환한 후 이 값의 역을 반환하고, 두 번째 NOT 연산자는 첫 번째 NOT 연산자가 반환한 값의 역을 반환합니다. 이렇게 NOT을 연달아 사용하면 특정 값을 불린형으로 변환할 수 있습니다.

위 내용은 koa.javascript 사이트에서 공부한 내용 정리

profile
개발 옆차기

0개의 댓글