javascript logical assignment

How to Learn JavaScript

If you’re interested in learning to code in the programming language JavaScript, you might be wondering where to start. There are many learning paths you could choose to take, but we’ll explore a few jumping off spots here.

JavaScript is a web-based, object-oriented programming language, commonly used in conjunction with HTLM5 and CSS to create modern interactive websites and effects. Code written in JavaScript runs inside a web browser, and isn’t used in stand-alone applications or computer programs. Java — a language that is similar by name but only somewhat related to JavaScript — is used to create code that can be executed outside a web browser. If you’re seeking to become a web developer, JavaScript can be a useful tool to learn. Now we’ll look at some classes that teach this programming language.

JavaScript Introduction by edX

For complete beginners, you might start off by exploring the online “JavaScript Introduction” MOOC class, offered by edX and provided by The World Wide Web Consortium. This class is self-paced with few prerequisites, and introduces students to several concepts; according to the class page, these include:

• How to add JavaScript (JS) code in your Web site/Web app, how to debug it
• How to make interactive Web sites through the DOM API
• How to change the CSS styles of HTML5 elements from JavaScript
• How to deal with HTML5 forms
• How to make basic graphics and animations using the HTML5 canvas
• How to use the basic concepts of ES2016, the last iteration of the language: arrays, functions, loops, basic objects

Programming for the Web with JavaScript by edX

Another offering from edX is the online class “Programming for the Web with JavaScript,” and provided by the University of Pennsylvania. Another self-paced class that should take about four weeks to complete, the class webpage indicates that students will learn:

• The basics of how the World Wide Web allows browsers to send and retrieve web content
• Web browser internals, the Document Object Model (DOM), and jQuery
• How to create dynamic, interactive web pages using JavaScript
• Techniques for creating data-driven websites using modern web technologies
• Client-side JavaScript libraries and frameworks
• Server-side JavaScript application architecture, middleware, HTTP, and RESTful API design

Programming Foundations With JavaScript, HTML and CSS by Coursera

Coursera.org provides several JavaScript training options, including the “Programming Foundations with JavaScript, HTML and CSS,” offered by Duke University. This course teaches some overall programming basics along with web-development concepts, including:

• Designing a Web Page with HTML and CSS
• Algorithms and Programming Concepts
• JavaScript for Web Pages

Intro to JavaScript by Udacity

The “Intro to JavaScript” from Udacity page tells students: “Learn the fundamentals of JavaScript, the most popular programming language in web development.” The two-week, free course aimed at beginners teaches:

• What is JavaScript?”
• Data Types & Variables
• Conditionals
• Privacy Policy
• Terms of Service
• © 2023 Ask Media Group, LLC

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

Logical AND assignment (&&=)

The logical AND assignment ( &&= ) operator only evaluates the right operand and assigns to the left if the left operand is truthy .

Description

Logical AND 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 truthy, due to short-circuiting of the logical AND 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 truthy, y is not evaluated at all.

Using logical AND assignment

Specifications, browser compatibility.

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

• Logical AND ( && )
• Nullish coalescing operator ( ?? )
• Bitwise AND assignment ( &= )

Home » JavaScript Tutorial » JavaScript Logical Assignment Operators

JavaScript Logical Assignment Operators

Summary : in this tutorial, you’ll learn about JavaScript logical assignment operators, including the logical OR assignment operator ( ||= ), the logical AND assignment operator ( &&= ), and the nullish assignment operator ( ??= ).

ES2021 introduces three logical assignment operators including:

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

The following table shows the equivalent of the logical assignments operator:

The Logical OR assignment operator

The logical OR assignment operator ( ||= ) accepts two operands and assigns the right operand to the left operand if the left operand is falsy:

In this syntax, the ||= operator only assigns y to x if x is falsy. For example:

In this example, the title variable is undefined , therefore, it’s falsy. Since the title is falsy, the operator ||= assigns the 'untitled' to the title . The output shows the untitled as expected.

See another example:

