Learn how to build and design websites with our tutorials.

JavaScript Operators Tutorial

View Tutorial Contents


Expressions And Operators

An expression is a combination of variables and values that JavaScript can evaluate to a single value. The characters that are used to combine these values, for example, +, - and *, are called operators.

Some of the most common JavaScript operators are listed below.

Operator Description
= assignment operator assigns values to variables
+ concatenation operator when used on strings, it is used to combine strings
+ addition operator when used on numbers, it is used to add number numbers
- subtraction operator it is used to subtract numbers
* multiplication operator it is used to multiply numbers
/ division operator it is used to divide numbers
% modulus (remainder) returns the remaining value after the division of numbers
++ increment operator it is used to increment the value of a variable by one
-- decrement operator it is used to decrement the value of a variable by one

JavaScript Arithmetic Operators

Arithmetic operators in JavaScript take numerical values, literal values and/or variable values, performs an operation and returns a single numerical value.

Operator Description
+ addition operator when used on numbers, it is used to add number numbers
- subtraction operator it is used to subtract numbers
* multiplication operator it is used to multiply numbers
/ division operator it is used to divide numbers
% modulo (remainder) returns the remaining value after the division of numbers
++ increment operator it is used to increment the value of a variable by one
-- decrement operator it is used to decrement the value of a variable by one

JavaScript Assignment Operators

In JavaScript, assignment operators assign values to JavaScript variables.

Operator Description Example
= Assigns values from right side operands to left side operand x = y
+= The add and assignment operator, adds the right operand to the left operand and assigns the result to the left operand x = x + y
-= The subtraction and assignment operator, subtracts the right operand from the left operand and assigns the result to the left operand x = x - y
*= The multiplication and assign operator, multiplies the right operand with the left operand and assigns the result to the left operand x = x * y
/= The division and assign operator, divides the left operand with the right operand and assigns the result to the left operand x = x / y
%= The modulus and assignment operator, takes the modulus using two operands and assigns the result to the left operand x = x % y

JavaScript Operator Precedence

When more than one operator is used in an expression, JavaScript uses rules of operator precedence to decide how to calculate the value.

The table below lists the operators from lowest to highest precedence. The operators with the highest precedence are evaluated first.

Operator Description
+ addition operator
- subtraction operator
* multiplication operator
/ division operator
% modulo (remainder)
++ increment operator
-- decrement operator

In the example below, since multiplication has a higher order of precedence than addition, it first multiplies 2 times 10 and then adds 1 to return the final result.


1 + 2 * 10 // returns 21


JavaScript String Operators

The concatenation operator (+) can be used to concatenate strings.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<p id="demo">
</p>

<script>
firstName = "John";
lastName = "Doe";
name = firstName + " " + lastName;
document.getElementById("demo").innerHTML = name;
</script>
</body>
</html>

The example above produces the result below.


John Doe

The concatenation operator immediately followed by the equals operator (+=) can be used to concatenate strings.

The example below uses the concatenation operator immediately followed by the equals operator (+=) to concatenate two strings.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<p id="demo">
</p>

<script>
todayWas = "Today was a ";
todayWas += "good day.";
document.getElementById("demo").innerHTML = todayWas;
</script>
</body>
</html>

The result of the example code above is shown below.


Today was a good day.


Concatenating Strings And Numbers

If you add two numbers, the result will the sum of those two numbers. If you add (actually, concatenate) a number and a string, the result will be a string.

The example below concatenates a number and a string.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<p id="demo">
</p>

<script>
var x = 5 + 5;
var y = "5" + 5;
var z = "The number is " + 5;
document.getElementById("demo").innerHTML = x + "<br />" + y + "<br />" + z;
</script>
</body>
</html>

The example code above returns:


10
55
The number is 5


JavaScript Comparison And Logical Operators

JavaScript comparison and logical operators are used to test for true or false.

JavaScript Comparison Operators

Comparison operators allow you to check whether two or more variables and values are equal and/or different types.

The table below lists the comparison operators.

Operator Description
== equal to
=== equal value and type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to

The examples below each include an example of how to use each comparison operator.


JavaScript Equal To (==) Operator


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var x = 1;
if(x == 1){
	alert("true")
}else{
	alert("false");
}

</script>
</body>
</html>

The code example above will display an alert with the message:


true


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var x = "1";
if(x == 1){
	alert("true")
}else{
	alert("false");
}

</script>
</body>
</html>

The code example above will display an alert with the message:


false


JavaScript Equal Value And Type (===) Operator


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var x = 1;
if(x === 1){
	alert("true")
}else{
	alert("false");
}

</script>
</body>
</html>

