논리 연산자

논리 연산자

이 때까지 자바스크립트를 공부하면서 논리 연산자라는 소단위의 제목을 보면 바로 건너뛰어서 다음 공부를 진행했다

논리 연산자라는게 어느 언어에서나 똑같이 작동하기 때문에 공부할 필요가 없다고 생각했기 때문이었다

하지만 다른 사람의 코드를 보다 보니 '이게 뭐지..?'싶은 코드들이 있었는데 역시나 이 포스팅의 시발점이었다

자바스크립트의 논리 연산자

자바스크립트에서는 논리 연산자의 피연산자가 3개 이상이 되면 그 때부터 다르게 작동한다

바로 참과 거짓 찾기를 수행하는데 아래의 예시를 보자

|| 의 경우

||의 경우 참을 찾을 때까지 연산을 수행한다

const value1 = false;
const value2 = false;
const value3 = true;

console.log(value1|| value2 || value3); // true

이 경우 value3의 값인 true가 출력된다 흐름을 살펴보자

3개 이상의 피연산자가 들어올 경우 이 식은 왼쪽에 있는 피연산자 둘 부터 연산을 시작한다

value1 || value2 의 결과값은 거짓이다 그럼 이제 거짓과 value3를 연산한다 value3의 값이 참이기 때문에 참을 찾았다

그래서 value3의 값인 true를 반환하는 것

만약 연산이 끝나도록 참을 찾지 못한다면 어떻게 될까?

const value1 = false;
const value2 = false;
const value3 = false;

console.log(value1|| value2 || value3); // false

바로 연산의 제일 마지막에 있는, 즉 제일 오른쪽의 값을 그대로 뱉는다

피연산자의 타입

위에서 본 피연산자의 타입은 모두 불리언이었다 당연하다 논리 연산은 참과 거짓으로만 가능하니까

하지만 자바스크립트에서는 모든 자료형을 단락 평가의 재료로 사용할 수 있다

들어오는 피연산자들을 모두 불리언 자료형으로 바꿔서 연산을 하고 반환은 원래 값으로 반환한다

    console.log( 1 || 0 ); // 1  (1은 참, 0은 거짓)

    console.log( null || 1 ); // 1 (1은 참, null은 거짓)
    console.log( null || 0 || 1 ); // 1 (1은 참, 0과 null은 거짓)

    console.log( undefined || null || 0 ); // 0 (모두 거짓)

    console.log(''||'asdf'||false); // 'asdf' (빈 문자열과 false는 거짓이지만 중간의 'asdf'가 참)

이 예를 보면 쉽게 알 수 있다

단락 평가

우리는 이 논리 연산이 왼쪽부터 시작한다는 것을 응용해서

function short(bool){
    return bool || something();
}

function something(){
    console.log('action');
}

short(''); // 'action'

이런식으로 코드를 짤 수 있다

short에 들어오는 파라미터가 거짓일 때만 함수가 실행되는 것

&& 의 경우

&&를 살펴볼 차례이지만 딱히 새로운 부분은 없다 모든 것이 ||와 비슷한데 &&의 경우에는 거짓을 찾을 때까지 연산을 수행하고

거짓을 찾지 못한다면 마지막에 있는 피연산자를 출력한다

console.log( null && 5 ); // null
console.log( 0 && "아무거나 와도 상관없습니다." ); // 0

간단한 예시

!의 경우

!는 단락 평가 같은 것은 없지만 변수의 값을 불리언으로 바꾸는데 유용하다

console.log('asdf'); // 'asdf'
console.log(!'asdf'); // false
console.log(!!'asdf'); // true

와 같이 !를 하나 쓰면 대상의 불리언 값을 부정하고 반대의 불리언 값으로 바꾸고

하나 더 추가해서 쓰면 대상의 불리언 값을 얻을 수 있다

---

조합해서 쓴다면?

위에서 배운 3가지 논리 연산자를 조합해서 단락 평가를 진행한다면?

console.log( null || 2 && 3 || 4 );

의 수행결과는 어떻게 될까?

AND와 OR이 섞여있는 단락 평가에서는 왼쪽부터 연산을 시작하는 것이 아닌 &&부터 연산을 시작해준다

그러므로 위의 식을 바꾸면 아래와 같다

null || (2 && 3) || 4

2&&3 둘다 참이기 때문에 거짓을 찾을 수 없으므로 마지막 값인 3을 반환

null || 3 || 4

null과 3을 비교해서 3은 참이기 때문에 참을 발견했으므로 3이 또 반환되어 3이 출력된다

이번에는 NOT(!)을 넣어보자

console.log( null || !2 && 3 || 4 );

NOT(!)또한 연산 순서 따로 존재하는데 제일 빠르게 연산해준다 즉,

! -> && -> || 의 순서로 연산하는 것

null || ((!2) && 3) || 4

가 되겠다

!2는 2가 true지만 !에 의해 불리언 자료형인 false로 바뀌고

null || (false && 3) || 4

에서 false && 3은 거짓이 왼쪽에 있어 거짓을 먼저 만났기 때문에 false를 반환한다

null || false || 4

null || false = false이고

결국

false || 4 

돼서 4가 출력된다