Difference between logical | and || in JavaScript

Hello everyone, in this article we will learn logical || and | operators. It is not language dependent. it is just logic and optimization.  | and || both are called logical OR operator. Difference between them is in the way they are executed. The syntax for || and | is same.

Syntax:

Exp1 || Exp2 || Exp3 || ... ExpN

Exp1 | Exp2 | Exp3 | ... ExpN

Here Exp is Logical expression which returns either true or false.

Example:

A || B Results False || False => True False || True => True True || False => True True || True => False

It means if all expression returns true then end result will be true other wise false.

So what makes || and | different.

In case of || if first expression return false then it will execute next statement otherwise it will returns true. i.e. no more expressions will be further executed.

while in case of | all expression must be executed one by one.

let take an example to clear it more.

Validate and given number for empty or numeric only.

Create three methods IsEmpty returns true if given number is empty otherwise false.

IsNumber returns true if given number is of numeric type otherwise false.

IsEmptyOrNumber returns true if given number is either empty or numeric type.

const nl = '<br />'; var IsEmpty = function(a){ document.write('IsNotEmpty invoked! returns '+(a=='') + nl); return (a=='') } var IsNumber = function(a){ document.write('IsNumber invoked! returns '+!isNaN(a) + nl); return !isNaN(a); } var IsEmptyOrNumber = function(n){ if(IsEmpty(n) || IsNumber(n))  document.write(n+' is Valid Number'+nl); else document.write(n+' is InValid Number'+nl); } var n1 = ''; var n2 = '34'; var n3 = 'A34'; document.write('------------------------------------'+nl); document.write('Validate Number: '+n1+nl); IsEmptyOrNumber(n1); document.write('------------------------------------'+nl); document.write('Validate Number: '+n2+nl); IsEmptyOrNumber(n2); document.write('------------------------------------'+nl); document.write('Validate Number: '+n3+nl); IsEmptyOrNumber(n3);

Explanation:

When IsValid(n1); invoked IsEmpty() returns true and hence due to || logical OR operator, no more logical operation performed. only one method is invoked and will returns final result true.

for IsValid(n2); IsEmpty() returns false and next operation i.e. IsNumber() invoked which returns true. as shown in below result.

for IsValid(n3); IsEmpty() returns false and next operation i.e. IsNumber() invoked which returns false. as shown in below result.

OUTPUT: ------------------------------------ Validate Number:  IsEmpty invoked! returns true is Valid Number ------------------------------------ Validate Number: 34 IsEmpty invoked! returns false IsNumber invoked! returns true 34 is Valid Number ------------------------------------ Validate Number: A34 IsEmpty invoked! returns false IsNumber invoked! returns false A34 is InValid Number

Now lets modify if(IsEmpty(n) || IsNumber(n))  to if(IsEmpty(n) | IsNumber(n))

const nl = '<br />'; var IsEmpty = function(a){ document.write('IsEmpty invoked! returns '+(a=='') + nl); return (a=='') } var IsNumber = function(a){ document.write('IsNumber invoked! returns '+!isNaN(a) + nl); return !isNaN(a); } var IsEmptyOrNumber = function(n){ if(IsEmpty(n) | IsNumber(n))  document.write(n+' is Valid Number'+nl); else document.write(n+' is InValid Number'+nl); } var n1 = ''; var n2 = '34'; var n3 = 'A34'; document.write('------------------------------------'+nl); document.write('Validate Number: '+n1+nl); IsEmptyOrNumber(n1); document.write('------------------------------------'+nl); document.write('Validate Number: '+n2+nl); IsEmptyOrNumber(n2); document.write('------------------------------------'+nl); document.write('Validate Number: '+n3+nl); IsEmptyOrNumber(n3);

Explanation:

When IsValid(n1); invoked IsEmpty() returns true and due to | logical OR operator, next operation i.e. IsNumber() invoked which returns true and makes final result true i.e Valid.

for IsValid(n2); IsEmpty() returns false and next operation i.e. IsNumber() invoked which returns true and makes final result true i.e Valid.

for IsValid(n2); IsEmpty() returns false and next operation i.e. IsNumber() invoked which returns false and makes final result false i.e InValid. as shown in below result.

OUTPUT: ------------------------------------ Validate Number:  IsEmpty invoked! returns true IsNumber invoked! returns true is Valid Number ------------------------------------ Validate Number: 34 IsEmpty invoked! returns false IsNumber invoked! returns true 34 is Valid Number ------------------------------------ Validate Number: A34 IsEmpty invoked! returns false IsNumber invoked! returns false A34 is InValid Number

If you have any query or question or topic on which, we might have to write an article for your interest or any kind of suggestion regarding this post, Just feel free to write us, by hit add comment button below or contact via Contact Us form.


Your feedback and suggestions will be highly appreciated. Also try to leave comments from your valid verified email account, so that we can respond you quickly.

 
 

{{c.Content}}

Comment By: {{c.Author}}  On:   {{c.CreatedDate|date:'dd/MM/yyyy'}} / Reply


Categories