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" type="text/css">
<script type="text/javascript">
	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 + Number(userNum2);
	var numsSubtracted = userNum1 - userNum2;
	var numsMultiplied = userNum1 * userNum2;
	var numsDivided = userNum1 / userNum2;
	var numsModulused = userNum1 % userNum2;
</script>
</head>
<body>
<p>
	<script type="text/javascript">
		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>

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 + Number(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.Operators

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 upcoming 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 type="text/javascript"<
	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 ----

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

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

Default Operator
Operator Description
|| Used to assign a default operator (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 type="text/javascript"<
	var yourName = prompt("Your Name?","") || "Stranger";
	
	alert("Hi " + yourName + "!");
>/script<
---- C O D E   O M I T T E D ----

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

Next