js conditional assignment operator

Conditional branching: if, '?'

Sometimes, we need to perform different actions based on different conditions.

To do that, we can use the if statement and the conditional operator ? , that’s also called a “question mark” operator.

The “if” statement

The if(...) statement evaluates a condition in parentheses and, if the result is true , executes a block of code.

For example:

In the example above, the condition is a simple equality check ( year == 2015 ), but it can be much more complex.

If we want to execute more than one statement, we have to wrap our code block inside curly braces:

We recommend wrapping your code block with curly braces {} every time you use an if statement, even if there is only one statement to execute. Doing so improves readability.

Boolean conversion

The if (…) statement evaluates the expression in its parentheses and converts the result to a boolean.

Let’s recall the conversion rules from the chapter Type Conversions :

• A number 0 , an empty string "" , null , undefined , and NaN all become false . Because of that they are called “falsy” values.
• Other values become true , so they are called “truthy”.

So, the code under this condition would never execute:

…and inside this condition – it always will:

We can also pass a pre-evaluated boolean value to if , like this:

The “else” clause

The if statement may contain an optional else block. It executes when the condition is falsy.

Several conditions: “else if”

Sometimes, we’d like to test several variants of a condition. The else if clause lets us do that.

In the code above, JavaScript first checks year < 2015 . If that is falsy, it goes to the next condition year > 2015 . If that is also falsy, it shows the last alert .

There can be more else if blocks. The final else is optional.

Conditional operator ‘?’

Sometimes, we need to assign a variable depending on a condition.

For instance:

The so-called “conditional” or “question mark” operator lets us do that in a shorter and simpler way.

The operator is represented by a question mark ? . Sometimes it’s called “ternary”, because the operator has three operands. It is actually the one and only operator in JavaScript which has that many.

The syntax is:

The condition is evaluated: if it’s truthy then value1 is returned, otherwise – value2 .

Technically, we can omit the parentheses around age > 18 . The question mark operator has a low precedence, so it executes after the comparison > .

This example will do the same thing as the previous one:

But parentheses make the code more readable, so we recommend using them.

In the example above, you can avoid using the question mark operator because the comparison itself returns true/false :

Multiple ‘?’

A sequence of question mark operators ? can return a value that depends on more than one condition.

It may be difficult at first to grasp what’s going on. But after a closer look, we can see that it’s just an ordinary sequence of tests:

• The first question mark checks whether age < 3 .
• If true – it returns 'Hi, baby!' . Otherwise, it continues to the expression after the colon “:”, checking age < 18 .
• If that’s true – it returns 'Hello!' . Otherwise, it continues to the expression after the next colon “:”, checking age < 100 .
• If that’s true – it returns 'Greetings!' . Otherwise, it continues to the expression after the last colon “:”, returning 'What an unusual age!' .

Here’s how this looks using if..else :

Non-traditional use of ‘?’

Sometimes the question mark ? is used as a replacement for if :

Depending on the condition company == 'Netscape' , either the first or the second expression after the ? gets executed and shows an alert.

We don’t assign a result to a variable here. Instead, we execute different code depending on the condition.

It’s not recommended to use the question mark operator in this way.

The notation is shorter than the equivalent if statement, which appeals to some programmers. But it is less readable.

Here is the same code using if for comparison:

Our eyes scan the code vertically. Code blocks which span several lines are easier to understand than a long, horizontal instruction set.

The purpose of the question mark operator ? is to return one value or another depending on its condition. Please use it for exactly that. Use if when you need to execute different branches of code.

if (a string with zero)

Will alert be shown?

Yes, it will.

Any string except an empty one (and "0" is not empty) becomes true in the logical context.

We can run and check:

The name of JavaScript

Using the if..else construct, write the code which asks: ‘What is the “official” name of JavaScript?’

If the visitor enters “ECMAScript”, then output “Right!”, otherwise – output: “You don’t know? ECMAScript!”

Demo in new window

Show the sign

Using if..else , write the code which gets a number via prompt and then shows in alert :

• 1 , if the value is greater than zero,
• -1 , if less than zero,
• 0 , if equals zero.

In this task we assume that the input is always a number.

Rewrite 'if' into '?'

Rewrite this if using the conditional operator '?' :

Rewrite 'if..else' into '?'

Rewrite if..else using multiple ternary operators '?' .

For readability, it’s recommended to split the code into multiple lines.

Lesson navigation

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

Home » JavaScript Tutorial » JavaScript Assignment Operators

JavaScript Assignment Operators

Summary : in this tutorial, you will learn how to use JavaScript assignment operators to assign a value to a variable.

Introduction to JavaScript assignment operators

An assignment operator ( = ) assigns a value to a variable. The syntax of the assignment operator is as follows:

In this syntax, JavaScript evaluates the expression b first and assigns the result to the variable a .

The following example declares the counter variable and initializes its value to zero:

The following example increases the counter variable by one and assigns the result to the counter variable:

When evaluating the second statement, JavaScript evaluates the expression on the right-hand first ( counter + 1 ) and assigns the result to the counter variable. After the second assignment, the counter variable is 1 .

To make the code more concise, you can use the += operator like this:

In this syntax, you don’t have to repeat the counter variable twice in the assignment.

The following table illustrates assignment operators that are shorthand for another operator and the assignment:

Chaining JavaScript assignment operators

If you want to assign a single value to multiple variables, you can chain the assignment operators. For example:

In this example, JavaScript evaluates from right to left. Therefore, it does the following:

• Use the assignment operator ( = ) to assign a value to a variable.
• Chain the assignment operators if you want to assign a single value to multiple variables.

