variable assignment in if statement javascript

• How to start JavaScript
• Work with me
• Recommended tools

JavaScript: Define a variable in IF statement

Have you ever tried to write an IF statement to check a primitive/constant value against a JavaScript variable, but accidentally re-defined the variable?

Accidents happen, what I really meant to write was:

This statement has 3 equals symbols ( === ) which means something completely different.

When I came across this problem for the first time, I asked myself..

Can you define variables inside an IF statement?

The answer is yes you can. Let’s look at the code example above again:

What I did there, was re-define a JavaScript variable inside the IF statement.

But you can create a new variable right inside the IF statement parenthesis.

So my next question, which I’m sure your’s is too, should anyone be doing this?

Should you define a variable inside IF statement?

Honestly, there’s no right or wrong answer to this question. JavaScript allows it, so you can make your decision from there.

I haven’t come across a use-case where this makes sense for me to do.

And personally, I think this is prone to bugs. It may also make it difficult to be catch when debugging, and your peers may be speed reading your code and not catch that variable definition.

They may mistake it for an equals check.

To avoid this, there’s a writing style I use called Yoda conditions.

A guide to Yoda conditions

Yoda conditions is a programming style when writing expressions. It’s also known as Yoda notation.

Let’s look at the code example above. I’ve also corrected the statement.

In the code example above, I’m checking to see if the variable, state , equals the string "not-woosah" .

If that statement is true, than it will print, “Not relaxed!”. Otherwise it will print, “relaxed :)”.

Like I mentioned above, accidents happen, and you may accidentally forget to type the additional equals symbols ( === ).

To avoid this error, I use the Yoda condition programming style.

All I did above, was switch the constant, "not-woosah" , to the left-hand side.

So just in-case you’re typing really fast, and you write something like this:

Your console should yell at you with this error message:

Oh wow, you’ve made it this far! If you enjoyed this article perhaps like or retweet the thread on Twitter:

Did you know that in JavaScript you can create variables inside an IF statement? Thread 1/5 pic.twitter.com/6FNV15zJdV — ʀᴜʙᴇɴ (@rleija_) July 19, 2020

I like to tweet about JavaScript and post helpful code snippets. Follow me there if you would like some too!

Ruben Leija

I launched this blog in 2019 and now I write to 85,000 monthly readers about JavaScript. Say hi to me at Twitter, @rleija_ .

Do you want more JavaScript articles ?

Hey, here at Linguine Code, we want to teach you everything we know about JavaScript . Our only question is, are you in?

JavaScript if Statements, Equality and Truthy/Falsy – Explained with Examples

By Deborah Kurata

Decisions, decisions, decisions. Go left? Or go right? In programming, we use an if statement when we want our code to make a decision.

In this tutorial, we'll deep dive into the JavaScript if statement. Along the way, we'll examine the difference between single equals, double equals, and triple equals. We'll also clarify the meaning of truthy and falsy in JavaScript.

You can watch the associated video here which walks through a demo.

Let's say we are building a number guessing game as shown in Figure 1 below. The game generates a random number. The user tries to guess that number by entering their guess and clicking the Guess button.

The game then checks the entered number. If the guess is too low, the game displays "too low". If the guess is too high, the game displays "too high". And if the guess is just right, the game displays "is correct ... You win!".

There are numerous "ifs" in that paragraph! To write the code for this game, we'll need some if statements.

Anatomy of an if Statement in JavaScript

In JavaScript, if is a block statement. A block statement groups a set of instructions. A block is delimited with curly braces.

Let's start with a simplified version of the logic required for our game. Here we determine if the user's guess is right or wrong.

The if statement begins with the if keyword. Note that all of JavaScript is case sensitive, including the key words. So if a keyword such as if is lowercase, it must be typed as lower case.

The if keyword is followed by parentheses. Inside the parentheses, we define the conditions for the if statement to make its decision, called the decision criteria .

In the above example, the decision criteria determine if the value in the variable guess equals the value in the variable randomNumber . Notice the triple equal === . We'll talk about that in a moment.

The if block body is enclosed in curly braces. The block can contain any number of statements, including additional if statements. If the decision criteria within the parentheses evaluate to true, the code within the block is executed. Otherwise, the code execution continues after the if block.

Single Equal vs Double Equal vs Triple Equal in JavaScript

In JavaScript, we use one, two, or three equal signs, depending on what we need.

The single equal sign = is an assignment. We use it to assign a value or expression to a variable.

In this code, we assign a string to the feedbackText variable. And assign a generated random number to the randomNumber variable.

The double equal == and triple equal === are comparison operators. They evaluate the equality of the two values. But how they perform that equality is slightly, yet significantly, different.

The double equal == compares the two values. If the values are of different types, it attempts to convert them to the same type before comparing.

Let's look at an example.

In the above code, instead of generating a random number we assign the number 8 to the randomNumber variable. And assign a string value of "8" to the guess variable. Since our if statement uses a double equal in this example, the data types are converted to the same type. The decision criteria then evaluates to true because the values are both 8. And the feedbackText variable is set to "You win!"

