JavaScript Operators

Contact Us or call 1-877-932-8228
JavaScript Operators

JavaScript Operators

Arithmetic Operators
Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus (remainder)
++ Increment by one
-- Decrement by one
Assignment Operators
Operator Description
= Assignment
+= One step addition and assignment (a+=3 is the same as a=a+3)
-= One step subtraction and assignment (a-=3 is the same as a=a-3)
*= One step multiplication and assignment (a*=3 is the same as a=a*3)
/= One step division and assignment (a/=3 is the same as a=a/3)
%= One step modulus and assignment (a%=3 is the same as a=a%3)
String Operators
Operator Description
+ Concatenation
var greeting = "Hello " + firstname;
+= One step concatenation and assignment
var greeting = "Hello ";
greeting += firstname;

The following code sample shows these operators in use:

Code Sample:

VariablesArraysOperators/Demos/Operators.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Operators</title>
<link href="style.css" rel="stylesheet">
<script>
	var userNum1 = window.prompt("Choose a number.", "");
	alert("You chose " + userNum1);
	var userNum2 = window.prompt("Choose another number.", "");
	alert("You chose " + userNum2);
	var numsAdded = userNum1 + userNum2;
	var numsSubtracted = userNum1 - userNum2;
	var numsMultiplied = userNum1 * userNum2;
	var numsDivided = userNum1 / userNum2;
	var numsModulused = userNum1 % userNum2;
</script>
</head>
<body>
<p>
	<script>
		document.write(userNum1 + " + " + userNum2 + " = ");
			document.write(numsAdded + "<br>");
		document.write(userNum1 + " - " + userNum2 + " = ");
			document.write(numsSubtracted + "<br>");
		document.write(userNum1 + " * " + userNum2 + " = ");
			document.write(numsMultiplied + "<br>");
		document.write(userNum1 + " / " + userNum2 + " = ");
			document.write(numsDivided + "<br>");
		document.write(userNum1 + " % " + userNum2 + " = ");
			document.write(numsModulused + "<br>");
	</script>
</p>
</body>
</html>

Code Explanation

The file above illustrates the use of the concatenation operator and several math operators. It also illustrates a potential problem with loosely-typed languages. This page is processed as follows:

  1. The user is prompted for a number and the result is assigned to userNum1.
  2. An alert pops up telling the user what number she entered. The concatenation operator (+) is used to combine two strings: "You chose " and the number entered by the user. Note that all user-entered data is always treated as a string of text, even if the text consists of only digits.
  3. The user is prompted for another number and the result is assigned to userNum2.
  4. Another alert pops up telling the user what number she entered.
  5. Five variables are declared and assigned values.
    var numsAdded = userNum1 + userNum2; var numsSubtracted = userNum1 - userNum2; var numsMultiplied = userNum1 * userNum2; var numsDivided = userNum1 / userNum2; var numsModulused = userNum1 % userNum2;
  6. The values the variables contain are output to the browser.

So, 5 + 4 is 54! It is when 5 and 4 are strings, and, as stated earlier, all user-entered data is treated as a string. In the lesson on JavaScript Functions, you will learn how to convert a string to a number.

Ternary Operator
Operator Description
?: Conditional evaluation.
var evenOrOdd = (number % 2 == 0) ? "even" : "odd";

The code sample below shows how the ternary operator works:

Code Sample:

VariablesArraysOperators/Demos/Ternary.html
---- C O D E   O M I T T E D ----

<script>
	var num = prompt("Enter a number.","");
	
	//without ternary
	if (num % 2 == 0) {
		alert(num + " is even.");
	} else {
		alert(num + " is odd.");
	}
	
	//with ternary
	var term = num % 2 == 0 ? "even" : "odd";
	alert(num + " is " + term);
</script>
---- C O D E   O M I T T E D ----

Code Explanation

Lines 7-11 show a regular if-else statement, which we will cover in detail in Conditionals and Loops.

Lines 14 and 15 show how to accomplish the same thing in a couple of lines of code with the ternary operator.

Default Operator
Operator Description
|| Used to assign a default value. (This is explained in greater detail later in the course.)
var yourName = prompt("Your Name?","") || "Stranger";

The code sample below shows how the default operator works:

Code Sample:

VariablesArraysOperators/Demos/Default.html
---- C O D E   O M I T T E D ----

<script>
	var yourName = prompt("Your Name?","") || "Stranger";
	
	alert("Hi " + yourName + "!");
</script>
---- C O D E   O M I T T E D ----

Code Explanation

If the user presses OK without filling out the prompt or presses Cancel, the default value "Stranger" is assigned to yourName.

Next