Operators are constructs which behave generally like functions, but which differ syntactically or semantically from usual functions.

Types of operators

Unary operators, binary operators, the ternary operator (conditional operator).

condition ? x : y

Conditional Operator

condition ? expression : expression

The conditional (ternary) operator is the only JavaScript operator that takes three operands. This operator is frequently used as a shortcut for the if statement.

MDN // Conditional Operator

As an expression:

To declare a variable:

To create a property:

Multiple ternary evaluations

Multiple operations, arithmetic operators.

Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value.

MDN // Arithmetic Operators

The unary plus operator precedes its operand and evaluates to its operand but attempts to convert it into a number , if it isn't already.

Note: NaN is a property of the global object. MDN // NaN

The unary negation operator precedes its operand and negates it.

The addition operator produces the sum of numeric operands or string concatenation.

Concatenation

Addition operators are parsed from left to right

Subtraction -

The subtraction operator subtracts the two operands, producing their difference.

The division operator produces the quotient of its operands where the left operand is the dividend and the right operand is the divisor.

Note: The global Infinity property is a numeric value representing infinity. MDN | Infinity

Multiplication *

The multiplication operator produces the product of the operands.

The multiplication operator has higher precedence than the addition operator.

Remainder %

Returns the remainder left over when one operand is divided by a second operand.

Exponentiation **

The exponentiation operator returns the result of raising first operand to the power second operand.

Increment ++

x ++ or ++ x

The increment operator increments (adds one to) its operand and returns a value.

Decrement --

x -- or -- x

The decrement operator decrements (subtracts one from) its operand and returns a value.

Assignment operators

The basic assignment operator is equal (=), which assigns the value of its right operand to its left operand.

MDN // Assignment Operators

Simple Assignment

Simple assignment operator which assigns a value to a variable.

Compound assignment

Destructuring assignment

The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects into distinct variables.

MDN // Destructuring assignment

Array Destructuring

With arrays, destructuring is made by order

With destructuring:

Without destructuring:

Destructuring declares new variables, and follows the same rules as any variable declaration.

Note: as we are declaring new variables y and z and asigning a value, we need to use var , otherwise variables will be declared on global scope.

Direct assignment

A variable can be assigned its value via destructuring separate from the variable's declaration.

without destructuring:

with destructuring:

Default values

A variable can be assigned a default, in the case that the value pulled from the array is undefined.

Note: Notice that default values only works with undefined values, not with null or falsey values.

Swapping variables

Two variables values can be swapped in one destructuring expression.

Skipping values

You can ignore return values that you're not interested in

Nested array destructuring

Object destructuring.

With objects, destructuring is made by property name, not by order

Renaming properties

Default values or renamed properties, destructuring function parameters, nested object and array destructuring, complex destructuring, comparison operators.

JavaScript has both strict and type–converting comparisons.

MDN // Comparison Operators

Abstract comparison

Converts the operands to the same type before making the comparison.

Abstract equality

Equality of objects.

Two distinct objects are never equal for either strict or abstract comparisons. An expression comparing objects is only true if the operands reference the same object.

Note: The two objects are difference objects, in different allocation. They are not the same object .

Abstract inequality

Type conversion rules, string == number.

The string is converted to a number value.

Boolean == Number

The Boolean operand is converted to 1 if it is true and 0 if it is false.

Object == Number || Object == String

JavaScript attempts to return the default value for the object.

Working with objects

Each of these operators will call the valueOf() function on each operand before a comparison is made. Then, the primitive values are compared

MDN // Object.protrotype.valueOf()

Enforcing valueOf() :

Strict comparison

A strict comparison is only true if the operands are of the same type and the contents match.

Strict equality

Strict inequality, relational operators, logical operators.

expression && expression

expression || expression

! expression

Logical operators are typically used with Boolean (logical) values However, the && and || operators actually return the value of one of the specified operands, so if these operators are used with non-Boolean values, they may return a non-Boolean value.

MDN // Logical Operators

Logical AND

The return is not true or false , it's the last evaluated expression

Expression conversion

With non-Boolean values, "falsey" expressions are evaluated to false: undefined , null , NaN , 0 , ""

Note: The return is not true or false , it's the last evaluated expression.

Logical NOT

Short-circuit evaluation.

As logical expressions are evaluated left to right, they are tested for possible "short-circuit" evaluation.

Using it for logic

is the same as:

Other unary operators

An unary operation is an operation with only one operand.

The delete operator deletes an object, an object's property, or an element at a specified index in an array.

MDN // Operators > delete

Objects (and arrays) can be deleted only if they are declared implicitly

The typeof operator returns a string indicating the type of the unevaluated operand.

Spread operator

The spread syntax allows an expression to be expanded in places where comma separated variables are expected.

MDN // Spread operator

numbers passed as a single argument to console.log :

numbers spread, as separated arguments:

which is the same as:

Spreading arrays

Array concat, array insertion, array clone.

arr2 becomes 1,2,3,4 , arr stays the same

Spreading objects

Spread with overriding, can't spread an object into an array, spread arguments, spread operator as rest parameter.

The rest parameter syntax allows us to represent an indefinite number of arguments as an array.

Getting all arguments of a func

Arguments vs ...args .

arguments is an iterable (array-like), but not an Array

Array of arguments

arguments built-in variable

Selective rest parameter

... is usefull to get "the rest of the arguments"

Spreading arguments

Rest paramater in array destructure

Read the slides again, and we'll start a small quiz on operators.

01. What would be the output of each code?

01. solution, 02. what would be the output of this code, 02. solution, 03. what would be the output of this code, 03. solution, 04. what would be the output of this code, 04. solution, 05. what would be the output of this code, 05. solution, 06. what would be the output of this code, 06. solution.