For more information on JavaScript variables and data types, check out this video.

The triple equal === is strict equality. It compares the data types and their values. It does not do any type coercion, meaning it won't attempt to convert the types. For strict equality to evaluate to true, the data type and the value must be the same.

Let's look at the same example, but using triple equal instead.

Using the triple equal === , the guess string value of "8" is not converted to a number. Because the values are not of the same data type, guess does not match randomNumber . The decision criteria evaluates to false and the code within the if block is not executed.

Figure 2 provides a summary. Use the triple equal any time you want an exact match, including their values and data types.

if vs else vs else if in JavaScript

The if statement alone works great if you want the code to do something if some condition is true. But sometimes you also want the code to do something else if the condition is not true. That's the purpose of the else block.

In the above code example, if the user's guess is greater than the random number, the feedback variable is assigned 'Too high'. Otherwise (else), it is set to 'Too low'.

In general, if the decision criteria is false, the else block is executed.

We can also use an else if . The else if provides a second set of decision criteria. So the else block is only executed if those decision criteria are true.

Here is an example that uses if , else and else if :

Let's walk through this code.

When this code is run, the first decision criterion get evaluated. Since this criterion uses triple equal === , it's a strict compare, meaning it compares the data type and value. If both the data type and value are the same, the decision criterion evaluates to true and the if block code is executed. In this example, the if block has only one statement, but there could be any number of statements in the if block.

If the first decision criterion is false, either because the variables have a different data type or a different value, the else if decision criterion is evaluated. If the guess is greater than the random number, the else if block is executed. In this case, the block only has one statement, but there could be any number of statements in this block.

If the else if decision criterion is false, the else block code is run. Again, there could be any number of statements within this else block.

To see this concept visually, Figure 3 shows this logic as a flow chart.

On the flow chart, the decision criteria are shown as diamonds with paths for true and false.

If the user's guess exactly matches the randomNumber (data type and value), the decision criteria are true and we set the feedback to 'Correct ... You win!'.

If the if statement decision criteria are false, the else if decision criteria are evaluated. If the user's guess is larger than the random number, the else if decision criteria are true and we set the feedback to 'Too high'.

If the else if decision criteria are false, we set the feedback to 'Too low'.

In these if statements, it's generally clear when the decision criteria are true or false. The guess is exactly the same as the random number or it isn't. The guess is greater than the random number or it isn't.

But what about this if statement?

With no comparison operator, this is shorthand syntax for "if this variable is truthy". How do we know if guessInput is true or false?

Truthy vs Falsy Values in JavaScript

JavaScript has a unique sense of true and false, called truthy and falsy . Truthy and falsy are used when evaluating decision-criteria that aren't clearly true or false. Let's look at some examples.

As you would expect, a variable set to false is falsy. The code within the if block is not executed.

A value of 0 (zero) is also falsy.

And "" , which is an empty string, is falsy.

If a variable has not been assigned a value, it is undefined . An undefined variable is falsy. A common coding pattern is to ensure a variable has a value before doing something with that variable using an if statement as shown above.

A null variable is also falsy.

And if the code attempts to convert a value that is not a number to a number, the result is NaN , which stands for "not a number". Variables that are NaN evaluate to falsy.

Any other values are truthy.

In the first example, the variable is set to a non-zero number, so it is truthy. In the second example, the variable is set to a non-empty string, so it is truthy.

Basically, if the variable value is false, zero, empty, null, undefined, or Nan , it's falsy and the code within the if block is not run.

If the variable value is anything else, such as a number that is not zero, a non-empty string, an array, or an object, it's truthy and the code in the if block is run.

How about a more full-featured example?

Guessing Game Example

Our guessing game includes the following code:

We first find the HTML elements we want to work with. We find the guess button, and use addEventListener to listen for the button click event. When the user clicks the button, the code calls the function we passed to addEventListener , which is processGuess .

For more information on finding HTML elements and reacting to their events, check out this article .

We then find the guess input element so we can read the user's guess. And we find a feedback element we'll use to write the feedback text to the page.

The processGuess() function reads the user's guess from the input element and displays the appropriate feedback. Let's break it down.

The first if statement ensures we found the input element. If the element was found, we have a reference to that element in the guessInput variable. The guessInput variable evaluates to truthy, and the if block code is executed.

The code within the if block reads the value of the input element. It uses valueAsNumber , which reads a numeric input as a number instead of a string. That way we can more easily compare the guess value to the randomly generated number.

The code then strictly compares the guess to the generated random number. If the values have the same type and value, the decision criteria are true and this if block code is run.

If the guess is not correct, an else if block determines if the value is too high or too low. Based on that comparison, the feedback text is set.

Lastly, we check whether we have a reference to the feedback container. If so, the feedbackContainer variable is set, the if statement evaluates to truthy, and we write the appropriate feedback text to that container.

Wrapping Up

We use if statements to make decisions in our code. The statements inside an if block are run if the decision criteria defined within the parentheses evaluate to true or truthy. The statements inside an else block are run if the decision criteria evaluate to false or falsy.

When defining decision criteria, it's important to set the appropriate comparison:

• A single equal = in JavaScript assigns a value to a variable. It should not be used in decision criteria.
• The double equals == compares the values to see if they are equal. If the values are not the same data type, it tries to convert them to the same type before checking for equality.
• The triple equals === strictly compares the values to see if they are equal. If they are not the same type, they are not equal.

And be mindful of JavaScript's rules for truthy and falsy, especially when defining decision criteria.

You can find the code for the guess a number game here: https://github.com/DeborahK/Gentle-Introduction-to-JavaScript

For more information on programming with JavaScript and to build this guess a number game step by step, check out this course:

Now don't be iffy, use those if statements wisely!

Learn to code. Build projects. Earn certifications—All for free.

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Popular Tutorials

Popular examples, reference materials, learn python interactively, js introduction.

• Getting Started
• JS Variables & Constants
• JS console.log
• JavaScript Data types
• JavaScript Operators
• JavaScript Comments
• JS Type Conversions

JS Control Flow

• JS Comparison Operators
• JavaScript if else Statement
• JavaScript for loop
• JavaScript while loop

JavaScript break Statement

• JavaScript continue Statement
• JavaScript switch Statement

JS Functions

• JavaScript Function
• Variable Scope
• JavaScript Hoisting
• JavaScript Recursion
• JavaScript Objects
• JavaScript Methods & this
• JavaScript Constructor
• JavaScript Getter and Setter
• JavaScript Prototype
• JavaScript Array
• JS Multidimensional Array
• JavaScript String
• JavaScript for...in loop
• JavaScript Number
• JavaScript Symbol

Exceptions and Modules

• JavaScript try...catch...finally

JavaScript throw Statement

• JavaScript Modules
• JavaScript ES6
• JavaScript Arrow Function
• JavaScript Default Parameters
• JavaScript Template Literals
• JavaScript Spread Operator
• JavaScript Map
• JavaScript Set
• Destructuring Assignment
• JavaScript Classes
• JavaScript Inheritance
• JavaScript for...of
• JavaScript Proxies

JavaScript Asynchronous

• JavaScript setTimeout()
• JavaScript CallBack Function
• JavaScript Promise
• Javascript async/await
• JavaScript setInterval()

Miscellaneous

• JavaScript JSON
• JavaScript Date and Time
• JavaScript Closure
• JavaScript this
• JavaScript use strict
• Iterators and Iterables
• JavaScript Generators
• JavaScript Regular Expressions
• JavaScript Browser Debugging
• Uses of JavaScript

JavaScript Tutorials

JavaScript Ternary Operator

JavaScript switch...case Statement

• JavaScript try...catch...finally Statement
• JavaScript if...else Statement

The JavaScript if...else statement is used to execute/skip a block of code based on a condition.

Here's a quick example of the if...else statement. You can read the rest of the tutorial if you want to learn about if...else in greater detail.

In the above example, the program displays You passed the examination. if the score variable is equal to 50 . Otherwise, it displays You failed the examination.

In computer programming, the if...else statement is a conditional statement that executes a block of code only when a specific condition is met. For example,

Suppose we need to assign different grades to students based on their scores.

• If a student scores above 90 , assign grade A .
• If a student scores above 75 , assign grade B .
• If a student scores above 65 , assign grade C .

These conditional tasks can be achieved using the if...else statement.

• JavaScript if Statement

We use the if keyword to execute code based on some specific condition.

The syntax of if statement is:

The if keyword checks the condition inside the parentheses () .

• If the condition is evaluated to true , the code inside { } is executed.
• If the condition is evaluated to false , the code inside { } is skipped.

Note: The code inside { } is also called the body of the if statement.

Example 1: JavaScript if Statement

Sample Output 1

In the above program, when we enter 5 , the condition number > 0 evaluates to true . Thus, the body of the if statement is executed.

Sample Output 2

Again, when we enter -1 , the condition number > 0 evaluates to false . Hence, the body of the if statement is skipped.

Since console.log("nice number"); is outside the body of the if statement, it is always executed.

Note: We use comparison and logical operators in our if conditions. To learn more, you can visit JavaScript Comparison and Logical Operators .

• JavaScript else Statement

We use the else keyword to execute code when the condition specified in the preceding if statement evaluates to false .

The syntax of the else statement is:

The if...else statement checks the condition and executes code in two ways:

• If condition is true , the code inside if is executed. And, the code inside else is skipped.
• If condition is false , the code inside if is skipped. Instead, the code inside else is executed.

Example 2: JavaScript if…else Statement

In the above example, the if statement checks for the condition age >= 18 .

Since we set the value of age to 17 , the condition evaluates to false .

Thus, the code inside if is skipped. And, code inside else is executed.

We can omit { } in if…else statements when we have a single line of code to execute. For example,

• JavaScript else if Statement

We can use the else if keyword to check for multiple conditions.

The syntax of the else if statement is:

• First, the condition in the if statement is checked. If the condition evaluates to true , the body of if is executed, and the rest is skipped.
• Otherwise, the condition in the else if statement is checked. If true , its body is executed and the rest is skipped.
• Finally, if no condition matches, the block of code in else is executed.

Example 3: JavaScript if...else if Statement

In the above example, we used the if statement to check for the condition rating <= 2 .

Likewise, we used the else if statement to check for another condition, rating >= 4 .

Since the else if condition is satisfied, the code inside it is executed.

We can use the else if keyword as many times as we want. For example,

In the above example, we used two else if statements.

The second else if statement was executed as its condition was satisfied.

• Nested if...else Statement

When we use an if...else statement inside another if...else statement, we create a nested if...else statement. For example,

Outer if...else

In the above example, the outer if condition checks if a student has passed or failed using the condition marks >= 40 . If it evaluates to false , the outer else statement will print Failed .

On the other hand, if marks >= 40 evaluates to true , the program moves to the inner if...else statement.

Inner if...else statement

The inner if condition checks whether the student has passed with distinction using the condition marks >= 80 .

If marks >= 80 evaluates to true , the inner if statement will print Distinction .

Otherwise, the inner else statement will print Passed .

Note: Avoid nesting multiple if…else statements within each other to maintain code readability and simplify debugging.

More on JavaScript if...else Statement

We can use the ternary operator ?: instead of an if...else statement if the operation we're performing is very simple. For example,

can be written as

We can replace our if…else statement with the switch statement when we deal with a large number of conditions.

For example,

In the above example, we used if…else to evaluate five conditions, including the else block.

Now, let's use the switch statement for the same purpose.

As you can see, the switch statement makes our code more readable and maintainable.

In addition, switch is faster than long chains of if…else statements.

We can use logical operators such as && and || within an if statement to add multiple conditions. For example,

Here, we used the logical operator && to add two conditions in the if statement.

Table of Contents

• Introduction

Before we wrap up, let’s put your knowledge of JavaScript if...else Statement to the test! Can you solve the following challenge?

Write a function to check if a student has passed or failed.

• Suppose, the pass mark is 40 .
• If the mark is greater than or equal to 40 , return "Pass" . Otherwise, return "Fail" .

Video: JavaScript if...else

Sorry about that.

Our premium learning platform, created with over a decade of experience and thousands of feedbacks .

Learn and improve your coding skills like never before.

• Interactive Courses
• Certificates
• 2000+ Challenges

A real-life analogy

We can easily grasp the concept of a “variable” if we imagine it as a “box” for data, with a uniquely-named sticker on it.

For instance, the variable message can be imagined as a box labelled "message" with the value "Hello!" in it:

We can put any value in the box.

We can also change it as many times as we want:

When the value is changed, the old data is removed from the variable:

We can also declare two variables and copy data from one into the other.

A variable should be declared only once.

A repeated declaration of the same variable is an error:

So, we should declare a variable once and then refer to it without let .

It’s interesting to note that there exist so-called pure functional programming languages, such as Haskell , that forbid changing variable values.

In such languages, once the value is stored “in the box”, it’s there forever. If we need to store something else, the language forces us to create a new box (declare a new variable). We can’t reuse the old one.

Though it may seem a little odd at first sight, these languages are quite capable of serious development. More than that, there are areas like parallel computations where this limitation confers certain benefits.

Variable naming

There are two limitations on variable names in JavaScript:

• The name must contain only letters, digits, or the symbols $ and _ .
• The first character must not be a digit.

Examples of valid names:

When the name contains multiple words, camelCase is commonly used. That is: words go one after another, each word except first starting with a capital letter: myVeryLongName .

What’s interesting – the dollar sign '$' and the underscore '_' can also be used in names. They are regular symbols, just like letters, without any special meaning.

These names are valid:

Examples of incorrect variable names:

Variables named apple and APPLE are two different variables.

It is possible to use any language, including Cyrillic letters, Chinese logograms and so on, like this:

Technically, there is no error here. Such names are allowed, but there is an international convention to use English in variable names. Even if we’re writing a small script, it may have a long life ahead. People from other countries may need to read it sometime.

There is a list of reserved words , which cannot be used as variable names because they are used by the language itself.

For example: let , class , return , and function are reserved.

The code below gives a syntax error:

Normally, we need to define a variable before using it. But in the old times, it was technically possible to create a variable by a mere assignment of the value without using let . This still works now if we don’t put use strict in our scripts to maintain compatibility with old scripts.

This is a bad practice and would cause an error in strict mode:

To declare a constant (unchanging) variable, use const instead of let :

Variables declared using const are called “constants”. They cannot be reassigned. An attempt to do so would cause an error:

When a programmer is sure that a variable will never change, they can declare it with const to guarantee and communicate that fact to everyone.

Uppercase constants

There is a widespread practice to use constants as aliases for difficult-to-remember values that are known before execution.

Such constants are named using capital letters and underscores.

For instance, let’s make constants for colors in so-called “web” (hexadecimal) format:

• COLOR_ORANGE is much easier to remember than "#FF7F00" .
• It is much easier to mistype "#FF7F00" than COLOR_ORANGE .
• When reading the code, COLOR_ORANGE is much more meaningful than #FF7F00 .

When should we use capitals for a constant and when should we name it normally? Let’s make that clear.

