[JavaScript] 단축평가(&&, ||) 원리와 다양한 예제들

천지윤·2024년 3월 9일

JavaScript

기술

목록 보기

6/6

&&이면 반환되는게 앞이었나 뒤였나?? 아 뭐였지. ||이랑 헷갈려.

단축평가 원리를 내 나름대로 이해해보자.
단축평가의 핵심은 '뒤의 값을 볼 필요가 없다!' 이였다

단축평가란?

|| 와 &&

원래 논리 연산자는 'and'와 'or'논리에 따라서 true와 false 불리언으로 '평가'해주는 연산자라고 알고 있었다. 그런데 식의 결과를 '반환'하는 것이었다.
console.log(true && false); // false
console.log((a = true && false)); // false

mdn
(&& mdn문서에서 발췌)

&&와 ||를 계산할 때, 둘 다보지 않고 앞에만 본 뒤 단축해서 계산하는데...

&&

앞에가 true일때

before && after은 기본적으로 before 와 after 모두 true이어야 true다. 하나라도 false면 false다.

여기서 효율적으로 계산하기 위해서는 앞쪽에 있는 before가 false인 순간, 뒤에는 볼 필요도 없이 false를 내뿜으면 된다. 이렇게 단축해서 평가한다.

console.log(true && "after"); // dog

위 예시를 보자. 앞이가 true이므로 뒤에는 보지 않고 그냥 after를 반환하는 것이다. after가 true면 true일테고, false면 false가 될테니. ~~내 알 바가 아니라는 것~~
true인지 false인지 평가하지도 않고 그냥 뒤의 값을 바로 반환한다.

그렇다면 앞 false라면 어떻게 될까?

console.log(false && "after"); // false

&&연산자이기 때문에 false가 나온순간 뒤에는 볼 필요도 없이 false가 되었다. 그러면 그냥 앞에 있는 값을 반환해버린다.

console.log(0 && "after"); // 0

만약 위와 같은 코드라면 어떻게 될까?
false로 평가된다. (참고로 0 은 falsy값이다) false로 평가된 순간 뒤에를 볼 필요도 없이 0 을 반환하면 false가 될 것이다.

이때 false를 반환하는 것이 아닌 0을 반환한다. 이 반환값의 boolean이 필요하면 조건문에서 알아서 boolean값으로 평가할테니, 나는 0만 반환하면 된다.

||

앞이 true일때

console.log(true || "after"); // true

|| 는 && 와 반대다.
true인 순간, 뒤에를 볼 필요도 없이 true다. 그러니 앞의 값을 반환한다.

console.log(1 || "after"); // 1

이럴 때에도 마찬가지이다. (1을 불리언으로 평가하면 true다)
1이 true이므로 뒤에를 보지않아도 true임을 알 수 있다.
그리므로 1을 반환한다. (~~이를 불리언으로 바꾸는건 니네가 알아서 해라~~)

앞이 false일때

console.log(false || "after");

앞이 false라면 뒤에를 봐야 true인지 false인지 알 수 있다. 이때, 뒤에가 true인지 false인지 평가하지도 않고 그냥 'after'를 내뱉어버린다. 'after'가 true면 true가 될 것이고 false면 false가 될 것이다.

아래도 마찬가지로 0이 반환된다.

console.log(false || 0);

다양한 예제들

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

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

console.log(true && "after"); // after
console.log(false && "after"); // false
console.log("before" && true); // true
console.log("before" && false); // false
console.log("before" && "after"); // after

console.log(true || "after"); // true
console.log(false || "after"); // after
console.log("before" || true); // before
console.log("before" || false); // before
console.log("before" || "after"); // before