The code example above will display an alert with the message:


true


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var x = "1";
if(x === 1){
	alert("true")
}else{
	alert("false");
}

</script>
</body>
</html>

The code example above will display an alert with the message:


false


JavaScript Not Equal (!=) Operator


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var x = 1;
if(x != 1){
	alert("true")
}else{
	alert("false");
}

</script>
</body>
</html>

The code example above will display an alert with the message:


false


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var x = 100;
if(x != 1){
	alert("true")
}else{
	alert("false");
}

</script>
</body>
</html>

The code example above will display an alert with the message:


true


JavaScript Not Equal Value Or Not Equal Type (!==) Operator


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var x = 5;
if(x !== "5"){
	alert("true")
}else{
	alert("false");
}

</script>
</body>
</html>

The code example above will display an alert with the message:


true


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var x = 5;
if(x !== 5){
	alert("true")
}else{
	alert("false");
}

</script>
</body>
</html>

The code example above will display an alert with the message:


false


JavaScript Greater Than (>) Operator


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var x = 5;
if(x > 10){
	alert("true")
}else{
	alert("false");
}

</script>
</body>
</html>

The code example above will display an alert with the message:


false


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var x = 5;
if(x > 1){
	alert("true")
}else{
	alert("false");
}

</script>
</body>
</html>

The code example above will display an alert with the message:


true


JavaScript Less Than (<) Operator


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var x = 5;
if(x < 10){
	alert("true")
}else{
	alert("false");
}

</script>
</body>
</html>

The code example above will display an alert with the message:


true


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var x = 5;
if(x < 1){
	alert("true")
}else{
	alert("false");
}

</script>
</body>
</html>

The code example above will display an alert with the message:


false


JavaScript Greater Than Or Equal To (>=) Operator


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var x = 5;
if(x >= 5){
	alert("true")
}else{
	alert("false");
}

</script>
</body>
</html>

The code example above will display an alert with the message:


true


JavaScript Less Than Or Equal To (<=) Operator


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var x = 5;
if(x <= 10){
	alert("true")
}else{
	alert("false");
}

</script>
</body>
</html>

The code example above will display an alert with the message:


true


JavaScript Logical Operators

JavaScript logical operators are usually used with booleans to determine the true or false condition between variables or values.

The table below lists the JavaScript logical operators and a description of each.

Operator Description
&& and
|| or
! not

JavaScript Logical And (&&) Operator


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var x = 5;
var y = 10;
if( x == 5 && y == 10){
	alert("true")
}else{
	alert("false");
}

</script>
</body>
</html>

The code example above will display an alert with the message:


true


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var x = 5;
var y = 10;
if( x == 5 && y == 5){
	alert("true")
}else{
	alert("false");
}

</script>
</body>
</html>

The code example above will display an alert with the message:


false


JavaScript Or (||) Operator


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var x = 5;
var y = 10;
if( x == 5 || y == 5){
	alert("true")
}else{
	alert("false");
}

</script>
</body>
</html>

The code example above will display an alert with the message:


true


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var x = 5;
var y = 10;
if( x == 20 || y == 10){
	alert("true")
}else{
	alert("false");
}

</script>
</body>
</html>

The code example above will display an alert with the message:


true


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var x = 5;
var y = 10;
if( x == 100 || y == 100){
	alert("true")
}else{
	alert("false");
}

</script>
</body>
</html>

The code example above will display an alert with the message:


false


JavaScript Not (!) Operator


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var x = 5;
if(!(x == 5)){
	alert("true")
}else{
	alert("false");
}

</script>
</body>
</html>

The code example above will display an alert with the message:


false


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var x = 5;
if(!(x == 10)){
	alert("true")
}else{
	alert("false");
}

</script>
</body>
</html>

The code example above will display an alert with the message:


true


JavaScript Conditional (Ternary) Operator

The conditional (ternary) operator assigns a value to a variable based on one of two specified conditions.

The syntax of a conditional operator is:


variablename = (condition) ? value1:value2 

In the code example below, if the text "password" is input the text field and then the button is clicked, the text "password is correct" is displayed. If another text, or if the input field is kept empty, and then the button is clicked, the text "Enter the correct password" is displayed.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<p>
Input the text "password", without the quotes, into the input field:
</p>

<input id="password" />

<button onclick="enterPassword()">Click Here</button>

<script>

function enterPassword() {
	var password, display;
	password = document.getElementById("password").value;
	display = (password === "password") ? "password is correct" : "Enter the correct password";
	alert(display);
}

</script>
</body>
</html>

The code example above produces the text and input field below.

Input the word "password", without the quotes, into the input field: