Operators
An operator is a special character or series of characters that perform a task in JavaScript.
Assignment Operator
This operator uses the equals sign (=
) to assign a value to a variable.
let x = 42;
In the snippet above, a variable x
is declared and the numeric value 42
is assigned to it.
Arithmetic Operators
These operators are used to perform arithmetic on numeric values:
+
: Adds to a value; can also be used to concatenate strings.-
: Subtracts from a value.*
: Multiplies by a value./
: Divides by a value.%
: Modulo finds the remainder after dividing two values.**
: Returns the exponentiation of the first value raised to the power of the second value (first introduced in ES2016).++
: Returns the value incremented by 1.--
: Returns the value decremented by 1.
The operators can be implemented as seen below:
let sum = 5 + 5;let difference = 10 - 5;let product = 5 * 10;let quotient = 10 / 5;let remainder = 10 % 5;
Other Assignment Operators
An assignment operator assigns a value to its left operand based on the value of its right operand:
+=
: Adds and assigns a new value to a variable.-=
: Subtracts and assigns a new value to a variable.*=
: Multiplies and assigns a new value to a variable./=
: Divides and assigns a new value to a variable.%=
: Assigns the returned remainder (modulo) as a new value to a variable.**=
: Assigns the left operand raised to the power of the right operand.
The following example showcases how these operators are a combination of using an assignment and arithmetic operator in one statement:
let number = 100;// Both statements will add 10number = number + 10;number += 10;console.log(number);// Output: 120
Comparison Operators
These operators compare values and return a boolean value of true
or false
.
==
: Returnstrue
orfalse
based on whether the value of two operands are equal.===
: Returnstrue
orfalse
based on whether the value and type of two operands are equal.!=
: Returnstrue
orfalse
based on whether the value of two operands are not equal.!==
: Returnstrue
orfalse
based on whether the value and type of two operands are not equal.>
: Returnstrue
orfalse
based on whether the first value is greater than the second value.<
: Returnstrue
orfalse
based on whether the first value is less than the second value.>=
: Returnstrue
orfalse
based on whether the first value is greater than or equal to the second value.<=
: Returnstrue
orfalse
based on whether the first value is less than or equal to the second value.
Note: The
==
and===
comparison operators are not to be confused with the single equality sign=
operator that is used for assignment.
The following example showcases some of these comparison operators:
let tenString = '10';let numberTen = 10;console.log(tenString == numberTen);// Output: trueconsole.log(tenString === numberTen);// Output: falseconsole.log(tenString != numberTen);// Output: falseconsole.log(tenString !== numberTen);// Output: true
Note: The first comparison in the code above yields
true
even though the variables are of different types. This is because JavaScript uses type coercion by default to evaluate expressions, which may lead to unexpected results. Use the===
and!==
operators to perform strict type evaluations.
Logical Operators
These operators combine multiple boolean expressions or values to provide a single boolean output:
&&
(AND): Returnstrue
if all operands evaluate totrue
.||
(OR): Returnstrue
if one or more operands evaluate totrue
.!
(NOT): Returns the logical opposite of an operand’s boolean value (i.e.,!(true)
returnsfalse
and!(false)
returnstrue
).
The following example showcases the usage of logical operators:
const walksLikeADuck = true;const talksLikeADuck = true;// AND Operatorlet isDuck = walksLikeADuck && talksLikeADuck;console.log(isDuck);// Output: trueconst isBird = true;const isPlane = false;// OR OperatorisDuck = isBird || isPlane;console.log(isDuck);// Output: true// NOT Operatorconst isPenguin = !isDuck;console.log(isPenguin);// Output: false
Unary Operator
A unary operator, such as the not operator (!
), is an operator that is applied to one term or variable. Arithmetic operators are also known as binary operators because they operate on two terms. There are also unary operators in JavaScript that are names rather than symbols, such as the typeof
operator.
console.log(typeof 'foo'); // Yields string
Conditional Operator
The conditional, or ternary, operator uses the question mark ?
and colon :
to assign a value to a variable based on a conditional statement:
variable = condition ? assignedIfTrue : assignedIfFalse;
This operator combines the functionalities of the assignment, comparison, and logical operators.
Multi-Step Ternary Operator Examples
Multiple steps can be performed by a ternary operator, based on certain conditions (similar to an if...else
statement).
A key point to consider is where the parentheses (()
) are placed.
The following example shows how a ternary operator can conditionally increment numeric values similar to how it’s done in an if...else
statement:
let i = true;let a = 0;let b = 0;if (i == true) {a++;b++;} else {a = 0;b = 0;}console.log('a = ', a, 'b = ', b);// The ternary equivalenti == true ? (a++, b++) : ((a = 0), (b = 0));console.log('a = ', a, 'b = ', b);let c = 0;i == true ? (a++, b++, c++) : ((a = 0), (b = 0), (c = 0));console.log('a =', a, 'b =', b, 'c =', c);
This will output the following:
a = 1 b = 1a = 2 b = 2a = 3 b = 3 c = 1
The following ternary operator will throw a SyntaxError
due to how the parentheses are placed:
let i = true;// This implementation will faili == true ? (a++), (b++) : (a = 0), (b = 0);console.log('a = ', a, 'b = ', b);
This will output:
Output:i == true ? (a++), (b++) : (a = 0), (b = 0);^SyntaxError: Unexpected token ','
Note: The ternary operator and
if...else
condition performance speeds are roughly the same. Although the ternary operator can help consolidate several lines of code, utilizing it is up to preference.
Codebyte Example
The following example showcases the conditional operator:
All contributors
- CaupolicanDiaz
- Christine_Yang
- Anonymous contributor
- BrandonDusch
- Anonymous contributor
- christian.dinh
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn JavaScript on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Free course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner Friendly15 hours