String is iterable, so you can spread them.

07. What would be the output of this code?

07. solution, 08. what would be the output of this code, 08. solution.

JAVASCRIPT ASSIGNMENT OPERATORS

In this tutorial, you will learn about all the different assignment operators in javascript and how to use them in javascript.

Assignment Operators

In javascript, there are 16 different assignment operators that are used to assign value to the variable. It is shorthand of other operators which is recommended to use.

The assignment operators are used to assign value based on the right operand to its left operand.

The left operand must be a variable while the right operand may be a variable, number, boolean, string, expression, object, or combination of any other.

One of the most basic assignment operators is equal = , which is used to directly assign a value.

Assignment Operators List

Here is the list of all assignment operators in JavaScript:

In the following table if variable a is not defined then assume it to be 10.

Assignment operator

The assignment operator = is the simplest value assigning operator which assigns a given value to a variable.

The assignment operators support chaining, which means you can assign a single value in multiple variables in a single line.

Addition assignment operator

The addition assignment operator += is used to add the value of the right operand to the value of the left operand and assigns the result to the left operand.

On the basis of the data type of variable, the addition assignment operator may add or concatenate the variables.

Subtraction assignment operator

The subtraction assignment operator -= subtracts the value of the right operand from the value of the left operand and assigns the result to the left operand.

If the value can not be subtracted then it results in a NaN .

Multiplication assignment operator

The multiplication assignment operator *= assigns the result to the left operand after multiplying values of the left and right operand.

Division assignment operator

The division assignment operator /= divides the value of the left operand by the value of the right operand and assigns the result to the left operand.

Remainder assignment operator

The remainder assignment operator %= assigns the remainder to the left operand after dividing the value of the left operand by the value of the right operand.

Exponentiation assignment operator

The exponential assignment operator **= assigns the result of exponentiation to the left operand after exponentiating the value of the left operand by the value of the right operand.

Left shift assignment

The left shift assignment operator <<= assigns the result of the left shift to the left operand after shifting the value of the left operand by the value of the right operand.

Right shift assignment

The right shift assignment operator >>= assigns the result of the right shift to the left operand after shifting the value of the left operand by the value of the right operand.

Unsigned right shift assignment

The unsigned right shift assignment operator >>>= assigns the result of the unsigned right shift to the left operand after shifting the value of the left operand by the value of the right operand.

Bitwise AND assignment

The bitwise AND assignment operator &= assigns the result of bitwise AND to the left operand after ANDing the value of the left operand by the value of the right operand.

Bitwise OR assignment

The bitwise OR assignment operator |= assigns the result of bitwise OR to the left operand after ORing the value of left operand by the value of the right operand.

Bitwise XOR assignment

The bitwise XOR assignment operator ^= assigns the result of bitwise XOR to the left operand after XORing the value of the left operand by the value of the right operand.

Logical AND assignment

The logical AND assignment operator &&= assigns value to left operand only when it is truthy .

Note : A truthy value is a value that is considered true when encountered in a boolean context.

Logical OR assignment

The logical OR assignment operator ||= assigns value to left operand only when it is falsy .

Note : A falsy value is a value that is considered false when encountered in a boolean context.

Logical nullish assignment

The logical nullish assignment operator ??= assigns value to left operand only when it is nullish ( null or undefined ).

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free

Logical OR assignment (||=)

The logical OR assignment ( ||= ) operator only evaluates the right operand and assigns to the left if the left operand is falsy .

Description

Logical OR assignment short-circuits , meaning that x ||= y is equivalent to x || (x = y) , except that the expression x is only evaluated once.

No assignment is performed if the left-hand side is not falsy, due to short-circuiting of the logical OR operator. For example, the following does not throw an error, despite x being const :

Neither would the following trigger the setter:

In fact, if x is not falsy, y is not evaluated at all.

Setting default content

If the "lyrics" element is empty, display a default value:

Here the short-circuit is especially beneficial, since the element will not be updated unnecessarily and won't cause unwanted side-effects such as additional parsing or rendering work, or loss of focus, etc.

Note: Pay attention to the value returned by the API you're checking against. If an empty string is returned (a falsy value), ||= must be used, so that "No lyrics." is displayed instead of a blank space. However, if the API returns null or undefined in case of blank content, ??= should be used instead.

Specifications

Browser compatibility

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• Logical OR ( || )
• Nullish coalescing operator ( ?? )
• Bitwise OR assignment ( |= )

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.

• DSA with JS - Self Paced
• JS Tutorial
• JS Exercise
• JS Interview Questions
• JS Operator
• JS Projects
• JS Examples
• JS Free JS Course
• JS A to Z Guide
• JS Formatter

Conditional Statements in JavaScript

JavaScript conditional statements allow you to execute specific blocks of code based on conditions. If the condition is met, a particular block of code will run; otherwise, another block of code will execute based on the condition.

There are several methods that can be used to perform Conditional Statements in JavaScript.

This table outlines the key characteristics and use cases of each type of conditional statement. Now let’s understand each conditional statement in detail along with the examples.

JavaScript Conditional statements Examples:

1. using if statement.

The if statement is used to evaluate a particular condition. If the condition holds true, the associated code block is executed.

Example: In this example, we are using the if statement to find given number is even or odd.

Explanation: This JavaScript code determines if the variable `num` is even or odd using the modulo operator `%`. If `num` is divisible by 2 without a remainder, it logs “Given number is even number.” Otherwise, it logs “Given number is odd number.”

2. Using if-else Statement

The if-else statement will perform some action for a specific condition. Here we are using the else statement in which the else statement is written after the if statement and it has no condition in their code block.

Example: In this example, we are using if-else conditional statement to check the driving licence eligibility date.

Explanation: This JavaScript code checks if the variable `age` is greater than or equal to 18. If true, it logs “You are eligible for a driving license.” Otherwise, it logs “You are not eligible for a driving license.” This indicates eligibility for driving based on age.

3. else if Statement

The else if statement in JavaScript allows handling multiple possible conditions and outputs, evaluating more than two options based on whether the conditions are true or false.

Example: In this example, we are using the above-explained approach.

Explanation: This JavaScript code determines whether the constant `num` is positive, negative, or zero. If `num` is greater than 0, it logs “Given number is positive.” If `num` is less than 0, it logs “Given number is negative.” If neither condition is met (i.e., `num` is zero), it logs “Given number is zero.”

4. Using Switch Statement (JavaScript Switch Case)

As the number of conditions increases, you can use multiple else-if statements in JavaScript. but when we dealing with many conditions, the switch statement may be a more preferred option.

Example: In this example, we find a branch name Based on the student’s marks, this switch statement assigns a specific engineering branch to the variable Branch. The output displays the student’s branch name,

Explanation:

This JavaScript code assigns a branch of engineering to a student based on their marks. It uses a switch statement with cases for different mark ranges. The student’s branch is determined according to their marks and logged to the console.

5. Using Ternary Operator ( ?: )

The conditional operator, also referred to as the ternary operator (?:), is a shortcut for expressing conditional statements in JavaScript.

Example: In this example, we use the ternary operator to check if the user’s age is 18 or older. It prints eligibility for voting based on the condition.

Explanation: This JavaScript code checks if the variable `age` is greater than or equal to 18. If true, it assigns the string “You are eligible to vote.” to the variable `result`. Otherwise, it assigns “You are not eligible to vote.” The value of `result` is then logged to the console.

6. Nested if…else

Nested if…else statements in JavaScript allow us to create complex conditional logic by checking multiple conditions in a hierarchical manner. Each if statement can have an associated else block, and within each if or else block, you can nest another if…else statement. This nesting can continue to multiple levels, but it’s important to maintain readability and avoid excessive complexity.

Example: This example demonstrates how nested if…else statements can be used to handle different scenarios based on multiple conditions.

Explanation: In this example, the outer if statement checks the weather variable. If it’s “sunny,” it further checks the temperature variable to determine the type of day it is (hot, warm, or cool). Depending on the values of weather and temperature, different messages will be logged to the console.

Please Login to comment...

Similar reads.

• Web Technologies
• javascript-basics
• How to Get a Free SSL Certificate
• Best SSL Certificates Provider in India
• Elon Musk's xAI releases Grok-2 AI assistant
• What is OpenAI SearchGPT? How it works and How to Get it?
• Full Stack Developer Roadmap [2024 Updated]

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

Learn JavaScript Operators – Logical, Comparison, Ternary, and More JS Operators With Examples

JavaScript has many operators that you can use to perform operations on values and variables (also called operands)

Based on the types of operations these JS operators perform, we can divide them up into seven groups:

Arithmetic Operators

Assignment operators, comparison operators, logical operators.

• Ternary Operators

The typeof Operator

Bitwise operators.

In this handbook, you're going to learn how these operators work with examples. Let's start with arithmetic operators.

The arithmetic operators are used to perform mathematical operations like addition and subtraction.

These operators are frequently used with number data types, so they are similar to a calculator. The following example shows how you can use the + operator to add two variables together:

Here, the two variables x and y are added together using the plus + operator. We also used the console.log() method to print the result of the operation to the screen.

You can use operators directly on values without assigning them to any variable too:

In JavaScript, we have 8 arithmetic operators in total. They are:

• Subtraction -
• Multiplication *
• Remainder %
• Exponentiation **
• Increment ++
• Decrement --

Let's see how these operators work one by one.

1. Addition operator

The addition operator + is used to add two or more numbers together. You've seen how this operator works previously, but here's another example:

You can use the addition operator on both integer and floating numbers.

2. Subtraction operator

The subtraction operator is marked by the minus sign − and you can use it to subtract the right operand from the left operand.

For example, here's how to subtract 3 from 5:

3. Multiplication operator

The multiplication operator is marked by the asterisk * symbol, and you use it to multiply the value on the left by the value on the right of the operator.

4. Division operator

The division operator / is used to divide the left operand by the right operand. Here are some examples of using the operator:

5. Remainder operator

The remainder operator % is also known as the modulo or modulus operator. This operator is used to calculate the remainder after a division has been performed.

A practical example should make this operator easier to understand, so let's see one:

The number 10 can't be divided by 3 perfectly. The result of the division is 3 with a remainder of 1. The remainder operator simply returns that remainder number.

If the left operand can be divided with no remainder, then the operator returns 0.

This operator is commonly used when you want to check if a number is even or odd. If a number is even, dividing it by 2 will result in a remainder of 0, and if it's odd, the remainder will be 1.

6. Exponentiation operator

The exponentiation operator is marked by two asterisks ** . It's one of the newer JavaScript operators and you can use it to calculate the power of a number (based on its exponent).

For example, here's how to calculate 10 to the power of 3:

Here, the number 10 is multiplied by itself 3 times (10 10 10)

The exponentiation operator gives you an easy way to find the power of a specific number.

7. Increment operator

The increment ++ operator is used to increase the value of a number by one. For example:

This operator gives you a faster way to increase a variable value by one. Without the operator, here's how you increment a variable:

Using the increment operator allows you to shorten the second line. You can place this operator before or next to the variable you want to increment:

Both placements shown above are valid. The difference between prefix (before) and postfix (after) placements is that the prefix position will execute the operator after that line of code has been executed.

Consider the following example:

Here, you can see that placing the increment operator next to the variable will print the variable as if it has not been incremented.

When you place the operator before the variable, then the number will be incremented before calling the console.log() method.

8. Decrement operator

The decrement -- operator is used to decrease the value of a number by one. It's the opposite of the increment operator:

Please note that you can only use increment and decrement operators on a variable. An error occurs when you try to use these operators directly on a number value:

You can't use increment or decrement operator on a number directly.

Arithmetic operators summary

Now you've learned the 8 types of arithmetic operators. Excellent! Keep in mind that you can mix these operators to perform complex mathematical equations.

For example, you can perform an addition and multiplication on a set of numbers:

The order of operations in JavaScript is the same as in mathematics. Multiplication, division, and exponentiation take a higher priority than addition or subtraction (remember that acronym PEMDAS? Parentheses, exponents, multiplication and division, addition and subtraction – there's your order of operations).

You can use parentheses () to change the order of the operations. Wrap the operation you want to execute first as follows:

When using increment or decrement operators together with other operators, you need to place the operators in a prefix position as follows:

This is because a postfix increment or decrement operator will not be executed together with other operations in the same line, as I have explained previously.

Let's try some exercises. Can you guess the result of these operations?

And that's all for arithmetic operators. You've done a wonderful job learning about these operators.

Let's take a short five-minute break before proceeding to the next type of operators.

The second group of operators we're going to explore is the assignment operators.

Assignment operators are used to assign a specific value to a variable. The basic assignment operator is marked by the equal = symbol, and you've already seen this operator in action before:

After the basic assignment operator, there are 5 more assignment operators that combine mathematical operations with the assignment. These operators are useful to make your code clean and short.

For example, suppose you want to increment the x variable by 2. Here's how you do it with the basic assignment operator:

There's nothing wrong with the code above, but you can use the addition assignment += to rewrite the second line as follows:

There are 7 kinds of assignment operators that you can use in JavaScript:

The arithmetic operators you've learned in the previous section can be combined with the assignment operator except the increment and decrement operators.

Let's have a quick exercise. Can you guess the results of these assignments?

Now you've learned about assignment operators. Let's continue and learn about comparison operators.

As the name implies, comparison operators are used to compare one value or variable with something else. The operators in this category always return a boolean value: either true or false .

For example, suppose you want to compare if a variable's value is greater than 1. Here's how you do it:

The greater than > operator checks if the value on the left operand is greater than the value on the right operand.

There are 8 kinds of comparison operators available in JavaScript:

Here are some examples of using comparison operators:

The comparison operators are further divided in two types: relational and equality operators.

The relational operators compare the value of one operand relative to the second operand (greater than, less than)

The equality operators check if the value on the left is equal to the value on the right. They can also be used to compare strings like this:

String comparisons are case-sensitive, as shown in the example above.

JavaScript also has two versions of the equality operators: loose and strict.

In strict mode, JavaScript will compare the values without performing a type coercion. To enable strict mode, you need to add one more equal = symbol to the operation as follows:

Since type coercion might result in unwanted behavior, you should use the strict equality operators anytime you do an equality comparison.

Logical operators are used to check whether one or more expressions result in either true or false .

There are three logical operators available in JavaScript:

These operators can only return Boolean values. For example, you can determine whether '7 is greater than 2' and '5 is greater than 4':

These logical operators follow the laws of mathematical logic:

• && AND operator – if any expression returns false , the result is false
• || OR operator – if any expression returns true , the result is true
• ! NOT operator – negates the expression, returning the opposite.

Let's do a little exercise. Try to run these statements on your computer. Can you guess the results?

These logical operators will come in handy when you need to assert that a specific requirement is fulfilled in your code.

Let's say a happyLife requires a job with highIncome and supportiveTeam :

Based on the requirements, you can use the logical AND operator to check whether you have both requirements. When one of the requirements is false , then happyLife equals false as well.

Ternary Operator

The ternary operator (also called the conditional operator) is the only JavaScipt operator that requires 3 operands to run.

Let's imagine you need to implement some specific logic in your code. Suppose you're opening a shop to sell fruit. You give a $3 discount when the total purchase is $20 or more. Otherwise, you give a $1 discount.

You can implement the logic using an if..else statement as follows:

The code above works fine, but you can use the ternary operator to make the code shorter and more concise as follows:

The syntax for the ternary operator is condition ? expression1 : expression2 .

You need to write the condition to evaluate followed by a question ? mark.

Next to the question mark, you write the expression to execute when the condition evaluates to true , followed by a colon : symbol. You can call this expression1 .

Next to the colon symbol, you write the expression to execute when the condition evaluates to false . This is expression2 .

As the example above shows, the ternary operator can be used as an alternative to the if..else statement.

The typeof operator is the only operator that's not represented by symbols. This operator is used to check the data type of the value you placed on the right side of the operator.

Here are some examples of using the operator:

The typeof operator returns the type of the data as a string. The 'number' type represents both integer and float types, the string and boolean represent their respective types.

Arrays, objects, and the null value are of object type, while undefined has its own type.

Bitwise operators are operators that treat their operands as a set of binary digits, but return the result of the operation as a decimal value.

These operators are rarely used in web development, so you can skip this part if you only want to learn practical stuff. But if you're interested to know how they work, then let me show you an example.

A computer uses a binary number system to store decimal numbers in memory. The binary system only uses two numbers, 0 and 1, to represent the whole range of decimal numbers we humans know.

For example, the decimal number 1 is represented as binary number 00000001, and the decimal number 2 is represented as 00000010.

I won't go into detail on how to convert a decimal number into a binary number as that's too much to include in this guide. The main point is that the bitwise operators operate on these binary numbers.

If you want to find the binary number from a specific decimal number, you can Google for the "decimal to binary calculator".

There are 7 types of bitwise operators in JavaScript:

• Left Shift <<
• Right Shift >>
• Zero-fill Right Shift >>>

Let's see how they work.

1. Bitwise AND operator

The bitwise operator AND & returns a 1 when the number 1 overlaps in both operands. The decimal numbers 1 and 2 have no overlapping 1, so using this operator on the numbers return 0:

2. Bitwise OR operator

On the other hand, the bitwise operator OR | returns all 1s in both decimal numbers.

The binary number 00000011 represents the decimal number 3, so the OR operator above returns 3.

Bitwise XOR operator

The Bitwise XOR ^ looks for the differences between two binary numbers. When the corresponding bits are the same, it returns 0:

5 = 00000101

Bitwise NOT operator

Bitwise NOT ~ operator inverts the bits of a decimal number so 0 becomes 1 and 1 becomes 0:

Bitwise Left Shift operator

Bitwise Left Shift << shifts the position of the bit by adding zeroes from the right.

The excess bits are then discarded, changing the decimal number represented by the bits. See the following example:

The right operand is the number of zeroes you will add to the left operand.

Bitwise Right Shift operator

Bitwise Right Shift >> shifts the position of the bits by adding zeroes from the left. It's the opposite of the Left Shift operator:

Bitwise Zero-fill Right Shift operator

Also known as Unsigned Right Shift operator, the Zero-fill Right Shift >>> operator is used to shift the position of the bits to the right, while also changing the sign bit to 0 .

This operator transforms any negative number into a positive number, so you can see how it works when passing a negative number as the left operand:

In the above example, you can see that the >> and >>> operators return different results. The Zero-fill Right Shift operator has no effect when you use it on a positive number.

Now you've learned how the bitwise operators work. If you think they are confusing, then you're not alone! Fortunately, these operators are scarcely used when developing web applications.

You don't need to learn them in depth. It's enough to know what they are.

In this tutorial, you've learned the 7 types of JavaScript operators: Arithmetic, assignment, comparison, logical, ternary, typeof, and bitwise operators.

These operators can be used to manipulate values and variables to achieve a desired outcome.

Congratulations on finishing this guide!

If you enjoyed this article and want to take your JavaScript skills to the next level, I recommend you check out my new book Beginning Modern JavaScript here .

The book is designed to be easy to understand and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide that will help you understand how to use JavaScript to create a dynamic application.

Here's my promise: You will actually feel like you understand what you're doing with JavaScript.

Until next time!

Read more posts .

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

Choice workflow state

A Choice state ( "Type": "Choice" ) adds conditional logic to a state machine.

In addition to most of the common state fields , Choice states contains the following additional fields.

An array of Choice Rules that determines which state the state machine transitions to next. You use a comparison operator in a Choice Rule to compare an input variable with a specific value. For example, using Choice Rules you can compare if an input variable is greater than or less than 100.

When a Choice state is run, it evaluates each Choice Rule to true or false. Based on the result of this evaluation, Step Functions transitions to the next state in the workflow.

You must define at least one rule in the Choice state.

The name of the state to transition to if none of the transitions in Choices is taken.

Choice states don't support the End field. In addition, they use Next only inside their Choices field.

To deploy an example of a workflow that uses a Choice state to your AWS account, see Module 5 - Choice State and Map State of The AWS Step Functions Workshop .

Choice Rules

A Choice state must have a Choices field whose value is a non-empty array. Each element in this array is an object called Choice Rule, which contains the following:

A comparison – Two fields that specify an input variable to compare, the type of comparison, and the value to compare the variable to. Choice Rules support comparison between two variables. Within a Choice Rule, the value of variable can be compared with another value from the state input by appending Path to name of supported comparison operators. The values of Variable and Path fields in a comparison must be valid Reference Paths .

A Next field – The value of this field must match a state name in the state machine.

The following example checks whether the numerical value is equal to 1 .

The following example checks whether the string is equal to MyString .

The following example checks whether the string is greater than MyStringABC .

The following example checks whether the string is null.

The following example shows how the StringEquals rule is only evaluated when $.keyThatMightNotExist exists because of the preceding IsPresent Choice Rule.

The following example checks whether a pattern with a wildcard matches.

The following example checks whether the timestamp is equal to 2001-01-01T12:00:00Z .

The following example compares a variable with another value from the state input.

Step Functions examines each of the Choice Rules in the order listed in the Choices field. Then it transitions to the state specified in the Next field of the first Choice Rule in which the variable matches the value according to the comparison operator.

The following comparison operators are supported:

BooleanEquals , BooleanEqualsPath

IsTimestamp

NumericEquals , NumericEqualsPath

NumericGreaterThan , NumericGreaterThanPath

NumericGreaterThanEquals , NumericGreaterThanEqualsPath

NumericLessThan , NumericLessThanPath

NumericLessThanEquals , NumericLessThanEqualsPath

StringEquals , StringEqualsPath

StringGreaterThan , StringGreaterThanPath

StringGreaterThanEquals , StringGreaterThanEqualsPath

StringLessThan , StringLessThanPath

StringLessThanEquals , StringLessThanEqualsPath

StringMatches

TimestampEquals , TimestampEqualsPath

TimestampGreaterThan , TimestampGreaterThanPath

TimestampGreaterThanEquals , TimestampGreaterThanEqualsPath

TimestampLessThan , TimestampLessThanPath

TimestampLessThanEquals , TimestampLessThanEqualsPath

For each of these operators, the corresponding value must be of the appropriate type: string, number, Boolean, or timestamp. Step Functions doesn't attempt to match a numeric field to a string value. However, because timestamp fields are logically strings, it's possible that a field considered to be a timestamp can be matched by a StringEquals comparator.

For interoperability, don't assume that numeric comparisons work with values outside the magnitude or precision that the IEEE 754-2008 binary64 data type represents. In particular, integers outside of the range [-2 53 +1, 2 53 -1] might fail to compare in the expected way.

Timestamps (for example, 2016-08-18T17:33:00Z ) must conform to RFC3339 profile ISO 8601 , with further restrictions:

An uppercase T must separate the date and time portions.

An uppercase Z must denote that a numeric time zone offset isn't present.

To understand the behavior of string comparisons, see the Java compareTo documentation .

The values of the And and Or operators must be non-empty arrays of Choice Rules that must not themselves contain Next fields. Likewise, the value of a Not operator must be a single Choice Rule that must not contain Next fields.

You can create complex, nested Choice Rules using And , Not , and Or . However, the Next field can appear only in a top-level Choice Rule.

String comparison against patterns with one or more wildcards (“*”) can be performed with the StringMatches comparison operator. The wildcard character is escaped by using the standard \\ (Ex: “\\*”) . No characters other than “*” have any special meaning during matching.

Choice State Example

The following is an example of a Choice state and other states that it transitions to.

You must specify the $.type field. If the state input doesn't contain the $.type field, the execution fails and an error is displayed in the execution history. You can only specify a string in the StringEquals field that matches a literal value. For example, "StringEquals": "Buy" .

In this example, the state machine starts with the following input value.

Step Functions transitions to the ValueInTwenties state, based on the value field.

If there are no matches for the Choice state's Choices , the state provided in the Default field runs instead. If the Default state isn't specified, the execution fails with an error.

To use the Amazon Web Services Documentation, Javascript must be enabled. Please refer to your browser's Help pages for instructions.

Thanks for letting us know we're doing a good job!

If you've got a moment, please tell us what we did right so we can do more of it.

Thanks for letting us know this page needs work. We're sorry we let you down.

If you've got a moment, please tell us how we can make the documentation better.

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

Javascript AND operator within assignment

I know that in JavaScript you can do:

where the variable oneOrTheOther will take on the value of the first expression if it is not null , undefined , or false . In which case it gets assigned to the value of the second statement.

However, what does the variable oneOrTheOther get assigned to when we use the logical AND operator?

What would happen when someOtherVar is non-false? What would happen when someOtherVar is false?

Just learning JavaScript and I'm curious as to what would happen with assignment in conjunction with the AND operator.

• variable-assignment
• logical-operators
• and-operator

• 3 Try it. jsfiddle.net/uv6LR –  icktoofay Commented Jul 2, 2010 at 5:30
• 1 see my answer from a related post.. stackoverflow.com/questions/3088098/… –  Anurag Commented Jul 2, 2010 at 5:59
• In your example, if someOtherVar is undefined it will throw an error. Using window.someOtherVar will allow it to take on the second value if it someOtherVar is undefined. –  Rich Commented May 13, 2015 at 0:11

7 Answers 7

Basically, the Logical AND operator ( && ), will return the value of the second operand if the first is truthy , and it will return the value of the first operand if it is by itself falsy , for example:

Note that falsy values are those that coerce to false when used in boolean context, they are null , undefined , 0 , NaN , an empty string, and of course false , anything else coerces to true .

• Ah ok. Thanks. That makes sense as, after all, it's the reverse of the OR operator. –  Alex Commented Jul 2, 2010 at 5:29
• Thus, when used with Boolean values, && returns true if both operands are true; otherwise, returns false. ( developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… ) –  Bardelman Commented Oct 22, 2015 at 11:00
• I love the example. It would be great if you'd include a bit about && being called a 'guard' operator that's good for null checks as that's good context to have. You could even cite Douglas Crockford here: javascript.crockford.com/survey.html –  Akrikos Commented Apr 21, 2016 at 14:02

&& is sometimes called a guard operator.

it can be used to set the value only if the indicator is truthy.

• 3 Really clear answer. The other answers left me rather baffled, but this is a very clear way of expressing it. Thank you! –  ctaymor Commented Jul 23, 2014 at 20:18
• I think this answer is clearly wrong. After the above statement has been executed the value of 'variable' is the value of the expression "indicator && value" whatever that may be. So the value of the variable on the left side of the assignment is set always to something. regardless of what happens on the right side (unless an error is thrown). No? –  Panu Logic Commented Dec 29, 2020 at 21:46

Beginners Example

If you are trying to access "user.name" but then this happens:

Fear not. You can use ES6 optional chaining on modern browsers today.

See MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Here's some deeper explanations on guard operators that may prove useful in understanding.

Before optional chaining was introduced, you would solve this using the && operator in an assignment or often called the guard operator since it "guards" from the undefined error happening.

Here are some examples you may find odd but keep reading as it is explained later.

Explanation : In the guard operation, each term is evaluated left-to-right one at a time . If a value evaluated is falsy, evaluation stops and that value is then assigned. If the last item is reached, it is then assigned whether or not it is falsy.

falsy means it is any one of these values undefined, false, 0, null, NaN, '' and truthy just means NOT falsy.

Bonus: The OR Operator

The other useful strange assignment that is in practical use is the OR operator which is typically used for plugins like so:

which will only assign the code portion if "this.myWidget" is falsy. This is handy because you can declare code anywhere and multiple times not caring if its been assigned or not previously, knowing it will only be assigned once since people using a plugin might accidentally declare your script tag src multiple times.

Explanation : Each value is evaluated from left-to-right, one at a time . If a value is truthy, it stops evaluation and assigns that value, otherwise, keeps going, if the last item is reached, it is assigned regardless if it is falsy or not.

Extra Credit: Combining && and || in an assignment

You now have ultimate power and can do very strange things such as this very odd example of using it in a palindrome.

In depth explanation here: Palindrome check in Javascript

Happy coding.

• thank you, awesome example! Help me a lot to understand && and || operators! +1 –  Lucky Commented Jul 17, 2015 at 19:27
• Thank you for this answer! I'm curious how long will JS keep trying to access the deepest level property? For example, if you were waiting for a response to hit your backend, is it safe to use var x = y && y.z ? –  Scott Savarie Commented Jan 8, 2018 at 8:29

Quoting Douglas Crockford 1 :

The && operator produces the value of its first operand if the first operand is falsy. Otherwise it produces the value of the second operand.

1 Douglas Crockford: JavaScript: The Good Parts - Page 16

• Crockford also calls it the 'guard operator' here: javascript.crockford.com/survey.html –  Akrikos Commented Apr 21, 2016 at 14:00

According to Annotated ECMAScript 5.1 section 11.11 :

In case of the Logical OR operator(||),

expr1 || expr2 Returns expr1 if it can be converted to true; otherwise, returns expr2. Thus, when used with Boolean values, || returns true if either operand is true; if both are false, returns false.

In the given example,

var oneOrTheOther = someOtherVar || "these are not the droids you are looking for...move along";

The result would be the value of someOtherVar, if Boolean(someOtherVar) is true .(Please refer. Truthiness of an expression ). If it is false the result would be "these are not the droids you are looking for...move along";

And In case of the Logical AND operator(&&),

Returns expr1 if it can be converted to false; otherwise, returns expr2. Thus, when used with Boolean values, && returns true if both operands are true; otherwise, returns false.

case 1: when Boolean(someOtherVar) is false: it returns the value of someOtherVar.

case 2: when Boolean(someOtherVar) is true: it returns "these are not the droids you are looking for...move along".

I see this differently then most answers, so I hope this helps someone.

To calculate an expression involving || , you can stop evaluating the expression as soon as you find a term that is truthy. In that case, you have two pieces of knowledge, not just one:

• Given the term that is truthy, the whole expression evaluates to true.
• Knowing 1, you can terminate the evaluation and return the last evaluated term.

For instance, false || 5 || "hello" evaluates up until and including 5, which is truthy, so this expression evaluates to true and returns 5.

So the expression's value is what's used for an if-statement, but the last evaluated term is what is returned when assigning a variable.

Similarly, evaluating an expression with && involves terminating at the first term which is falsy. It then yields a value of false and it returns the last term which was evaluated. (Edit: actually, it returns the last evaluated term which wasn't falsy. If there are none of those, it returns the first.)

If you now read all examples in the above answers, everything makes perfect sense :)

(This is just my view on the matter, and my guess as to how this actually works. But it's unverified.)

I have been seeing && overused here at work for assignment statements. The concern is twofold: 1) The 'indicator' check is sometimes a function with overhead that developers don't account for. 2) It is easy for devs to just see it as a safety check and not consider they are assigning false to their var. I like them to have a type-safe attitude, so I have them change this:

var currentIndex = App.instance && App.instance.rightSideView.getFocusItemIndex();

var currentIndex = App.instance && App.instance.rightSideView.getFocusItemIndex() || 0;

so they get an integer as expected.

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 variable-assignment logical-operators and-operator or ask your own question .

• The Overflow Blog
• Ryan Dahl explains why Deno had to evolve with version 2.0
• From PHP to JavaScript to Kubernetes: how one backend engineer evolved over time
• Featured on Meta
• We've made changes to our Terms of Service & Privacy Policy - July 2024
• Bringing clarity to status tag usage on meta sites
• Feedback requested: How do you use tag hover descriptions for curating and do...
• What does a new user need in a homepage experience on Stack Overflow?

Hot Network Questions

• Postdoc supervisor has stopped helping
• Which point on a hyperbola is closest to a circle
• Version of Dracula (Bram Stoker)
• In the US, can I buy iPhone and Android phones and claim them as expense?
• Does my AC vent air from the room to outside?
• How can I push back on my co-worker's changes that I disagree with?
• Efficiently tagging first and last of each object matching condition
• Can figere come with a dative?
• If you get pulled for secondary inspection at immigration, missing flight, will the airline rebook you?
• Short story in which the protagonist shrinks to the size of his model train set and is run over by one of his trains
• bash script quoting frustration
• Why would aliens want to invade Earth?
• Op Amp Feedback Resistors
• If physics can be reduced to mathematics (and thus to logic), does this mean that (physical) causation is ultimately reducible to implication?
• Why did Jesus choose to pray after they tried making him king?
• Is the Shroud of Turin about 2000 years old?
• How does quantum field theory affect the ontological tenability of composite objects?
• How to ensure a BSD licensed open source project is not closed in the future?
• Are there any original heat shield tiles on any of the retired space shuttles that flew to space?
• Is the error in translation of Genesis 19:5 deliberate?
• How did the cop infer from Uncle Aaron's statement that Miles has been visiting?
• Does gluing two points prevent simple connectedness?
• Fitting 10 pieces of pizza in a box
• what's the purpose of dependent claims?