Being a “constant” just means that a variable’s value never changes. But some constants are known before execution (like a hexadecimal value for red) and some constants are calculated in run-time, during the execution, but do not change after their initial assignment.

For instance:

The value of pageLoadTime is not known before the page load, so it’s named normally. But it’s still a constant because it doesn’t change after the assignment.

In other words, capital-named constants are only used as aliases for “hard-coded” values.

Name things right

Talking about variables, there’s one more extremely important thing.

A variable name should have a clean, obvious meaning, describing the data that it stores.

Variable naming is one of the most important and complex skills in programming. A glance at variable names can reveal which code was written by a beginner versus an experienced developer.

In a real project, most of the time is spent modifying and extending an existing code base rather than writing something completely separate from scratch. When we return to some code after doing something else for a while, it’s much easier to find information that is well-labelled. Or, in other words, when the variables have good names.

Please spend time thinking about the right name for a variable before declaring it. Doing so will repay you handsomely.

Some good-to-follow rules are:

• Use human-readable names like userName or shoppingCart .
• Stay away from abbreviations or short names like a , b , and c , unless you know what you’re doing.
• Make names maximally descriptive and concise. Examples of bad names are data and value . Such names say nothing. It’s only okay to use them if the context of the code makes it exceptionally obvious which data or value the variable is referencing.
• Agree on terms within your team and in your mind. If a site visitor is called a “user” then we should name related variables currentUser or newUser instead of currentVisitor or newManInTown .

Sounds simple? Indeed it is, but creating descriptive and concise variable names in practice is not. Go for it.

And the last note. There are some lazy programmers who, instead of declaring new variables, tend to reuse existing ones.

As a result, their variables are like boxes into which people throw different things without changing their stickers. What’s inside the box now? Who knows? We need to come closer and check.

Such programmers save a little bit on variable declaration but lose ten times more on debugging.

An extra variable is good, not evil.

Modern JavaScript minifiers and browsers optimize code well enough, so it won’t create performance issues. Using different variables for different values can even help the engine optimize your code.

We can declare variables to store data by using the var , let , or const keywords.

• let – is a modern variable declaration.
• var – is an old-school variable declaration. Normally we don’t use it at all, but we’ll cover subtle differences from let in the chapter The old "var" , just in case you need them.
• const – is like let , but the value of the variable can’t be changed.

Variables should be named in a way that allows us to easily understand what’s inside them.

Working with variables

• Declare two variables: admin and name .
• Assign the value "John" to name .
• Copy the value from name to admin .
• Show the value of admin using alert (must output “John”).

In the code below, each line corresponds to the item in the task list.

Giving the right name

• Create a variable with the name of our planet. How would you name such a variable?
• Create a variable to store the name of a current visitor to a website. How would you name that variable?

The variable for our planet

That’s simple:

Note, we could use a shorter name planet , but it might not be obvious what planet it refers to. It’s nice to be more verbose. At least until the variable isNotTooLong.

The name of the current visitor

Again, we could shorten that to userName if we know for sure that the user is current.

Modern editors and autocomplete make long variable names easy to write. Don’t save on them. A name with 3 words in it is fine.

And if your editor does not have proper autocompletion, get a new one .

Uppercase const?

Examine the following code:

Here we have a constant birthday for the date, and also the age constant.

The age is calculated from birthday using someCode() , which means a function call that we didn’t explain yet (we will soon!), but the details don’t matter here, the point is that age is calculated somehow based on the birthday .

Would it be right to use upper case for birthday ? For age ? Or even for both?

We generally use upper case for constants that are “hard-coded”. Or, in other words, when the value is known prior to execution and directly written into the code.

In this code, birthday is exactly like that. So we could use the upper case for it.

In contrast, age is evaluated in run-time. Today we have one age, a year after we’ll have another one. It is constant in a sense that it does not change through the code execution. But it is a bit “less of a constant” than birthday : it is calculated, so we should keep the lower case for it.

Lesson navigation

• © 2007—2024  Ilya Kantor
• about the project
• terms of usage
• privacy policy

JS Tutorial

Js versions, js functions, js html dom, js browser bom, js web apis, js vs jquery, js graphics, js examples, js references, javascript assignment, javascript assignment operators.

Assignment operators assign values to JavaScript variables.

Shift Assignment Operators

Bitwise Assignment Operators

Logical Assignment Operators

The = Operator

The Simple Assignment Operator assigns a value to a variable.

Simple Assignment Examples

The += operator.

The Addition Assignment Operator adds a value to a variable.

Addition Assignment Examples

The -= operator.

The Subtraction Assignment Operator subtracts a value from a variable.

Subtraction Assignment Example

The *= operator.

The Multiplication Assignment Operator multiplies a variable.

Multiplication Assignment Example

The **= operator.

The Exponentiation Assignment Operator raises a variable to the power of the operand.

Exponentiation Assignment Example

The /= operator.

The Division Assignment Operator divides a variable.

Division Assignment Example

The %= operator.

The Remainder Assignment Operator assigns a remainder to a variable.

Remainder Assignment Example

Advertisement