In this example, the title is 'JavaScript Awesome' so it is truthy. Therefore, the logical OR assignment operator ( ||= ) doesn’t assign the string 'untitled' to the title variable.

The logical OR assignment operator:

is equivalent to the following statement that uses the logical OR operator :

Like the logical OR operator, the logical OR assignment also short-circuits. It means that the logical OR assignment operator only performs an assignment when the x is falsy.

The following example uses the logical assignment operator to display a default message if the search result element is empty:

The Logical AND assignment operator

The logical AND assignment operator only assigns y to x if x is truthy:

The logical AND assignment operator also short-circuits. It means that

is equivalent to:

The following example uses the logical AND assignment operator to change the last name of a person object if the last name is truthy:

The nullish coalescing assignment operator

The nullish coalescing assignment operator only assigns y to x if x is null or undefined :

It’s equivalent to the following statement that uses the nullish coalescing operator :

The following example uses the nullish coalescing assignment operator to add a missing property to an object:

In this example, the user.nickname is undefined , therefore, it’s nullish. The nullish coalescing assignment operator assigns the string 'anonymous' to the user.nickname property.

The following table illustrates how the logical assignment operators work:

• The logical OR assignment ( x ||= y ) operator only assigns y to x if x is falsy.
• The logical AND assignment ( x &&= y ) operator only assigns y to x if x is truthy.
• The nullish coalescing assignment ( x ??= y ) operator only assigns y to x if x is nullish.

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

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Top Tutorials

Top references, top examples, get certified.

What are logical assignment operators in JavaScript?

Get Started With Machine Learning

Learn the fundamentals of Machine Learning with this free course. Future-proof your career by adding ML skills to your toolkit — or prepare to land a job in AI or Data Science.

JavaScript ES6 provides three useful logical assignment operators:

• &&=

The &&= operator

The &&= is pronounced as “Logical AND assignment operator” and is used in between two values.

If the first value is truthy, then the second value is assigned. It is evaluated left to right.

Explanation

In the first evaluation on line 5, expression1 is falsy. The expression1 value will not change.

In the second evaluation on line 7, expression2 is truthy. The expression3 value will be assigned to expression2 .

The ||= operator

The ||= is pronounced as “Logical OR assignment operator” and is used in between two values.

If the first value is falsy, then the second value is assigned. It is evaluated left to right.

In the first evaluation on line 5, the expression1 is falsy. The expression2 value will be assigned to expression1 .

In the second evaluation on line 7, expression2 is truth. The expression2 value will not change.

The ??= operator

The ??= is pronounced as “Nullish coalescing assignment operator” and is used in between two values.

If the first value is undefined or null , then the second value is assigned. It is evaluated left to right.

In the first evaluation on line 5, expression1 is null . The expression2 value will be assigned to expression1 .

In the second evaluation on line 7, expression2 is neither null nor undefined . The expression2 value will not change.

RELATED TAGS

CONTRIBUTOR

Learn in-demand tech skills in half the time

Skill Paths

Assessments

For Individuals

Try for Free

Privacy Policy

Cookie Policy

Terms of Service

Business Terms of Service

Data Processing Agreement

Become an Author

Become an Affiliate

Frequently Asked Questions

Learn to Code

GitHub Students Scholarship

Explore Catalog

Early Access Courses

Earn Referral Credits

Copyright © 2023 Educative, Inc. All rights reserved.

logical-assignment-operators

Require or disallow logical assignment operator shorthand

Some problems reported by this rule are automatically fixable by the --fix command line option

Some problems reported by this rule are manually fixable by editor suggestions

ES2021 introduces the assignment operator shorthand for the logical operators || , && and ?? . Before, this was only allowed for mathematical operations such as + or * (see the rule operator-assignment ). The shorthand can be used if the assignment target and the left expression of a logical expression are the same. For example a = a || b can be shortened to a ||= b .

Rule Details

This rule requires or disallows logical assignment operator shorthand.

This rule has a string and an object option. String option:

• "always" (default)
• "never"

Object option (only available if string option is set to "always" ):

