차밍이

[JS] 자바스크립트 AND, OR 연산의 특징 및 활용 본문

Javascript

[JS] 자바스크립트 AND, OR 연산의 특징 및 활용

2022. 10. 21. 16:00
반응형

목차

     

     

    AND 연산 ( && )

    일반적으로 알고있는 AND OR 연산자 결과

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

    자바스크립트에서도 다른 프로그램과 똑같은 연산 결과를 얻을 수 있습니다.

    하지만, 여기에 조금 특이한 JS만의 연산 방식이 있습니다.

     

    A && B 라는 연산을 진행하는데 있어서 Atrue라면 AND연산 결과는 B가 어떤 값인지에 따라 달라지게됩니다.

    Btrue면 결과는 true Bfalse면 결과도 false 입니다.

    그렇죠?

    그래서 JS에서는 만약 A부분의 첫 번째 인자가 true이면 결과로 B 값을 출력합니다.

    이해가 잘 안된다면, 차분하게 생각해보면 의미가 전달될 것입니다.

    만약 Afalse라면 B값을 볼 필요 없이 무조건 결과는 false이겠죠.

    그러므로 Afalse인 결과라면 A값을 출력합니다.

     

    OR 연산 ( || )

    OR 연산도 논리가 유사합니다.

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

    A || B 라는 연산을 진행하는데 있어서 Atrue라면 OR연산 결과는 B가 어떤 값인지에 상관없이 무조건 true값을 가지게 됩니다.

    따라서 OR 연산은 Atrue 값이면 A를 바로 출력합니다.

    반면, Afalse라면 결과는 B값에 따라 달라집니다. 따라서 Afalse이면 무조건 B값을 출력합니다. B가 결과를 결정하기 때문입니다.

     

    JS 에서의 AND, OR 연산의 특징

    그래서 그것이 어떻다는 것인지 궁금하실 것입니다.

    console.log(0 && undefiend) // 0
    console.log(null && false) // null

    0null은 논리 값이 false에 해당되는 값입니다.

    따라서 위의 AND 연산을 진행할 때, A인자의 값이 false인 것입니다.

    따라서 B값에 상관없이 결과가 바뀌지 않고 A값을 그대로 출력합니다.

    console.log('123' || NaN) // '123'
    console.log(null || false) // false

    '123'은 논리 값이 true에 해당되므로 OR연산 결과는 무조건 true에 해당됩니다.

    그래서 결과 출력은 '123'을 그대로 출력합니다.

    반면, null은 논리값이 false이므로 B 부분의 값에 따라 결과가 결정됩니다.

    따라서, B 부분의 값을 그대로 내보냅니다.

     

    JavaScript의 연산 특징 활용

    console.log("Coding" || "Study") // Coding

    위에서 설명 드린 것을 바탕으로 위의 결과가 이해가 되실 것입니다.

    이러한 현상을 활용하면

    js or 연산 활용

    위와 같은 함수를 작성할 수 있습니다.

    특정한 값을 받으면 해당 값을 출력하고 전혀 입력이 없으면 미리 정해놓은 값을 출력하게 하는 것입니다.

     

    소스코드

    function printSubject(state) {
        const msg = state || 'Python';
    
        console.log(msg)
    }
    
    printSubject() // Python
    printSubject('Javascript') // Javascript

     

    연산자 우선순위

    console.log(true || false && false); // true
    console.log((true || false) && false); // false
    
    console.log('Study' || NaN && false); // Study
    console.log(('Study' || NaN) && false); // false

    AND 와 OR 연산자 사이에서는 AND 연산자의 우선순위가 더 높다는 것을 주의해야합니다.

    ||  연산 뒤에  &&  연산을 사용할 경우 의도와는 다르게 뒤의 && 연산이 먼저 이루어져 다른 결과를 출력할 수 있습니다.

     

     

     

    이처럼 JavaScript는 다른 언어와 다르게 유연한 코딩이 가능하고 특이한 사항들이 많으니,

    이러한 디테일한 부분들을 잘 알아놓으면 유용하게 활용할 수도 있고 의도치 않은 에러를 발생시키지 않을 수 있을 것 같네요.

    반응형

    관련된 글 보기

    Comments