The <<= Operator

The Left Shift Assignment Operator left shifts a variable.

Left Shift Assignment Example

The >>= operator.

The Right Shift Assignment Operator right shifts a variable (signed).

Right Shift Assignment Example

The >>>= operator.

The Unsigned Right Shift Assignment Operator right shifts a variable (unsigned).

Unsigned Right Shift Assignment Example

The &= operator.

The Bitwise AND Assignment Operator does a bitwise AND operation on two operands and assigns the result to the the variable.

Bitwise AND Assignment Example

The |= operator.

The Bitwise OR Assignment Operator does a bitwise OR operation on two operands and assigns the result to the variable.

Bitwise OR Assignment Example

The ^= operator.

The Bitwise XOR Assignment Operator does a bitwise XOR operation on two operands and assigns the result to the variable.

Bitwise XOR Assignment Example

The &&= operator.

The Logical AND assignment operator is used between two values.

If the first value is true, the second value is assigned.

Logical AND Assignment Example

The &&= operator is an ES2020 feature .

The ||= Operator

The Logical OR assignment operator is used between two values.

If the first value is false, the second value is assigned.

Logical OR Assignment Example

The ||= operator is an ES2020 feature .

The ??= Operator

The Nullish coalescing assignment operator is used between two values.

If the first value is undefined or null, the second value is assigned.

Nullish Coalescing Assignment Example

The ??= operator is an ES2020 feature .

Test Yourself With Exercises

Use the correct assignment operator that will result in x being 15 (same as x = x + y ).

Start the Exercise

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

DEV Community

Posted on Feb 9, 2020

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.

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.

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'.

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.

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

Top comments (14)

Templates let you quickly answer FAQs or store snippets for re-use.

• Joined Feb 5, 2018

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!

• Location United Kingdom
• Education Computer Science Bsc
• Work Senior Software Engineer
• Joined Nov 7, 2019

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.

Here is the related documentation:

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

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

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.

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

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:

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.

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.

• Joined May 7, 2020

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

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

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.

Okay, thanks for the clarification

Okay thank you

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

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

TypeScript vs JavaScript

Kinga Kwapisz - Sep 9

Performant Web Apps

Shubhajit Chatterjee - Sep 8

Next.js vs React - Which One to Choose?

ViitorCloud Technologies - Sep 9

Using MongoDB with Cloudflare Workers

Adrian Fathan - Sep 7

We're a place where coders share, stay up-to-date and grow their careers.

• Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
• Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand
• OverflowAI GenAI features for Teams
• OverflowAPI Train & fine-tune LLMs
• Labs The future of collective knowledge sharing
• About the company Visit the blog

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Get early access and see previews of new features.

Variable assignment in if statement

In Swift we can assign a variable as we evaluate the existence of a potential value, such as:

Is there an equivalent in JavaScript?

• why the downvotes? –  softcode Commented Jan 15, 2017 at 3:25
• Even in swift this is bad practice. There's no reason x is a different name. Should just be if let y = y { –  Alexander Commented Jan 15, 2017 at 3:29
• I think it should be something like this var y = (y === null || y ===undefined) ? 3 : y 3 is my default value. –  Flying Gambit Commented Jan 15, 2017 at 3:41
• @FlyingGambit This isn't what that code does. –  Alexander Commented Jan 15, 2017 at 5:14
• I very much disagree that this is bad practice. I think the example is just not clear. For example in swift you could do } else if let x = resultOfSomeFunction() { ... } and then use x inside that scope. But I don't believe there's a JS equivalent so you just have to calculate it before hand. Not the end of the world, just not as clean. –  tettoffensive Commented Dec 7, 2023 at 19:48

There's no such equivalent solution in JavaScript, because there's no equivalent problem.

What you're demonstrating is conditional binding , which exists to allow you to create a non-optional value ( x , in your example), out of an optional value ( y ). There's no such need in Javascript, because all values are nullable, for better or for worse.

You just do a null check, like so:

Just as how you shouldn't write JavaScript code in Swift, you shouldn't write Swift code in JavaScript. It's a completely different languages, with completely different features, syntax, patterns and designs.

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Sign up or log in

Post as a guest.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy .

Not the answer you're looking for? Browse other questions tagged javascript swift or ask your own question .

• The Overflow Blog
• The evolution of full stack engineers
• One of the best ways to get value for AI coding tools: generating tests
• Featured on Meta
• Bringing clarity to status tag usage on meta sites
• Join Stack Overflow’s CEO and me for the first Stack IRL Community Event in...
• Feedback requested: How do you use tag hover descriptions for curating and do...
• Staging Ground Reviewer Motivation
• What does a new user need in a homepage experience on Stack Overflow?

Hot Network Questions

