conditional assignment js

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.

• If you have suggestions what to improve - please submit a GitHub issue or a pull request instead of commenting.
• If you can't understand something in the article – please elaborate.
• To insert few words of code, use the <code> tag, for several lines – wrap them in <pre> tag, for more than 10 lines – use a sandbox ( plnkr , jsbin , codepen …)

Lesson navigation

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

How to Use the Ternary Operator in JavaScript – JS Conditional Example

The ternary operator is a helpful feature in JavaScript that allows you to write concise and readable expressions that perform conditional operations on only one line.

In this article, you will learn why you may want to use the ternary operator, and you will see an example of how to use it. You will also learn some of the best practices to keep in mind when you do use it.

Let's get into it!

What Is The Ternary Operator in JavaScript?

The ternary operator ( ?: ), also known as the conditional operator, is a shorthand way of writing conditional statements in JavaScript – you can use a ternary operator instead of an if..else statement.

A ternary operator evaluates a given condition, also known as a Boolean expression, and returns a result that depends on whether that condition evaluates to true or false .

Why Use the Ternary Operator in JavaScript?

You may want to use the ternary operator for a few reasons:

• Your code will be more concise : The ternary operator has minimal syntax. You will write short conditional statements and fewer lines of code, which makes your code easier to read and understand.
• Your code will be more readable : When writing simple conditions, the ternary operator makes your code easier to understand in comparison to an if..else statement.
• Your code will be more organized : The ternary operator will make your code more organized and easier to maintain. This comes in handy when writing multiple conditional statements. The ternary operator will reduce the amount of nesting that occurs when using if..else statements.
• It provides flexibility : The ternary operator has many use cases, some of which include: assigning a value to a variable, rendering dynamic content on a web page, handling function arguments, validating data and handling errors, and creating complex expressions.
• It enhances performance : In some cases, the ternary operator can perform better than an if..else statement because the ternary operator gets evaluated in a single step.
• It always returns a value : The ternary operator always has to return something.

How to Use the Ternary Operator in JavaScript – a Syntax Overview

The operator is called "ternary" because it is composed of three parts: one condition and two expressions.

The general syntax for the ternary operator looks something similar to the following:

Let's break it down:

• condition is the Boolean expression you want to evaluate and determine whether it is true or false . The condition is followed by a question mark, ? .
• ifTrueExpression is executed if the condition evaluates to true .
• ifFalseExpression is executed if the condition evaluates to false .
• The two expressions are separated by a colon, . .

The ternary operator always returns a value that you assign to a variable:

Next, let's look at an example of how the ternary operator works.

How to Use the Ternary Operator in JavaScript

Say that you want to check whether a user is an adult:

In this example, I used the ternary operator to determine whether a user's age is greater than or equal to 18 .

Firstly, I used the prompt() built-in JavaScript function.

This function opens a dialog box with the message What is your age? and the user can enter a value.

I store the user's input in the age variable.

Next, the condition ( age >= 18 ) gets evaluated.

If the condition is true , the first expression, You are an adult , gets executed.

Say the user enters the value 18 .

The condition age >= 18 evaluates to true :

If the condition is false , the second expression, You are not an adult yet , gets executed.

Say the user enters the value 17 .

The condition age >= 18 now evaluates to false :

As mentioned earlier, you can use the ternary operator instead of an if..else statement.

Here is how you would write the same code used in the example above using an if..else statement:

Ternary Operator Best Practices in JavaScript

Something to keep in mind when using the ternary operator is to keep it simple and don't overcomplicate it.

The main goal is for your code to be readable and easily understandable for the rest of the developers on your team.

So, consider using the ternary operator for simple statements and as a concise alternative to if..else statements that can be written in one line.

If you do too much, it can quickly become unreadable.

For example, in some cases, using nested ternary operators can make your code hard to read:

If you find yourself nesting too many ternary operators, consider using if...else statements instead.

Wrapping Up

Overall, the ternary operator is a useful feature in JavaScript as it helps make your code more readable and concise.

Use it when a conditional statement can be written on only one line and keep code readability in mind.

Thanks for reading, and happy coding! :)

Read more posts .

If this article was helpful, share it .

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

• Skip to main content
• Select language
• Skip to search
• Conditional (ternary) Operator

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.

Description

If condition is true , the operator returns the value of expr1 ; otherwise, it returns the value of expr2 . For example, to display a different message based on the value of the isMember variable, you could use this statement:

You can also assign variables depending on a ternary result:

Multiple ternary evaluations are also possible (note: the conditional operator is right associative):

You can also use multiple conditions like in a multiple-conditions IF statement

Note: The parentheses are not required, and do not affect the functionality. They are there to help visualize how the outcome is processed.

You can also use ternary evaluations in free space in order to do different operations:

You can also do more than one single operation per case, separating them with a comma:

You can also do more than one operation during the assignation of a value. In this case, the last comma-separated value of the parenthesis will be the value to be assigned .

Specifications

Browser compatibility

• if statement

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()
• Arithmetic operators
• Array comprehensions
• Assignment operators
• Bitwise operators
• Comma operator
• Comparison operators
• 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 delete non-configurable array element
• 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

Home » JavaScript Tutorial » JavaScript Ternary Operator

JavaScript Ternary Operator

Summary : in this tutorial, you will learn how to use the JavaScript ternary operator to make your code more concise.  

Introduction to JavaScript ternary operator

When you want to execute a block if a condition evaluates to true , you often use an if…else statement. For example:

In this example, we show a message that a person can drive if the age is greater than or equal to 16. Alternatively, you can use a ternary operator instead of the if-else statement like this:

Or you can use the ternary operator in an expression as follows:

Here’s the syntax of the ternary operator:

In this syntax, the condition is an expression that evaluates to a Boolean value, either true or false .

If the condition is true , the first expression ( expresionIfTrue ) executes. If it is false, the second expression ( expressionIfFalse ) executes.

The following shows the syntax of the ternary operator used in an expression:

In this syntax, if the condition is true , the variableName will take the result of the first expression ( expressionIfTrue ) or expressionIfFalse otherwise.

JavaScript ternary operator examples

Let’s take some examples of using the ternary operator.

1) Using the JavaScript ternary operator to perform multiple statements

The following example uses the ternary operator to perform multiple operations, where each operation is separated by a comma. For example:

In this example, the returned value of the ternary operator is the last value in the comma-separated list.

2) Simplifying ternary operator example

See the following example:

If the locked is 1, then the canChange variable is set to false , otherwise, it is set to true . In this case, you can simplify it by using a Boolean expression as follows:

3) Using multiple JavaScript ternary operators example

The following example shows how to use two ternary operators in the same expression:

It’s a good practice to use the ternary operator when it makes the code easier to read. If the logic contains many if...else statements, you should avoid using the ternary operators.

• Use the JavaScript ternary operator ( ?: )to make the code more concise.

• 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
• JavaScript Tutorial

JavaScript Basics

• Introduction to JavaScript
• JavaScript Versions
• How to Add JavaScript in HTML Document?
• JavaScript Statements
• JavaScript Syntax
• JavaScript Output
• JavaScript Comments

JS Variables & Datatypes

• Variables and Datatypes in JavaScript
• Global and Local variables in JavaScript
• JavaScript Let
• JavaScript Const
• JavaScript var

JS Operators

• JavaScript Operators
• Operator precedence in JavaScript
• JavaScript Arithmetic Operators
• JavaScript Assignment Operators
• JavaScript Comparison Operators
• JavaScript Logical Operators
• JavaScript Bitwise Operators

JavaScript Ternary Operator

• JavaScript Comma Operator
• JavaScript Unary Operators
• JavaScript Relational operators
• JavaScript String Operators
• JavaScript Loops
• 7 Loops of JavaScript
• JavaScript For Loop
• JavaScript While Loop
• JavaScript for-in Loop
• JavaScript for...of Loop
• JavaScript do...while Loop

JS Perfomance & Debugging

• JavaScript | Performance
• Debugging in JavaScript
• JavaScript Errors Throw and Try to Catch
• Objects in Javascript
• Introduction to Object Oriented Programming in JavaScript
• JavaScript Objects
• Creating objects in JavaScript
• JavaScript JSON Objects
• JavaScript Object Reference

JS Function

