× Introduction Setup Environment Building blocks Built-in functions Data Types Strings Operators Conditional statements Loop statements Functions Arrays Understaing Objects Date Object Number Object Math Object String Object Window Location Navigator History DOM Basics Forms
   Programs
Basic Control Loops Functions Arrays Examples Projects Quick Ref.
   Exercises
Variables Data Types Operators Decision Loops Reeborg's World


☰




Operators and Building Expressions

In this tutorial you will learn javascripts operators, and their usage, Converting Math Formulas to Programming Statements, operator precedence and Expressions Evaluation.

An expression is a literal value or variable, or a combination of literal values, variables, operators, and other expressions, that can be evaluated by a JavaScript interpreter to produce a result. You use operands and operators to create expressions in JavaScript.

Operands are the data items on which operators execute.Operands are variables and literals contained in an expression. A literal is a value such as a literal string or a number.

Operators, such as the addition operator ( + ) and multiplication operator ( * ), are symbols used in expressions to manipulate operands.

Mathematical and other operations are performed using operands and operators.

Consider the following statement:

votingAge = 18;

This statement is an expression that results in the value being assigned to the variable votingAge. The operands in the expression are the votingAge variable name and the integer value . The operator is the equal sign ( =). The equal sign operator is a special kind of operator, called an assignment operator, because it assigns the value on the right side of the expression to the variable votingAge on the left side of the expression.

Consider the following statement: Try It 

var a = 5 + 10; //expression comprising operator and operands

Here + and = are arithmetic and assignment operators, respectively. a, 5 and 10 are operands on which operators operate.

Arithmetic Operators: Try It

Arithmetic operators are used in JavaScript to perform mathematical calculations, such as addition, subtraction, multiplication, and division. You can also use an arithmetic operator to return the modulus of a calculation, which is the remainder left when you divide one number by another number.

Operator Description Example Result
x = 10 and y = 5
+ Addition x + y x + y will give 15
- Subtraction x - y x - y will give 5
* Multiplication x * y x * y will give 50
/ Division x / y x / y will give 2
% Modulus or remainder x % y x % y will give 0
** Exponent x ** y x ** y will give 100000


JavaScript Incrementing and Decrementing Operators Try It

The increment/decrement operators are used to increment/decrement a variable's value.

Operator Description Example Result
x = 10
++x Pre-increment Increments x by one, then returns x ++x will give 11
x++ Post-increment Returns x, then increments x by one x++ will give 10 and increments by one
--x Pre-decrement Decrements x by one, then returns x --x will give 9
x-- Post-decrement Returns x, then decrements x by one x—will give 10 and decrements x by one

Comparison and Conditional Operators Try It

A comparison operator, or relational operator, is used to compare two operands and determine if one value is greater than another. A Boolean value of true or false is returned after two operands are compared.

Operator Description Example Result
x = 10
== Equal x == 10
x == 11
x == "10" 		True
False
True
=== Identical x === 10
x === "10" 		True
False // type difference
!= Not equal x != 11 True
!== Not identical x !== "10" True
< Less than x < 12 True
> Greater than x > 12 False
>= Greater than or equal to x gt;= 7 True
<= Less than or equal to x <= 15 True


Assignment operator Try It

An assignment operator is used for assigning a value to a variable. There are also compound assignment operators that are shorthand for these operators.

Operator Description Example Result
x = 10
= Assign x = 10 x contains 10
+= Add and assign x += 5 x contains 15
-= Subtract and assign x -= 5 x contains 5
*= Multiply and assign x *= 5 x contains 50
/= Divide and assign quotient x /= 5 x contains 2
%= Divide and assign modulus x %= 5 x contains 0


Logical Operators Try It

Logical operators are used in JavaScript to perform logical operations, such as AND, OR and NOT operations.

Operator Description Example Result
x = 10 y = 15
&& And x && y (x > 8 && y < 20) will give True (both conditions are true)
|| Or x || y (x > 8 && y < 10) will give True (any one or all conditions are true)
! Not !x !( x > 20) will give True ( if condition is not true)


JavaScript String Operators Try It

There are two operators which can also used for strings concatenation.

Operator Description Example Result
+ Concatenation str1 + str2 str1 = "Hello";
str 2 = "World!";
str1 + str2 will give Hello World!
+= Concatenation assignment str1 += str2 Appends the str2 to the str1
str1 = "Hello";
str 2 = " World!";
str1 += str2 will give Hello World! String to str1.


Operator Precedence and Associativity

When an arithmetic expression includes two or more different operators, the result is often ambiguous. For example, what is the result of 7 − 3 * 2? Is it 8 or 1? The answer depends on the order in which the arithmetic operations are done. Because of this ambiguity, programming languages include arithmetic operator precedence. Precedence determines which operator the computer evaluates first and which it evaluates last. Associativity refers to the order in which an operator evaluates its operands: left to right in no specified order, or right to left. When all of the operators in an expression are of equal precedence, normally the association is left to right; in the expression 5 + 4 + 3, the evaluation is from left to right.

Operator/ Description (Associativity)

()  Parentheses (Left to right)   Highest Precedence (evaluated first)
++ – – Auto increment, decrement (Right to left)
! Logical NOT (Right to left)
* / % Multiply, divide, modulus (Left to right)
+ – Add, subtract (Left to right)
+ Concatenation (Left to right)
< <= Less than, less than or equal to Left to right
> >= Greater than, greater than or equal to Left to right
= = != Equal to, not equal to (Left to right)
= = = != = Identical to (same type), not identical to (Left to right)
& Bitwise AND (Left to right)
| Bitwise OR
^ Bitwise XOR
~ Bitwise NOT
<< Bitwise left shift
>>> Bitwise right shift
>>> Bitwise zero-filled, right shift
&& Logical AND (Left to right)
|| Logical OR (Left to right)
? : Ternary, conditional (Right to left)
= += – = *= /= %= <<= >>= Assignment (Right to left)
, (comma)                                               Lowest Precedence (evaluated last)

Converting Math Formulas to Programming Statements

A programmer tells the computer to perform mathematical operations by writing mathemetical expressions in a program. An expression is composed of operands (numbers and variables) and operators (addition, multiplication, etc.).

Arithmetic in JavaScript is written differently than it is written in algebra. For example in algebra, 3x means to multiply 3 times x. However, typing 3x in a JavaScript program will not cause the computer to multiply anything. Instead, it will simply cause an error. If you want multiplication in JavaScript, you must use the multiplication operator (*) like this: 3 * x.

Algebraic Expression Javascript Statement
y = 3 * x /2;
z = 3 * b * c + 4;
a = (x + 2) / (b − 1);


Expressions Evaluation Try It

Algebraic Expression Description Value
5 + 2 * 4 precedence of * is more than that of + 13
(5 + 2) * 4 Using parenthesis(), we have forced precedence of + to be more than that of * 28
7 - 2 + 3 - and + have equal precedence; subtraction is applied before addition (left to right Associativity ). 28
10 / 2 − 3 precedence of / is more than that of - 2
8 + 12 * 2 − 4 precedence of * is more than that of + and -; 28
10/2 + (3 + 2 ) precedence of () is more than that of / and +; 10