# Operators

Published May 6, 2021Updated Dec 1, 2023
Contribute to Docs

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

• `==`: Returns `true` or `false` based on whether the value of two operands are equal.
• `===`: Returns `true` or `false` based on whether the value and type of two operands are equal.
• `!=`: Returns `true` or `false` based on whether the value of two operands are not equal.
• `!==`: Returns `true` or `false` based on whether the value and type of two operands are not equal.
• `>`: Returns `true` or `false` based on whether the first value is greater than the second value.
• `<`: Returns `true` or `false` based on whether the first value is less than the second value.
• `>=`: Returns `true` or `false` based on whether the first value is greater than or equal to the second value.
• `<=`: Returns `true` or `false` 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: true
console.log(tenString === numberTen);// Output: false
console.log(tenString != numberTen);// Output: false
console.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): Returns `true` if all operands evaluate to `true`.
• `||` (OR): Returns `true` if one or more operands evaluate to `true`.
• `!` (NOT): Returns the logical opposite of an operand’s boolean value (i.e., `!(true)` returns `false` and `!(false)` returns `true`).

The following example showcases the usage of logical operators:

```const walksLikeADuck = true;const talksLikeADuck = true;
console.log(isDuck);// Output: true
const 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:

`usVisit uscodeHide codeCodeOutputHide outputHide outputLoading...`