[Javascript] 단축평가 논리 계산법

단축평가논리(short-circuit evaluation)는 논리 연산을 수행할 때, 피연산자들을 왼쪽에서 오른쪽으로 순차적으로 평가하다가 전체 결과가 결정되는 시점에서 더 이상 평가하지 않고 결과를 반환하는 방법입니다.

이 방법은 피연산자가 많은 복잡한 논리식을 다룰 때, 연산 속도를 향상시키는 효과가 있습니다.

 

true && true // true
true && false // false
true || false // true
false || true // true

 

연산자를 배울때 이런 표를 많이 봐왔을텐데,

이걸 코드에 적용시키면 훨씬 코드를 단축시킬 수 있습니다.

 

논리 연산자를 사용할 때 무조건 true 혹은 false를 사용해야 되는 것은 아니며,

해당 값이 Truthy 하냐 Falsy 하냐에 따라 결과가 달라질 수 있습니다.

 

 

 

 

---

예시

let x = 5;
let y = 12;

if (x > 0 && y < 10) {
  console.log("Both conditions are true");
}

if (x == 0 || y == 10) {
  console.log("At least one condition is true");
}
Uncaught TypeError: Cannot read properties of undefined (reading 'name')

 

 

위 코드에서 첫 번째 논리식에서는, 만약 x > 0이 거짓이라면 y < 10은 평가되지 않습니다.

두 번째 논리식에서는, 만약 x == 0이 참이라면 y == 10은 평가되지 않습니다.

또한, 단축평가논리는 함수 호출에서도 사용될 수 있습니다.

다음과 같은 예시를 살펴봅시다.

 

function validateUser(username, password) {
  if (username && password) {
    // 유효한 사용자 정보
    return true;
  } else {
    // 누락된 사용자 정보
    return false;
  }
}

위 함수에서 username과 password가 모두 존재할 경우, 즉 null이나 undefined가 아니라면, true를 반환합니다.

만약 둘 중 하나라도 누락되어 있을 경우, 즉 null이나 undefined가 하나라도 존재할 경우, false를 반환합니다.

이때 && 연산자가 단축평가논리를 사용하고 있습니다.

username이 null이나 undefined일 경우, password는 평가하지 않고 false를 반환합니다.

반대로, username이 null이나 undefined가 아닐 경우에만 password를 평가하게 됩니다.

 

 

 

 

 

&& 예시

console.log(true && 'hello'); // hello
console.log(false && 'hello'); // false
console.log('hello' && 'bye'); // bye
console.log(null && 'hello'); // null
console.log(undefined && 'hello'); // undefined
console.log('' && 'hello'); // ''
console.log(0 && 'hello'); // 0
console.log(1 && 'hello'); // hello
console.log(1 && 1); // 1

 

 

|| 예시

 

console.log(false || 'hello') // 'hello'
console.log('' || 'hello') // 'hello'

console.log('트루' || 'hello') // '트루'
console.log(1 || 'hello') // 1

console.log('hello1' || false) // 'hello1'
console.log('hello2' || NaN) // 'hello2'

console.log(null && false) // false
console.log(undefined || null) // null

 

 

이러한 속성을 잘 알아두면, 특정 값이 유효할때에만 어떤 값을 조회하는 작업을 해야 할 때 매우 유용합니다.

 

 

 

 

---

 

쉽게 이해하는법

 

 

&& 연산자는 Falsy 값을 우선, Truthy 값을 나중에 찾는다.

• && 연산자는 Falsy 값을 우선, Truthy 값을 나중에 찾는다.
• #### && 연산자는 Falsy 를 좋아한다.

const name = 먼저값 && 나중값

• Truthy 한 값과 Falsy 한 값이 같이 있다면 무조건 Falsy 값을 찾아 리턴한다.
• 둘 다 Falsy 한 값이라면 Falsy 를 우선 으로 찾기 때문에 먼저있는 Falsy 값을 리턴한다.
• 둘 다 Truthy 한 값이라면 Truthy 를 나중 으로 찾기 때문에 나중에 있는 Truthy 값을 리턴한다.
• || 연산자는 Truthy 값을 우선, Falsy 값을 나중에 찾는다.

 

|| 연산자는 Truthy 를 좋아한다.

const name = 먼저값 || 나중값

• Truthy 한 값과 Falsy 한 값이 같이 있다면 무조건 Truthy 값을 찾아 리턴한다.
• 둘 다 Truthy 한 값이라면 Truthy 를 우선 으로 찾기 때문에 먼저 있는 Truthy 값을 리턴한다.
• 둘 다 Falsy 한 값이라면 Falsy 를 나중 으로 찾기 때문에 나중에 있는 Falsy 값을 리턴한다.