Short-circuiting Boolean expressions
JavaScriptAll snippets in this category →
Posted on In JavaScript, && and || “short circuit”. If the result is obvious from the left value, it does not evaluate the right side at all. No matter the result, that second value wouldn’t change the outcome anyways.
It saves itself unnecessary and sometimes slow or expensive work that way.
// This function takes a long time. We don’t want to call it unnecessarily.
const someReallyComplicatedFunction = () => {
// something that returns a Boolean value
}
// The result of `true && SOMETHING` depends on the value of SOMETHING.
// JavaScript has to call the function here.
true && someReallyComplicatedFunction() // function is run
// The result of `false && SOMETHING` can never be `true`. JavaScript skips
// the right side, because that value doesn’t matter.
false && someReallyComplicatedFunction() // function is skipped
// `||` stops as soon as one value is `true`. If the first value is already
// true, it skips the right side.
true || someReallyComplicatedFunction() // function is skipped
// If the value left of `||` is `false`, we need to check the right value.
// JavaScript has to call the function here.
false || someReallyComplicatedFunction() // function is run// This function takes a long time. We don’t want to call it unnecessarily.
const someReallyComplicatedFunction = () => {
// something that returns a Boolean value
}
// The result of `true && SOMETHING` depends on the value of SOMETHING.
// JavaScript has to call the function here.
true && someReallyComplicatedFunction() // function is run
// The result of `false && SOMETHING` can never be `true`. JavaScript skips
// the right side, because that value doesn’t matter.
false && someReallyComplicatedFunction() // function is skipped
// `||` stops as soon as one value is `true`. If the first value is already
// true, it skips the right side.
true || someReallyComplicatedFunction() // function is skipped
// If the value left of `||` is `false`, we need to check the right value.
// JavaScript has to call the function here.
false || someReallyComplicatedFunction() // function is run// This function takes a long time. We don’t want to call it unnecessarily.
const someReallyComplicatedFunction = () => {
// something that returns a Boolean value
}
// The result of `true && SOMETHING` depends on the value of SOMETHING.
// JavaScript has to call the function here.
true && someReallyComplicatedFunction() // function is run
// The result of `false && SOMETHING` can never be `true`. JavaScript skips
// the right side, because that value doesn’t matter.
false && someReallyComplicatedFunction() // function is skipped
// `||` stops as soon as one value is `true`. If the first value is already
// true, it skips the right side.
true || someReallyComplicatedFunction() // function is skipped
// If the value left of `||` is `false`, we need to check the right value.
// JavaScript has to call the function here.
false || someReallyComplicatedFunction() // function is run// This function takes a long time. We don’t want to call it unnecessarily.
const someReallyComplicatedFunction = () => {
// something that returns a Boolean value
}
// The result of `true && SOMETHING` depends on the value of SOMETHING.
// JavaScript has to call the function here.
true && someReallyComplicatedFunction() // function is run
// The result of `false && SOMETHING` can never be `true`. JavaScript skips
// the right side, because that value doesn’t matter.
false && someReallyComplicatedFunction() // function is skipped
// `||` stops as soon as one value is `true`. If the first value is already
// true, it skips the right side.
true || someReallyComplicatedFunction() // function is skipped
// If the value left of `||` is `false`, we need to check the right value.
// JavaScript has to call the function here.
false || someReallyComplicatedFunction() // function is run