• Who was the French detective mentioned in Hitchcock's "Shadow of a Doubt"?
• Can flood basalt eruptions start in historical timescales?
• A probably Fantasy middle-length fiction about a probable vampire during the Blitz
• Was using an older version of a legal card from a nonlegal set ever not legal?
• Best memory / storage solution for high read / write throughput application(s)?
• Colossians 1:16 New World Translation renders τα πάντα as “all other things” but why is this is not shown in their Kingdom Interlinear?
• Guesstimate a multiple choice exam
• Understanding the parabolic state of a quantum particle in the infinite square well
• If a friend hands me a marijuana edible then dies of a heart attack am I guilty of felony murder?
• Disable encryption on wireguard
• How to fold or expand the wingtips on Boeing 777?
• A journal has published an AI-generated article under my name. What to do?
• Starting with 2014 "+" signs and 2015 "−" signs, you delete signs until one remains. What’s left?
• Are there epistemic vices?
• Can the Fourier transform of a test function vanish on an interval?
• Practice test paper answers all seem incorrect, but provider insists they are ... what am i missing?
• Logical relationship between supercompact and rank-into-rank cardinals
• What is the purpose of long plastic sleeve tubes around connections in appliances?
• Overstaying knowing I have a new Schengen visa
• What is the least number of colours Peter could use to color the 3x3 square?
• How much technological progress could a group of modern people make in a century?
• Defining a grid in tikz using setlength vs. explicitly setting a length parameter
• Why doesn't SiLU suffer from a worse version of a "dying ReLU" problem?
• Correct anonymization of submission using Latex

• Skip to main content
• Select language
• Skip to search
• Assignment operators

An assignment operator assigns a value to its left operand based on the value of its right operand.

The basic assignment operator is equal ( = ), which assigns the value of its right operand to its left operand. That is, x = y assigns the value of y to x . The other assignment operators are usually shorthand for standard operations, as shown in the following definitions and examples.

Simple assignment operator which assigns a value to a variable. The assignment operation evaluates to the assigned value. Chaining the assignment operator is possible in order to assign a single value to multiple variables. See the example.

Addition assignment

The addition assignment operator adds the value of the right operand to a variable and assigns the result to the variable. The types of the two operands determine the behavior of the addition assignment operator. Addition or concatenation is possible. See the addition operator for more details.

Subtraction assignment

The subtraction assignment operator subtracts the value of the right operand from a variable and assigns the result to the variable. See the subtraction operator for more details.

Multiplication assignment

The multiplication assignment operator multiplies a variable by the value of the right operand and assigns the result to the variable. See the multiplication operator for more details.

Division assignment

The division assignment operator divides a variable by the value of the right operand and assigns the result to the variable. See the division operator for more details.

Remainder assignment

The remainder assignment operator divides a variable by the value of the right operand and assigns the remainder to the variable. See the remainder operator for more details.

Exponentiation assignment

This is an experimental technology, part of the ECMAScript 2016 (ES7) proposal. Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future version of browsers as the spec changes.

The exponentiation assignment operator evaluates to the result of raising first operand to the power second operand. See the exponentiation operator for more details.

Left shift assignment

The left shift assignment operator moves the specified amount of bits to the left and assigns the result to the variable. See the left shift operator for more details.

Right shift assignment

The right shift assignment operator moves the specified amount of bits to the right and assigns the result to the variable. See the right shift operator for more details.

Unsigned right shift assignment

The unsigned right shift assignment operator moves the specified amount of bits to the right and assigns the result to the variable. See the unsigned right shift operator for more details.

Bitwise AND assignment

The bitwise AND assignment operator uses the binary representation of both operands, does a bitwise AND operation on them and assigns the result to the variable. See the bitwise AND operator for more details.

Bitwise XOR assignment

The bitwise XOR assignment operator uses the binary representation of both operands, does a bitwise XOR operation on them and assigns the result to the variable. See the bitwise XOR operator for more details.

Bitwise OR assignment

The bitwise OR assignment operator uses the binary representation of both operands, does a bitwise OR operation on them and assigns the result to the variable. See the bitwise OR operator for more details.

Left operand with another assignment operator

In unusual situations, the assignment operator (e.g. x += y ) is not identical to the meaning expression (here x = x + y ). When the left operand of an assignment operator itself contains an assignment operator, the left operand is evaluated only once. For example:

Specifications

Browser compatibility

• Arithmetic operators

Document Tags and Contributors