• Functions in JavaScript
• How to write a function in JavaScript ?
• JavaScript Function Call
• Different ways of writing functions in JavaScript
• Difference between Methods and Functions in JavaScript
• Explain the Different Function States in JavaScript
• JavaScript Function Complete Reference
• JavaScript Arrays
• JavaScript Array Methods
• Best-Known JavaScript Array Methods
• What are the Important Array Methods of JavaScript ?
• JavaScript Array Reference
• JavaScript Strings
• JavaScript String Methods
• JavaScript String Reference
• JavaScript Numbers
• How numbers are stored in JavaScript ?
• How to create a Number object using JavaScript ?
• JavaScript Number Reference
• JavaScript Math Object
• What is the use of Math object in JavaScript ?
• JavaScript Math Reference
• JavaScript Map
• What is JavaScript Map and how to use it ?
• JavaScript Map Reference
• Sets in JavaScript
• How are elements ordered in a Set in JavaScript ?
• How to iterate over Set elements in JavaScript ?
• How to sort a set in JavaScript ?
• JavaScript Set Reference
• JavaScript Date
• JavaScript Promise
• JavaScript BigInt
• JavaScript Boolean
• JavaScript Proxy/Handler
• JavaScript WeakMap
• JavaScript WeakSet
• JavaScript Function Generator
• JavaScript JSON
• Arrow functions in JavaScript
• JavaScript this Keyword
• Strict mode in JavaScript
• Introduction to ES6
• JavaScript Hoisting
• Async and Await in JavaScript

JavaScript Exercises

• JavaScript Exercises, Practice Questions and Solutions

The JavaScript Ternary Operator, also known as the Conditional Operator , offers a better approach to expressing conditional (if-else) statements. It operates on three operands: a condition, a value to return if the condition is true, and a value to return if the condition is false. This article is a comprehensive guide to understanding and using the Ternary Operator effectively in JavaScript.

Characteristics of Ternary Operator

• The expression consists of three operands: the condition, value if true, and value if false.
• The evaluation of the condition should result in either a true/false or a boolean value.
• The true value lies between “ ? ” & “ : ” and is executed if the condition returns true. Similarly, the false value lies after “:” and is executed if the condition returns false.

Example 1: Below is an example of the Ternary Operator.

Example 2: Below is an example of the Ternary Operator.

Example 3: Below is an example of nested ternary operators. 

Please Login to comment...

Similar reads.

• Web Technologies
• javascript-operators

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

⚠️ I'm actively rebuilding this site in Astro incrementally, and not waiting til I'm done! Something something work in public. See previous version .

Conditionally Add to an Object or Array in JavaScript

In the course of my work, it’s not uncommon that I need to conditionally add properties to objects, or (probably less commonly) values to arrays. Let’s talk about how to do both. This is the piece of code I’ll refer to:

First, defining a few things.

If you’re familiar with the && operator, the ternary operator, and spread syntax, skip ahead .

The logical && (AND) operator

&& is a logical operator. Logical operators are used to “reason” about Booleans. The && operator is one of three available in JavaScript ( Not material here, but for completeness — the two others are the || (OR) operator and ?? (nullish coalescing) operator . ).

If the first expression (on the left side) is truthy (“considered true when encountered in a Boolean context”), return the second expression (on the right side).

If the first expression is falsy (“considered false when encountered in a Boolean context”), return the first expression .

Short-circuit evaluation

The && expression is evaluated left to right. If the first expression is falsy, the full expression is short-circuit evaluated to the falsy expression (meaning the second expression is never evaluated). This is what lets us do things like safely access nested properties on an object:

The conditional (ternary) operator

The ternary operator can be thought of as a shortcut for the if statement. It’s made of of three parts:

• A condition followed by a question mark ( ? )
• An expression to execute if the condition is truthy, followed by a colon ( : )
• an expression to execute if the condition is falsy

An example. The two functions below accomplish the exact same thing using different syntax. The first uses if logic, and the second uses a ternary

The spread operator ( ... )

Spread syntax can be used to expand an iterable (like an array expression), or expand object properties .

Spreading an iterable:

Spreading object properties:

It can be used on iterables like an array or a string. It expands an iterable to its individual elements

Conditionally add a property to an object

To conditionally add a property to an object, we can make use of the && operator.

In the example above, in the first property definition on obj , the first expression ( trueCondition ) is true/truthy, so the second expression is returned, and then spread into the object.

In the second property definition, the first expression ( falseCondition ) is false/falsy, and so the first expression is returned (and the second expression is never evaluated, because of short-circuiting). It may seem a little confusing to spread a falsy expression, but the result is that it is ignored:

You don’t need parentheses in evaluating these expressions, but I prefer them, to make it clear that the spread operation applies to the result of the full expression.

Conditionally add a value to an array

Conditionally adding a value to an array looks a little different. Rather than using an && operator, we use a ternary operator.

Unlike the object spread example, if you attempt to spread on a falsy value in an array, you’ll get a TypeError:

Hence we need a ternary; Using a ternary, we can fall back to spreading an empty array. Then (assuming we’ve correctly provided two possible iterables) both possible returned expressions will be iterables:

JavaScript Operators, Conditionals & Functions

Share this article

JavaScript Operators

Conditional statements, frequently asked questions (faqs) about javascript operators, conditionals, and functions.

• Arithmetic Operators: Perform operations and manipulate data. For example, the addition operator (+) can be used to add two numbers together.
• Comparison Operators: Compare two or more values and return a boolean value (true or false) For example, using the greater than (>) operator to check if an integer variable is larger than another.
• Logical Operators: Used to connect two or more comparison operators and return a boolean value. For example, using the AND operator (&&) to see if a variable is between two values, i.e. that it is larger than one number and smaller the other.
• Conditional statements: Control the flow of a program based on certain conditions. For example, an if statement can be used to execute a block of code only if a certain condition is met.
• Functions: Encapsulate a set of statements to be used multiple times, making code more organized and reusable. Functions can also accept inputs and return outputs, allowing for more dynamic and flexible code.

Table of Contents

Assignment operators, subtraction, multiplication, strict equal, strict not equal, less than or equal to, greater than, greater than or equal to, operator precedence, declaration, parameters and arguments.

Disclaimer: This guide is intended for complete beginners to JavaScript and programming. As such, many concepts will be presented in a simplified manner.

Arithmetic Operators

Comparison operators, logical operators.

• Grouping ( () )
• Multiplication ( * )
• Division ( / )
• Modulus ( % )
• Addition ( + )
• Subtraction ( - )
• Less than ( < )
• Less than or equal ( <= )
• Greater than ( > )
• Greater than or equal ( >= )
• Equal ( = )
• Not equal ( != )
• Strict equal ( === )
• Strict not equal ( !== )
• And ( && )
• Assignment ( = )

A local variable is a variable that will only work inside a specific code block.

What is the significance of operator precedence in JavaScript?

Operator precedence in JavaScript determines the way operators are parsed concerning each other. Operators with higher precedence become the operands of operators with lower precedence. Understanding operator precedence is crucial as it helps to predict the outcome of an operation. For instance, multiplication (*) and division (/) have higher precedence than addition (+) and subtraction (-). Therefore, in an expression like 2 + 3 * 4, the multiplication happens first, resulting in 2 + 12 = 14, not 20.

How can I change the order of operations in JavaScript?

You can change the order of operations in JavaScript by using parentheses. The expressions inside parentheses are evaluated first. For example, in the expression (2 + 3) * 4, the addition operation is performed first because it’s inside the parentheses, resulting in 5 * 4 = 20.

What are conditional statements in JavaScript?

Conditional statements in JavaScript are used to perform different actions based on different conditions. The most common conditional statements are if, else if, and else. These statements allow the program to make decisions and execute the appropriate code block based on the condition’s truthiness.

How do JavaScript functions work?

Functions in JavaScript are blocks of code designed to perform a particular task. A JavaScript function is executed when something invokes it (calls it). Functions can be defined using the function keyword, followed by a name, and parentheses (). The code to be executed by the function is placed inside curly brackets {}.

What are the different types of operators in JavaScript?

JavaScript includes various types of operators such as arithmetic operators (+, -, *, /, %, ++, –), assignment operators (=, +=, -=, *=, /=, %=), comparison operators (==, ===, !=, !==, >, <, >=, <=), logical operators (&&, ||, !), and bitwise operators (&, |, ^, ~, <<, >>, >>>).

How does the ternary operator work in JavaScript?

The ternary operator is a shorthand way of writing an if-else statement. It’s called the ternary operator because it takes three operands – a condition, a result for true, and a result for false. For example, the code let result = (a > b) ? ‘a is greater’ : ‘b is greater’; will assign the string ‘a is greater’ to the result if a is greater than b, and ‘b is greater’ if a is not greater than b.

What is the difference between == and === operators in JavaScript?

The == operator checks for equality in value but not type. It performs type coercion if the variables being compared are not of the same type. On the other hand, the === operator, also known as the strict equality operator, checks for both value and type. It does not perform type coercion, so if the variables being compared are not of the same type, it will return false.

How can I define a function in JavaScript?

A function in JavaScript can be defined using the function keyword, followed by a unique function name, a list of parameters (that might be empty), and a statement block surrounded by curly braces. For example, function myFunction(parameter1, parameter2) { // code to be executed }.

What are JavaScript logical operators?

JavaScript logical operators are used to determine the logic between variables or values. The three logical operators are AND (&&), OR (||), and NOT (!). The AND operator returns true if both operands are true, the OR operator returns true if at least one operand is true, and the NOT operator returns the inverse of the given boolean value.

How does the switch statement work in JavaScript?

The switch statement in JavaScript is used to perform different actions based on different conditions. It’s a more efficient way to code when dealing with many conditions. The switch expression is evaluated once, and its value is compared with the values of each case. If there’s a match, the associated block of code is executed.

A web developer from Chicago who blogs about code and design, and enjoys losing at Age of Empires 2 in her spare time.

• Javascript Basics Tutorial
• Javascript - Home
• JavaScript - Overview
• JavaScript - Features
• JavaScript - Enabling
• JavaScript - Placement
• JavaScript - Syntax
• JavaScript - Hello World
• JavaScript - Console.log()
• JavaScript - Comments
• JavaScript - Variables
• JavaScript - let Statement
• JavaScript - Constants
• JavaScript - Data Types
• JavaScript - Type Conversions
• JavaScript - Strict Mode
• JavaScript - Reserved Keywords
• JavaScript Operators
• JavaScript - Operators
• JavaScript - Arithmetic Operators
• JavaScript - Comparison Operators
• JavaScript - Logical Operators
• JavaScript - Bitwise Operators
• JavaScript - Assignment Operators

JavaScript - Conditional Operators

• JavaScript - typeof Operator
• JavaScript - Nullish Coalescing Operator
• JavaScript - Delete Operator
• JavaScript - Comma Operator
• JavaScript - Grouping Operator
• JavaScript - Yield Operator
• JavaScript - Spread Operator
• JavaScript - Exponentiation Operator
• JavaScript - Operator Precedence
• JavaScript Control Flow
• JavaScript - If...Else
• JavaScript - While Loop
• JavaScript - For Loop
• JavaScript - For...in
• Javascript - For...of
• JavaScript - Loop Control
• JavaScript - Break Statement
• JavaScript - Continue Statement
• JavaScript - Switch Case
• JavaScript - User Defined Iterators
• JavaScript Functions
• JavaScript - Functions
• JavaScript - Function Expressions
• JavaScript - Function Parameters
• JavaScript - Default Parameters
• JavaScript - Function() Constructor
• JavaScript - Function Hoisting
• JavaScript - Self-Invoking Functions
• JavaScript - Arrow Functions
• JavaScript - Function Invocation
• JavaScript - Function call()
• JavaScript - Function apply()
• JavaScript - Function bind()
• JavaScript - Closures
• JavaScript - Variable Scope
• JavaScript - Global Variables
• JavaScript - Smart Function Parameters
• JavaScript Objects
• JavaScript - Number
• JavaScript - Boolean
• JavaScript - Strings
• JavaScript - Arrays
• JavaScript - Date
• JavaScript - DataView
• JavaScript - Math
• JavaScript - RegExp
• JavaScript - Symbol
• JavaScript - Sets
• JavaScript - WeakSet
• JavaScript - Maps
• JavaScript - WeakMap
• JavaScript - Iterables
• JavaScript - Reflect
• JavaScript - TypedArray
• JavaScript - Template Literals
• JavaScript - Tagged Templates
• Object Oriented JavaScript
• JavaScript - Objects
• JavaScript - Classes
• JavaScript - Object Properties
• JavaScript - Object Methods
• JavaScript - Static Methods
• JavaScript - Display Objects
• JavaScript - Object Accessors
• JavaScript - Object Constructors
• JavaScript - Native Prototypes
• JavaScript - ES5 Object Methods
• JavaScript - Encapsulation
• JavaScript - Inheritance
• JavaScript - Abstraction
• JavaScript - Polymorphism
• JavaScript - Destructuring Assignment
• JavaScript - Object Destructuring
• JavaScript - Array Destructuring
• JavaScript - Nested Destructuring
• JavaScript - Optional Chaining
• JavaScript - Garbage Collection
• JavaScript - Global Object
• JavaScript - Mixins
• JavaScript - Proxies
• JavaScript Versions
• JavaScript - History
• JavaScript - Versions
• JavaScript - ES5
• JavaScript - ES6
• ECMAScript 2016
• ECMAScript 2017
• ECMAScript 2018
• ECMAScript 2019
• ECMAScript 2020
• ECMAScript 2021
• ECMAScript 2022
• ECMAScript 2023
• JavaScript Cookies
• JavaScript - Cookies
• JavaScript - Cookie Attributes
• JavaScript - Deleting Cookies
• JavaScript Browser BOM
• JavaScript - Browser Object Model
• JavaScript - Window Object
• JavaScript - Document Object
• JavaScript - Screen Object
• JavaScript - History Object
• JavaScript - Navigator Object
• JavaScript - Location Object
• JavaScript - Console Object
• JavaScript Web APIs
• JavaScript - Web API
• JavaScript - History API
• JavaScript - Storage API
• JavaScript - Forms API
• JavaScript - Worker API
• JavaScript - Fetch API
• JavaScript - Geolocation API
• JavaScript Events
• JavaScript - Events
• JavaScript - DOM Events
• JavaScript - addEventListener()
• JavaScript - Mouse Events
• JavaScript - Keyboard Events
• JavaScript - Form Events
• JavaScript - Window/Document Events
• JavaScript - Event Delegation
• JavaScript - Event Bubbling
• JavaScript - Event Capturing
• JavaScript - Custom Events
• JavaScript Error Handling
• JavaScript - Error Handling
• JavaScript - try...catch
• JavaScript - Debugging
• JavaScript - Custom Errors
• JavaScript - Extending Errors
• JavaScript Important Keywords
• JavaScript - this Keyword
• JavaScript - void Keyword
• JavaScript - new Keyword
• JavaScript - var Keyword
• JavaScript HTML DOM
• JavaScript - HTML DOM
• JavaScript - DOM Methods
• JavaScript - DOM Document
• JavaScript - DOM Elements
• JavaScript - DOM Forms
• JavaScript - Changing HTML
• JavaScript - Changing CSS
• JavaScript - DOM Animation
• JavaScript - DOM Navigation
• JavaScript - DOM Collections
• JavaScript - DOM Node Lists
• JavaScript Miscellaneous
• JavaScript - Ajax
• JavaScript - Generators
• JavaScript - Async Iteration
• JavaScript - Atomics Objects
• JavaScript - Rest Parameter
• JavaScript - Page Redirect
• JavaScript - Dialog Boxes
• JavaScript - Page Printing
• JavaScript - Validations
• JavaScript - Animation
• JavaScript - Multimedia
• JavaScript - Image Map
• JavaScript - Browsers
• JavaScript - JSON
• JavaScript - Multiline Strings
• JavaScript - Date Formats
• JavaScript - Get Date Methods
• JavaScript - Set Date Methods
• JavaScript - Random Number
• JavaScript - Modules
• JavaScript - Dynamic Imports
• JavaScript - Export and Import
• JavaScript - BigInt
• JavaScript - Blob
• JavaScript - Unicode
• JavaScript - Execution Context
• JavaScript - Shallow Copy
• JavaScript - Call Stack
• JavaScript - Design Patterns
• JavaScript - Reference Type
• JavaScript - LocalStorage
• JavaScript - SessionStorage
• JavaScript - IndexedDB
• JavaScript - Clickjacking Attack
• JavaScript - Currying
• JavaScript - Graphics
• JavaScript - Canvas
• JavaScript - Debouncing
• JavaScript - Common Mistakes
• JavaScript - Performance
• JavaScript - Best Practices
• JavaScript - Style Guide
• JavaScript - Ninja Code
• JavaScript Useful Resources
• JavaScript - Questions And Answers
• JavaScript - Quick Guide
• JavaScript - Resources
• Selected Reading
• UPSC IAS Exams Notes
• Developer's Best Practices
• Questions and Answers
• Effective Resume Writing
• HR Interview Questions
• Computer Glossary

JavaScript Conditional Operators

The conditional operator in JavaScript first evaluates an expression for a true or false value and then executes one of the two given statements depending upon the result of the evaluation. The conditional operator is also known as the ternary operator.

The JavaScript conditional (ternary) operator is only operator that takes three operands – a condition followed by a question mark (?), then the first expression to be executed if the condition is truthy followed by a colon (:), and finally the second expression to be executed if the condition is falsy .

There are six falsy values in JavaScript. These are − 0 (zero), false, empty string ('' or ""), null, undefined, and NaN. All other values are treated as truthy in JavaScript.

Following is the syntax of conditional (ternary) operator in JavaScript −

Here, we have explained the parameters in the above statement.

• condition − It is a conditional statement.

If the value of the condition is any falsy value, the result of the expression will be the value of exp2 ; otherwise, it will be the value of exp1 .

It will produce the following result −

In the example below, we assign the value to the object property according to the conditional statement’s result.

Now, imagine what if you need to write the if-else statement to assign value to each property conditionally. The code will become complex, but with the ternary operator, you can easily do it with a single line of code.

This example demonstrates that you can also use the expression instead of values. According to the conditional statement, control flow evaluates the first or second expression and assigns the resultant value to the 'result' variable.

In short, you can use the ternary or conditional operator to shorten the code, which uses the if-else statement.

Handling null values

We can use the JavaScript conational operator to handle null value to set a default value if the user passes a null value.

Try the following example −

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.

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

How to write an inline IF statement in JavaScript?

How can I use an inline if statement in JavaScript? Is there an inline else statement too?

Something like this:

• if-statement
• ternary-operator
• conditional-operator

• 13 Where's the jQuery here? And I don't really understand the question anyway. –  Marc Commented Apr 22, 2012 at 17:39
• jquery part might be like this $(document).ready(function(){ var a = 2; var b = 3; if(a < b) { // do something } }); –  takeItEasy Commented Apr 22, 2012 at 17:49
• its a knockoutjs question too –  Martin Capodici Commented Jul 17, 2014 at 22:27
• 1 It's also an angular 1 and 2 and every other js framework (including vanilla.js) out there question –  Ben Taliadoros Commented Oct 19, 2016 at 14:36

17 Answers 17

You don't necessarily need jQuery. JavaScript alone will do this.

The c variable will be minor if the value is true , and major if the value is false .

This is known as a Conditional (ternary) Operator.

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator

• 69 It illustrates how to use an Inline IF, which answers the question EXACTLY. –  MattW Commented Apr 22, 2012 at 17:46
• 31 Just to note, all parens in this case are optional. It is often personal preference/coding style that dictates when they are used. –  Will Klein Commented Apr 22, 2012 at 18:46
• 4 @khany, this is a JavaScript question. Expressions may evaluate in other languages differently. –  Will Klein Commented Jan 14, 2015 at 6:10
• 2 @MattW This doesn't show how to use an Inline IF, it shows how to use an IF ELSE –  Finlay Percy Commented Jan 22, 2018 at 17:22
• 1 @getName not really, but you could use a one line if statement if you wanted if (a < b) c = 'major'; –  MattW Commented Nov 7, 2018 at 12:53

There is a ternary operator, like this:

• 5 It doesn't actually have to be assigned to anything. The right hand side elements can simply be function calls. –  jfriend00 Commented Apr 22, 2012 at 17:41
• 8 They don't even have to be function calls... 0 < 1 : 5 : 120; is a perfectly valid statement. A little useless unless you're paid per line, though. –  Ry- ♦ Commented Apr 22, 2012 at 17:43
• 1 @jfriend00 I would advise against it in almost all cases, though. If you're not using the value of the expression, then what you really want is side effects; and side effects is what statements are great for. Using the plain old boring if statement in such a case will probably make your code much easier to read and understand, and less likely to break with later changes. –  Emil Lundberg Commented Dec 9, 2015 at 23:52

For writing if statement inline, the code inside of it should only be one statement:

• this is what I was looking for. ternary operator is not answering the actual question. –  Zaffer Commented May 5 at 0:49

You can also approximate an if/else using only Logical Operators.

The above is roughly the same as saying:

And of course, roughly the same as:

I say roughly because there is one difference with this approach, in that you have to know that the value of b will evaluate as true, otherwise you will always get c . Bascially you have to realise that the part that would appear if () { here } is now part of the condition that you place if ( here ) { } .

The above is possible due to JavaScripts behaviour of passing / returning one of the original values that formed the logical expression, which one depends on the type of operator. Certain other languages, like PHP, carry on the actual result of the operation i.e. true or false, meaning the result is always true or false; e.g:

One main benefit, compared with a normal if statement, is that the first two methods can operate on the righthand-side of an argument i.e. as part of an assignment.

The only way to achieve this with a standard if statement would be to duplicate the assigment:

You may ask why use just Logical Operators instead of the Ternary Operator , for simple cases you probably wouldn't, unless you wanted to make sure a and b were both true. You can also achieve more streamlined complex conditions with the Logical operators, which can get quite messy using nested ternary operations... then again if you want your code to be easily readable, neither are really that intuative.

In plain English, the syntax explained:

Can be written as:

• 6 Is it possible to do this without the "else" statement? ie condition ? true –  user736893 Commented May 15, 2017 at 18:25
• @ScottBeeson Sure. It also depends on your usage of the condition. true false and "" should all be fine to ignore the else portion. –  Onimusha Commented May 16, 2018 at 15:13
• So 2 == 2 ? doSomething() would be the same as if (2 == 2) doSomething() ? –  user736893 Commented May 16, 2018 at 15:14
• 2 Yes, but the else part cannot be completely omitted. At lease : false or : "" should be there as javascript is expecting this. –  Onimusha Commented May 17, 2018 at 15:29
• 7 Oh. So it's not possible to do it without the else statement. –  user736893 Commented May 17, 2018 at 15:34

If you just want an inline IF (without the ELSE), you can use the logical AND operator:

If you need an ELSE also, use the ternary operation that the other people suggested.

• 53 I don't even know what I just read, but I'm laughing pretty hard. –  Jazz Commented Feb 1, 2013 at 23:27

You could do like this in JavaScript:

I often need to run more code per condition, by using: ( , , ) multiple code elements can execute:

FYI, you can compose conditional operators

If your logic is sufficiently complex, then you might consider using an IIFE

Of course, if you plan to use this logic more than once, then you aught to encapsulate it in a function to keep things nice and DRY.

truthy conclusion: statements executed when hypothesis is true

falsey conclusion: statements executed when hypothesis is false

your example:

You can use the Ternary operator which equates to a simple if, else.

Ternary operation which calls functions for both outcomes:

Ternary operation which calls a function for only one of the outcomes:

To add to this you can also use inline if condition with && and || operators. Like this

Inline if in JavaScript is simple and requires no braces:

Technically you can have an else in the same line, but it requires a semicolon:

The above examples may not be desired by your team's coding standards. The most important thing is that you follow conventions that work for your team. Personally, I prefer if statements over ternaries in many cases because I find them easier to read.

Isn't the question essentially: can I write the following?

the answer is, yes, the above will translate.

however, be wary of doing the following

be sure to wrap ambiguous code in braces as the above will throw an exception (and similar permutations will produce undesired behaviour.)

Simplify ternary operator

If the locked is 1, then the canChange variable is set to false , otherwise, it is set to true. In this case, you can simplify it by using a Boolean expression as follows:

For multiple JavaScript ternary operators The following example shows how to use two ternary operators in the same expression:

It is a best practice to use the ternary operator when it makes the code easier to read. If the logic contains many if...else statements, you shouldn’t use the ternary operators.

Nobody's used arrays:

alert([prompt("falsey condition?"), prompt("truthy condition?")][BigInt(Boolean(2 == 1))]);

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 if-statement ternary-operator conditional-operator or ask your own question .

• Featured on Meta
• We spent a sprint addressing your requests — here’s how it went
• Upcoming initiatives on Stack Overflow and across the Stack Exchange network...
• What makes a homepage useful for logged-in users

Hot Network Questions

• How can I write a std::apply on a std::expected?
• Lexically-scoped Lisp interpreter
• Is this an invitation to submit or a polite rejection?
• Fill the triangular grid using the digits 1-9 subject to the constraints provided
• Pattern on a PCB
• Calculate sum of self-exponentation
• Rescuing ZFS after Debian upgrade
• The human population on Earth reached its maximum with the end of the last zoo
• how to round numbers after comma everytime up
• In the travel industry, why is the "business" term coined in for luxury or premium services?
• Confusion regarding "since" vs "for"
• Is "double-lowercase-L" a ligature (Computer Modern Italic)?
• What does this “Imo” sign mean?
• The meaning of "tarmac ticket"
• Can a festival or a celebration like Halloween be "invented"?
• How Reference A Global Inner Class From a Managed Package?
• Is this a potentially more intuitive approach to MergeSort?
• A Ring of Cubes
• What side-effects, if any, are okay when importing a python module?
• Why do "dual frequency" or low frequency switching regulators exist when higher frequency is better?
• How does turning a follower into a demon work?
• Address Formatting Issue in LaTeX
• Mechanism behind a pink human skeleton
• Sargent-Welch 1947 atomic model kit, design and use