• "enforceForIfStatements": false (default) Do not check for equivalent if statements
• "enforceForIfStatements": true Check for equivalent if statements

This option checks for expressions that can be shortened using logical assignment operator. For example, a = a || b can be shortened to a ||= b . Expressions with associativity such as a = a || b || c are reported as being able to be shortened to a ||= b || c unless the evaluation order is explicitly defined using parentheses, such as a = (a || b) || c .

Examples of incorrect code for this rule with the default "always" option:

Examples of correct code for this rule with the default "always" option:

Examples of incorrect code for this rule with the "never" option:

Examples of correct code for this rule with the "never" option:

enforceForIfStatements

This option checks for additional patterns with if statements which could be expressed with the logical assignment operator.

Examples of incorrect code for this rule with the ["always", { enforceForIfStatements: true }] option:

Examples of correct code for this rule with the ["always", { enforceForIfStatements: true }] option:

When Not To Use It

Use of logical operator assignment shorthand is a stylistic choice. Leaving this rule turned off would allow developers to choose which style is more readable on a case-by-case basis.

This rule was introduced in ESLint v8.24.0.

• Rule source
• Tests source

Logical Operators and Assignment

Logical Operators and Assignment are new features in JavaScript for 2020. These are a suite of new operators which edit a JavaScript object. Their goal is to re-use the concept of mathematical operators (e.g. += -= *=) but with logic instead. interface User { id?: number name: string location: { postalCode?: string } } function updateUser(user: User) { // This code can be replaced if (!user.id) user.id = 1 // Or this code: user.id = user.id || 1 // With this code: user.id ||= 1 } // The suites of operators can handle deeply nesting, which can save on quite a lot of boilerplate code too. declare const user: User user.location.postalCode ||= "90210" // There are three new operators: ||= shown above &&= which uses 'and' logic instead of 'or' ??= which builds on example:nullish-coalescing to offer a stricter version of || which uses === instead For more info on the proposal, see: https://github.com/tc39/proposal-logical-assignment

• DSA with JS - Self Paced
• JS A to Z Guide
• JS Operator
• JS Examples
• Free JS Course

• Explore Our Geeks Community
• Increment(+ +) Arithmetic Operator in JavaScript
• JavaScript delete Operator
• JavaScript typeof Operator
• JavaScript Relational operators
• Bitwise XOR Assignment (^=) Operator in JavaScript
• Greater than(>) Comparison Operator in JavaScript
• Addition Assignment (+=) Operator in Javascript
• JavaScript Spread Operator
• Arrow operator in ES6 of JavaScript
• JavaScript Nullish Coalescing(??) Operator
• AND(&) Bitwise Operator in JavaScript
• New Features in ECMAScript 2021 Update
• JavaScript Rest parameter
• JavaScript Operators Reference
• NOT(~) Bitwise Operator in JavaScript
• Division Assignment(/=) Operator in JavaScript
• Exponentiation Assignment(**=) Operator in JavaScript
• Multiplication Assignment(*=) Operator in JavaScript
• Decrement(--) Arithmetic Operator in JavaScript

JavaScript Logical OR assignment (||=) Operator

This operator is represented by x ||= y  and it is called a logical OR assignment operator. If the value of x is falsy then the value of y will be assigned to x.

When we divide it into two parts it becomes x || ( x = y ).

It checks if x is true or false, if the value of x is falsy then it runs the ( x = y ) block and the value of y gets stored into x and if the value of x is truthy then the value of the next block ( x = y ) does not execute.

is equivalent to 

Example 1: This example shows the use of the JavaScript Logical OR assignment (||=) Operator.

Example 2: This example shows the use of the JavaScript Logical OR assignment (||=) Operator.

We have a complete list of Javascript Operators, to check those please go through the Javascript Operators Complete Reference article.

Supported browsers:

Please Login to comment...

• amitsingh2730
• javascript-operators
• Web Technologies

Please write us at contrib[email protected] to report any issue with the above content

Improve your Coding Skills with Practice