JavaScript OR variable assignment explanation

Question

Given this snippet of JavaScript     var a  var b   null  var c   undefined  var d   4  var e    five    var f   a    b    c    d    e   alert f      4   Can someone please explain to me what this technique is called  my best guess is in the title of this question    And how why it works exactly    My understanding is that variable f will be assigned the nearest value  from left to right  of the first variable that has a value that isn t either null or undefined  but I ve not managed to find much reference material about this technique and have seen it used a lot   Also  is this technique specific to JavaScript  I know doing something similar in PHP would result in f having a true boolean value  rather than the value of d itself

User · Answer

Javacript uses short-circuit evaluation for logical operators || and &&. However, it's different to other languages in that it returns the result of the last value that halted the execution, instead of a true, or false value.

The following values are considered falsy in JavaScript.

false
null
"" (empty string)
0
Nan
undefined

Ignoring the operator precedence rules, and keeping things simple, the following examples show which value halted the evaluation, and gets returned as a result.

false || null || "" || 0 || NaN || "Hello" || undefined // "Hello"

The first 5 values upto NaN are falsy so they are all evaluated from left to right, until it meets the first truthy value - "Hello" which makes the entire expression true, so anything further up will not be evaluated, and "Hello" gets returned as a result of the expression. Similarly, in this case:

1 && [] && {} && true && "World" && null && 2010 // null

The first 5 values are all truthy and get evaluated until it meets the first falsy value (null) which makes the expression false, so 2010 isn't evaluated anymore, and null gets returned as a result of the expression.

The example you've given is making use of this property of JavaScript to perform an assignment. It can be used anywhere where you need to get the first truthy or falsy value among a set of values. This code below will assign the value "Hello" to b as it makes it easier to assign a default value, instead of doing if-else checks.

var a = false;
var b = a || "Hello";

You could call the below example an exploitation of this feature, and I believe it makes code harder to read.

var messages = 0;
var newMessagesText = "You have " + messages + " messages.";
var noNewMessagesText = "Sorry, you have no new messages.";
alert((messages && newMessagesText) || noNewMessagesText);

Inside the alert, we check if messages is falsy, and if yes, then evaluate and return noNewMessagesText, otherwise evaluate and return newMessagesText. Since it's falsy in this example, we halt at noNewMessagesText and alert "Sorry, you have no new messages.".

User · Answer

Javascript variables are not typed  so f can be assigned an integer value even though it s been assigned through boolean operators   f is assigned the nearest value that is not equivalent to false  So 0  false  null  undefined  are all passed over   alert null    undefined    false          0    4     bar       alerts  4

User · Answer

It will evaluate X and  if X is not null  the empty string  or 0  logical false   then it will assign it to z   If X is null  the empty string  or 0  logical false   then it will assign y to z   var x       var y    bob   var z   x    y  alert z     Will output  bob

User · Answer

According to the Bill Higgins  Blog post  the Javascript logical OR assignment idiom  Feb  2007   this behavior is true as of v1 2  at least   He also suggests another use for it  quoted     lightweight normalization of cross-browser differences      determine upon which element a Javascript event  e  occurred var target     w3c   e target      IE   e srcElement

User · Answer

This is made to assign a default value  in this case the value of y  if the x variable is falsy   The boolean operators in JavaScript can return an operand  and not always a boolean result as in other languages   The Logical OR operator      returns the value of its second operand  if the first one is falsy  otherwise the value of the first operand is returned   For example    foo      bar      returns  foo  false     bar      returns  bar    Falsy values are those who coerce to false when used in boolean context  and they are 0  null  undefined  an empty string  NaN and of course false

User · Answer

There isn t any magic to it  Boolean expressions like a    b    c    d are lazily evaluated  Interpeter looks for the value of a  it s undefined so it s false so it moves on  then it sees b which is null  which still gives false result so it moves on  then it sees c - same story  Finally it sees d and says  huh  it s not null  so I have my result  and it assigns it to the final variable   This trick will work in all dynamic languages that do lazy short-circuit evaluation of boolean expressions  In static languages it won t compile  type error   In languages that are eager in evaluating boolean expressions  it ll return logical value  i e  true in this case

User · Answer

Its called Short circuit operator   Short-circuit evaluation says  the second argument is executed or evaluated only if the first argument does not suffice to determine the value of the expression  when the first argument of the OR      function evaluates to true  the overall value must be true   It could also be used to set a default value for function argument    function theSameOldFoo name      name   name     Bar      console log  My best friend s name is     name     theSameOldFoo        My best friend s name is Bar theSameOldFoo  Bhaskar        My best friend s name is Bhaskar

User · Answer

This question has already received several good answers  In summary  this technique is taking advantage of a feature of how the language is compiled   That is  JavaScript  quot short-circuits quot  the evaluation of Boolean operators and will return the value associated with either the first non-false  variable value or whatever the last variable contains   See Anurag s explanation of those values that will evaluate to false  Using this technique is not good practice for several reasons  however   Code Readability   This is using Boolean operators  and if the behavior of how this compiles is not understood  then the expected result would be a Boolean value   Stability   This is using a feature of how the language is compiled that is inconsistent across multiple languages  and due to this it is something that could potentially be targeted for change in the future   Documented Features   There is an existing alternative that meets this need and is consistent across more languages   This would be the ternary operator       value 1   Value 2    Using the ternary operator does require a little more typing  but it clearly distinguishes between the Boolean expression being evaluated and the value being assigned   In addition it can be chained  so the types of default assignments being performed above could be recreated  var a  var b   null  var c   undefined  var d   4  var e    five    var f      a     a                      b     b                            c     c                                   d     d                                         e   alert f      4

User · Answer

It s setting the new variable  z  to either the value of x if it s  truthy   non-zero  a valid object array function whatever it is  or y otherwise  It s a relatively common way of providing a default value in case x doesn t exist   For example  if you have a function that takes an optional callback parameter  you could provide a default callback that doesn t do anything   function doSomething data  callback        callback   callback    function              do stuff with data     callback       callback will always exist

User · Answer

See short-circuit evaluation for the explanation  It s a common way of implementing these operators  it is not unique to JavaScript

User · Answer

It means that if x is set  the value for z will be x  otherwise if y is set then its value will be set as the z s value   it s the same as  if x    z   x  else   z   y    It s possible because logical operators in JavaScript doesn t return boolean values but the value of the last element needed to complete the operation  in an OR sentence it would be the first non-false value  in an AND sentence it would be the last one   If the operation fails  then false is returned

User · Answer

Return output first true value   If all are false return last false value   Example -    null    undefined    false    0     apple      Return apple

[javascript] JavaScript OR (||) variable assignment explanation

Examples related to javascript

Examples related to variables

Examples related to variable-assignment

Examples related to or-operator