• JavaScript basics
• JavaScript first steps
• JavaScript building blocks
• Introducing JavaScript objects
• Introduction
• Grammar and types
• Control flow and error handling
• Loops and iteration
• Expressions and operators
• Numbers and dates
• Text formatting
• Regular expressions
• Indexed collections
• Keyed collections
• Working with objects
• Details of the object model
• Iterators and generators
• Meta programming
• A re-introduction to JavaScript
• JavaScript data structures
• Equality comparisons and sameness
• Inheritance and the prototype chain
• Strict mode
• JavaScript typed arrays
• Memory Management
• Concurrency model and Event Loop
• References:
• ArrayBuffer
• AsyncFunction
• Float32Array
• Float64Array
• GeneratorFunction
• InternalError
• Intl.Collator
• Intl.DateTimeFormat
• Intl.NumberFormat
• ParallelArray
• ReferenceError
• SIMD.Bool16x8
• SIMD.Bool32x4
• SIMD.Bool64x2
• SIMD.Bool8x16
• SIMD.Float32x4
• SIMD.Float64x2
• SIMD.Int16x8
• SIMD.Int32x4
• SIMD.Int8x16
• SIMD.Uint16x8
• SIMD.Uint32x4
• SIMD.Uint8x16
• SharedArrayBuffer
• StopIteration
• SyntaxError
• Uint16Array
• Uint32Array
• Uint8ClampedArray
• WebAssembly
• decodeURI()
• decodeURIComponent()
• encodeURI()
• encodeURIComponent()
• parseFloat()
• Array comprehensions
• Bitwise operators
• Comma operator
• Comparison operators
• Conditional (ternary) Operator
• Destructuring assignment
• Expression closures
• Generator comprehensions
• Grouping operator
• Legacy generator function expression
• Logical Operators
• Object initializer
• Operator precedence
• Property accessors
• Spread syntax
• async function expression
• class expression
• delete operator
• function expression
• function* expression
• in operator
• new operator
• void operator
• Legacy generator function
• async function
• for each...in
• function declaration
• try...catch
• Arguments object
• Arrow functions
• Default parameters
• Method definitions
• Rest parameters
• constructor
• element loaded from a different domain for which you violated the same-origin policy.">Error: Permission denied to access property "x"
• InternalError: too much recursion
• RangeError: argument is not a valid code point
• RangeError: invalid array length
• RangeError: invalid date
• RangeError: precision is out of range
• RangeError: radix must be an integer
• RangeError: repeat count must be less than infinity
• RangeError: repeat count must be non-negative
• ReferenceError: "x" is not defined
• ReferenceError: assignment to undeclared variable "x"
• ReferenceError: deprecated caller or arguments usage
• ReferenceError: invalid assignment left-hand side
• ReferenceError: reference to undefined property "x"
• SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated
• SyntaxError: "use strict" not allowed in function with non-simple parameters
• SyntaxError: "x" is a reserved identifier
• SyntaxError: JSON.parse: bad parsing
• SyntaxError: Malformed formal parameter
• SyntaxError: Unexpected token
• SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead
• SyntaxError: a declaration in the head of a for-of loop can't have an initializer
• SyntaxError: applying the 'delete' operator to an unqualified name is deprecated
• SyntaxError: for-in loop head declarations may not have initializers
• SyntaxError: function statement requires a name
• SyntaxError: identifier starts immediately after numeric literal
• SyntaxError: illegal character
• SyntaxError: invalid regular expression flag "x"
• SyntaxError: missing ) after argument list
• SyntaxError: missing ) after condition
• SyntaxError: missing : after property id
• SyntaxError: missing ; before statement
• SyntaxError: missing = in const declaration
• SyntaxError: missing ] after element list
• SyntaxError: missing formal parameter
• SyntaxError: missing name after . operator
• SyntaxError: missing variable name
• SyntaxError: missing } after function body
• SyntaxError: missing } after property list
• SyntaxError: redeclaration of formal parameter "x"
• SyntaxError: return not in function
• SyntaxError: test for equality (==) mistyped as assignment (=)?
• SyntaxError: unterminated string literal
• TypeError: "x" has no properties
• TypeError: "x" is (not) "y"
• TypeError: "x" is not a constructor
• TypeError: "x" is not a function
• TypeError: "x" is not a non-null object
• TypeError: "x" is read-only
• TypeError: More arguments needed
• TypeError: can't access dead object
• TypeError: can't define property "x": "obj" is not extensible
• TypeError: can't redefine non-configurable property "x"
• TypeError: cyclic object value
• TypeError: invalid 'in' operand "x"
• TypeError: invalid Array.prototype.sort argument
• TypeError: invalid arguments
• TypeError: invalid assignment to const "x"
• TypeError: property "x" is non-configurable and can't be deleted
• TypeError: setting getter-only property "x"
• TypeError: variable "x" redeclares argument
• URIError: malformed URI sequence
• Warning: -file- is being assigned a //# sourceMappingURL, but already has one
• Warning: 08/09 is not a legal ECMA-262 octal constant
• Warning: Date.prototype.toLocaleFormat is deprecated
• Warning: JavaScript 1.6's for-each-in loops are deprecated
• Warning: String.x is deprecated; use String.prototype.x instead
• Warning: expression closures are deprecated
• Warning: unreachable code after return statement
• JavaScript technologies overview
• Lexical grammar
• Enumerability and ownership of properties
• Iteration protocols
• Transitioning to strict mode
• Template literals
• Deprecated features
• ECMAScript 2015 support in Mozilla
• ECMAScript 5 support in Mozilla
• ECMAScript Next support in Mozilla
• Firefox JavaScript changelog
• New in JavaScript 1.1
• New in JavaScript 1.2
• New in JavaScript 1.3
• New in JavaScript 1.4
• New in JavaScript 1.5
• New in JavaScript 1.6
• New in JavaScript 1.7
• New in JavaScript 1.8
• New in JavaScript 1.8.1
• New in JavaScript 1.8.5
• Documentation:
• All pages index
• Methods index
• Properties index
• Pages tagged "JavaScript"
• JavaScript doc status
• The MDN project