JavaScript OR Assignment Operator

In JavaScript, there may be times when you want to assign one variable to a non-null value. The JavaScript OR assignment operator can be used to quickly assign the value of a variable to one of two options based on one value and if it is null or undefined.

The below code shows a function called 'getNotNull' which takes two parameters 'a' and 'b'. If the value of 'a' is defined and isn't null, it is returned, otherwise, the variable 'b' is returned. This doesn't prevent a null value being returned though, as if both 'a' and 'b' are null then the value of 'b' will be returned and therefore a null value will be returned.

function getNotNull(a, b){
  if(a){
    return a
  }else{
    return b;
  }
}

A ternary operator can also be used to the same effect. In the below code a ternary operator is used to set the value of the variable 'result' to either the value of 'a' if it defined and not null otherwise it will be set to the value 'b'. Again, this does not prevent a null value if both variables are null or undefined.

var result = a ? a : b;

The JavaScript OR assignment operator is represented with two pipe '|' symbols. This can be used to achieve the same effect as the above two code snippets. The value of the 'result' variable will be assigned to the value of 'a' if it is defined or not null otherwise it will be assigned to the value of 'b'.

var result = a || b;

The OR assignment operator does not need to be used with variables, it can be used with raw values too. The below code snippet shows using the OR operator to set the value of the 'result' variable uses raw values, 'null' or the number '2'. The value of the 'result' variable will be 2 as the left side of the OR assignment operator is null.

var result = null || 2;

The OR assignment operator can be used to assign the value of one variable to either one or another value based on if the first value is null or undefined. Using the OR assignment operator does not prevent the variable from being assigned a null or undefined value, if both sides of the OR assignment operator are null then the resulting value will also be null.

This post was originally published on https://acroynon.com

Comments

[stefanovualto]

You should replace "null" / "null or undefined" by "falsy".

And also have a look at the "??" operator.

Keep writing it is a good way to improve!

[Adam Roynon]

Yeah, you're correct, it is a "falsely" value that is evaluated, I didn't want to make this post too complicated, but great to mention this for the curious readers. Thanks

I am not sure what you mean by "??" operator, I have written a post on the ternary operator and I plan to write a post about the optional chaining operator ('?.') in the future.

[stefanovualto]

Here is the related documentation:

developer.mozilla.org/en-US/docs/W...

[Adam Roynon]

Thanks, it seems like a more strict version of the OR assignment operator. Perhaps I shall create a post comparing the two

[stefanovualto]

I think that you should point out the differences between falsy values (cf. developer.mozilla.org/en-US/docs/G...) and null/undefined checks (with ??). I think that will add value to your post.

[Adam Roynon]

I think I shall leave this post as it is for now and cover the falsy values and the coalescing operator in separate posts, thank you for the feedback and ideas

[stefanovualto]

Up to you, I just recommend you to be careful with the terms that you use in your post and in my opinion it is a good to support your posts with official references.

For example you function:

function getNotNull(a, b){
  if(a){

Doesn't work if you pass to it a falsy value like 0 or an empty string.

By being not precise you will assume wrong things (I have been there so many times, and it is still happening).

I would recommend the "you don't know js" by Kyle Simpson (@getify ), to expand your knowledge.

[Adam Roynon]

Thanks for all the feedback. My plan isn't to fill every post with all the detail needed, at least not right now (I don't have the time to put that much time into each post). I mainly want to encourage people to begin to learn how to code, or experiment with something they haven't used before. I don't admit to knowing everything, but I don't want to overload the reader with too much information that reduces their interest in code. Again, thank you for all the feedback, I super appreciate it and I guarantee some readers will benefit from some of the links you've posted.

[Ruben Swieringa]

You’re talking about the regular OR-operator; the OR assignment-operator doesn’t exist in Javascript (unfortunately)

let a, b;
a = null || "something"; // OR-operator only returns
b ||= "something"; // OR assignment-operator assigns if variable is falsy

[Adam Roynon]

I consider the standard or operator the one used in if statement, for boolean logic. Then the or assignment operator being used to assign values to variables (assign this value, if its falsey assign this value instead). I could be completely wrong in my phrasing, but I think it makes a nice distinction between the two use cases

[Ruben Swieringa]

You can consider a melon a nail when you hit it with a hammer, but it’s not going to make sense to anybody.

I’m afraid the long and short of it is just that the OR-assignment operator (||=) is not the OR-operator (||), sorry man.

[Adam Roynon]

Okay, thanks for the clarification

[Adam Roynon]

Okay thank you

[Adam Roynon]

Great stuff, do you think my explanation in this post is good?