[javascript] 논리연산자에 대한 이해와 응용

javascript 논리연산, 논리연산자

이번 포스트에서는 javascript 논리연산자의 작동원리를 이해하고, 이를 응용하는 방법을 알아보도록 하겠습니다.

  1. 논리연산의 작동 원리
  2. 논리연산자 응용



논리연산자의 작동 원리

java같은 경우 if () 안에는 항상 Boolean type의 값이 들어와야 했습니다. 무조건 true 아니면 false로 수행을 하는 것이죠. C나 C++은 Boolean 외에 값이 들어 가도 무관합니다.

javascript는 무엇이 오든 상관 없습니다. 함수, 숫자, 문자 이외의 모든 형태의 타입을 if () 구문 안에 사용할 수 있습니다.

if 구문이 실행 되기 위한 조건은 다음과 같습니다.

  1. false가 아닐 것
  2. null이 아닐 것
  3. undefined가 아닐 것
  4. 0이 아닐 것
  5. 빈칸("")이 아닐 것
if (0) {} else console.log('0은 false')
if (false) {} else console.log('false은 false')
if (null) {} else console.log('null은 false')
if ("") {} else console.log('빈칸은 false')
if (undefined) {} else console.log('undefined는 false')

다르게 말하자면 [false, null, undefined, 0, ''] 을 제외한 나머지는 모두 if를 통과할 수 있습니다. 즉, true 라는 것입니다. 그래서, 논리연산은 과연 어떤 식으로 작동할까요?

  • or : 하나 이상 true일 경우 true
  • and : 모두 true일 경우 true

다르게 생각을 해볼까요?

  • or : true일 경우 종료
  • and : false일 경우 종료

무슨 뜻인지 이해 하시나요? 눈치 빠른 사람들은 아! 하고 무릎을 탁!
or 연산의 경우 true가 한 개 라도 발견되면 뒤에는 검사할 필요도 없이 true입니다.
and 연산의 경우 false가 한 개 라도 발견되면 뒤에는 검사할 필요도 없이 false입니다.

var trueNum = 0, falseNum = 0
function clear () {
  trueNum = 0, falseNum = 0
  console.log('')
}
function f1 () {
  trueNum++
  console.log('f1은 true를 반환합니다.', trueNum, falseNum)
  return true
}
function f2 () {
  falseNum++
  console.log('f2는 false를 반환합니다.', trueNum, falseNum)
  return false
}

f1() && f1() && f2(), clear()
f1() && f2() && f1(), clear()
f2() && f1() && f1(), clear()

f1() || f1() || f2(), clear()
f1() || f2() || f1(), clear()
f2() || f1() || f1(), clear()
f2() || f2() || f1(), clear()

/* result
1) and 연산 1
f1은 true를 반환합니다. 1 0 => true : 다음
f1은 true를 반환합니다. 2 0 => true : 다음
f2는 false를 반환합니다. 2 1 => false : 종료

2) and 연산 2
f1은 true를 반환합니다. 1 0 => true : 다음
f2는 false를 반환합니다. 1 1 => flase : 종료

3) and 연산 3
f2는 false를 반환합니다. 0 1 => false : 종료

4) or 연산 1
f1은 true를 반환합니다. 1 0 => true : 종료

5) or 연산 2
f1은 true를 반환합니다. 1 0 => true : 종료

6)
f2는 false를 반환합니다. 0 1 => false : 다음
f1은 true를 반환합니다. 1 1 => true : 종료

7)
f2는 false를 반환합니다. 0 1 => false : 다음
f2는 false를 반환합니다. 0 2 => false : 다음
f1은 true를 반환합니다. 1 2 => true : 종료
*/

위의 코드를 통해 확인한 사실은 or의 경우 true를 반환하는 구문까지 실행하며, and의 경우 false를 반환하는 구문까지 실행합니다.

그리고 또 하나의 사실은, and 연산의 경우 false에 해당되는 구문을 만나면 어차피 false에 대한 값을 할당받습니다. 하지만 or연산은, [false, null, undefined, 0, ""]가 아닌 값을 할당받게 됩니다.

console.log(1 && 10 && false)           // result : false
console.log("test" && "1234" && null)   // result : null
console.log(-1 && -10 && 0)             // result : 0
console.log(10 && 1 && undefined)       // result : undefined
console.log(-10 && -1 && "")            // result : (빈칸)
console.log(1 && false &&  10)          // result : false
console.log("test"&&  null && "1234")   // result : null
console.log(-1 &&  0 && -10)            // result : 0
console.log(10 && undefined &&  1)      // result : undefined
console.log(-10 && "" && 0)             // result : (빈칸)
console.log(false && 1 )                // result : false
console.log(null && "test")             // result : null
console.log(0 && -1 )                   // result : 0
console.log(undefined && 10)            // result : undefined
console.log("" && -10)                  // result : (빈칸)

console.log(1 || 10 || false)           // result : 1
console.log("test" || "1234" || null)   // result : test
console.log(-1 || -10 || 0)             // result : -1
console.log(10 || 1 || undefined)       // result : 10
console.log(-10 || -1 || "")            // result : -10
console.log(1 || false ||  10)          // result : 1
console.log("test"||  null || "1234")   // result : test
console.log(-1 ||  0 || -10)            // result : -1
console.log(10 || undefined ||  1)      // result : 10
console.log(-10 || "" || 0)             // result : -10
console.log(false || 1 )                // result : 1
console.log(null || "test")             // result : test
console.log(0 || -1 )                   // result : -1
console.log(undefined || 10)            // result : 10
console.log("" || -10)                  // result : -10

and 연산의 경우, 항상 false에 해당하는 값을 반환하며
or 연산의 경우, 제일 먼저 false가 아닌 값을 발견하면, 해당 값을 반환합니다.

let v
if (v = 1 && 10 && false){}
else console.log(v) // result : false
if (v = "test" && "1234" && null){}
else console.log(v) // result : null
if (v = -1 && -10 && 0){}
else console.log(v) // result : 0
if (v = 10 && 1 && undefined){}
else console.log(v) // result : undefined
if (v = -10 && -1 && ""){}
else console.log(v) // result : [빈칸]
if (v = 1 && false && 10){}
else console.log(v) // result : false
if (v = "test"&& null && "1234"){}
else console.log(v) // result : null
if (v = -1 && 0 && -10){}
else console.log(v) // result : 0
if (v = 10 && undefined && 1){}
else console.log(v) // result : undefined
if (v = -10 && "" && 0){}
else console.log(v) // result : [빈칸]
if (v = false && 1 ){}
else console.log(v) // result : false
if (v = null && "test"){}
else console.log(v) // result : null
if (v = 0 && -1 ){}
else console.log(v) // result : 0
if (v = undefined && 10){}
else console.log(v) // result : undefined
if (v = "" && -10){}
else console.log(v) // result : [빈칸]

if (v = 1 || 10 || false)
  console.log(v) // result : 1
if (v = "test" || "1234" || null)
  console.log(v) // result : test
if (v = -1 || -10 || 0)
  console.log(v) // result : -1
if (v = 10 || 1 || undefined)
  console.log(v) // result : 10
if (v = -10 || -1 || "")
  console.log(v) // result : -10
if (v = 1 || false || 10)
  console.log(v) // result : 1
if (v = "test"|| null || "1234")
  console.log(v) // result : test
if (v = -1 || 0 || -10)
  console.log(v) // result : -1
if (v = 10 || undefined || 1)
  console.log(v) // result : 10
if (v = -10 || "" || 0)
  console.log(v) // result : -10
if (v = false || 1 )
  console.log(v) // result : 1
if (v = null || "test")
  console.log(v) // result : test
if (v = 0 || -1 )
  console.log(v) // result : -1
if (v = undefined || 10)
  console.log(v) // result : 10
if (v = "" || -10)
  console.log(v) // result : -10

논리 연산으로 계산한 값을 변수에 저장 후 콘솔에 띄워 확인해보면 더욱 확실하게 알 수 있습니다.


논리연산자 응용

and 응용 - 간단한 조건문

and 연산을 이용하여 다음과 같이 조건 문 처럼 이용할 수 있습니다.

function f1 () { console.log('실행') }
true || f1() // 실행됨
false || f1() // 실행 되지 않음

잠시 주제와 벗어난 이야기를 해보자면, console.log 의 경우 항상 undefined를 반환합니다. javascript의 함수는 return을 정의하지 않을 경우, 저절로 return undefined를 합니다.

console.log(console.log('console의 값은 ? '))
/* 결과
console의 값은 ?
undefined
*/

이러한 사실을 이용하여 다음과 같이 테스트해볼 수 있습니다.

function f1 () { return console.log('f1입니다.') }
function f2 () { return !console.log('f2입니다.') }

!f1() && f2()
console.log('----')
f1() && f2()
console.log('----')
f1() || f2()
console.log('----')
!f1() || f2()

/* result
f1입니다.
f2입니다.
----
f1입니다.
----
f1입니다.
f2입니다.
----
f1입니다.
*/

and 뿐만 아니라 or도 조건문으로 이용할 수 있습니다. 하지만, and 보다 자주 쓰이진 않습니다.

or 응용 -

or 연산은 보통 변수 할당에 많이 이용하는 편입니다.

var a = a || {}    // a가 존재하지 않으므로 {} 할당
var b = a || null  // a는 {} 이므로 {} 할당
var c = b || 10    // b는 {} 이므로 {} 할당
console.log(a, b, c) // result {} {} {}

이렇게 변수 할당에 많이 이용되는 편이며, 특히 크로스브라우징이 필요한 코드를 작성할 때 많이 사용합니다.

// indexedDB 라는 브라우저의 기능을 사용하려고 할 때 다음과 같이 할 수 있다.
var db = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB

이 외에도 굉장히 많은 사용 방법이 있지만, 이정도만 알아도 실무에 활용하는 데 유용합니다.