Javascript Assignment With Operation
Introduction
Mathematical operations are among the most fundamental and universal features of any programming language. In JavaScript, numbers are used frequently for common tasks such as finding browser window size dimensions, getting the final price of a monetary transaction, and calculating the distance between elements in a website document.
Although a high-level understanding of mathematics is not a prerequisite to being a capable developer, it is important to know what types of operations are available in JavaScript, and how to use math as a tool to accomplish practical tasks.
Unlike other programming languages, JavaScript only has one number data type; there is no distinction made between integers (positive or negative whole numbers) and floats (numbers with a decimal point), for example.
In this tutorial, we will go over arithmetic operators, assignment operators, and the order of operations used with JavaScript number data types.
Arithmetic Operators
Arithmetic operators are symbols that indicate a mathematical operation and return a value. In the equation , the is syntax that stands for addition.
JavaScript has many familiar operators from basic math, as well as a few additional operators specific to programming.
Here is a reference table of JavaScript arithmetic operators.
Operator | Syntax | Example | Definition |
---|---|---|---|
Addition | Sum of and | ||
Subtraction | Difference of and | ||
Multiplication | Product of and | ||
Division | Quotient of and | ||
Modulo | Remainder of | ||
Exponentiation | to the power | ||
Increment | plus one | ||
Decrement | minus one |
We will go into more detail on each of these operators throughout this article.
Addition and Subtraction
Addition and subtraction operators are available in JavaScript, and can be used to find the sum and difference of numerical values. JavaScript has a built-in calculator, and mathematical operations can be done directly in the console.
We can do some simple addition with numbers, for example adding and , using the plus sign ().
In addition to doing math with plain numbers, we can also assign numbers to variables and perform the same calculations. In this case, we will assign the numerical values to and and place the sum in .
Similarly, we use the minus sign () to subtract numbers or variables representing numbers.
We can also add and subtract with negative numbers and floats (decimals).
One interesting thing to note and be aware of in JavaScript is the result of adding a number and a string. We know that should equal , but this equation will have unexpected results.
Instead of adding the two numbers, JavaScript will convert the entire statement into a string and concatenate them together. It's important to be careful with JavaScript's dynamically-typed nature, as it can have undesired outcomes.
A common reason to use addition or subtraction in JavaScript would be to scroll to an id minus the height in pixels of a fixed navigation bar.
In the above example, clicking on an id will scroll to 60 pixels above the id.
Addition and subtraction are two of the most common mathematical equations you will use in JavaScript.
Multiplication and Division
Multiplication and division operators are also available in JavaScript, and are used to find the product and quotient of numerical values.
An asterisk () is used to represent the multiplication operator.
Multiplication might be used to calculate the price of an item after applying sales tax.
A slash () is used to represent the division operator.
Division is particularly useful when calculating time, such as finding the number of hours in a quantity of minutes, or when calculating the percent of correct answers completed in a test.
Modulo
One arithmetic operator that is slightly less familiar is the modulo (sometimes known as modulus) operator, which calculates the remainder of a quotient after division. Modulo is represented by a percentage sign ().
As an example, we know that goes into exactly three times, and there is no remainder.
We can use the modulo operator to determine whether a number is even or odd, as seen with this function:
In the above example, divides evenly into , therefore it is an even number.
Often in programming, modulo is used in conjunction with conditional statements for flow control.
Exponentiation
Exponentiation is one of the newer operators in JavaScript, and it allows us to calculate the power of a number by its exponent. The syntax for exponentiation is two asterisks in a row ().
10 to the fifth power, or 10^5, is written like this:
represents the same as multiplied by five times:
Another way of writing this is with the method.
Using the exponentiation operator is a concise way of finding the power of a given number, but as usual, it is important to keep consistent with the style of your code base when choosing between a method and an operator.
Increment and Decrement
Increment and decrement operators increase or reduce the numerical value of a variable by one. They are represented by two plus signs () or two minus signs (), and are often used with loops.
Note that increment and decrement operators can only be used on variables; attempting to use them on a raw number will result in an error.
Increment and decrement operators can be classified as a prefix or postfix operation, depending on whether or not the operator is placed before or after the variable.
First, we can text the prefix incrementation, with .
The value of was increased by one. To see the difference, we will test the postfix incrementation, with .
The value of was not increased in the postfix operation. This is because the value will not be incremented until after the expression has been evaluated. Running the operation twice will then increment the value.
The increment or decrement operator will be seen most often in a loop. In this loop example, we will run the operation ten times, starting with , and increasing the value by with each iteration.
The code above shows an iteration through a loop that is achieved through using the increment operator.
We can think of as shorthand for , and as shorthand for .
Assignment Operators
One of the most commonly used operators is the assignment operator, which we have seen already and is represented by an equals sign (). We use to assign a value on the right to a variable on the left.
In addition to the standard assignment operator, JavaScript has compound assignment operators, which combine an arithmetic operator with .
For example, the addition operator will start with the original value, and add a new value.
In this case, is the same as writing .
All the arithmetic operators can be combined with assignment to create compound assignment operators. Below is a reference table of assignment operators in JavaScript.
Operator | Syntax |
---|---|
Assignment | |
Addition assignment | |
Subtraction assignment | |
Multiplication assignment | |
Division assignment | |
Remainder assignment | |
Exponentiation assignment |
Compound assignment operators are often used with loops, similar to incrementation and decrementation, and are utilized when equations need to be repeated or automated.
Operator Precedence
Although we read from left to right, operators will be evaluated in order of precedence, just as in regular mathematics.
In the following example, multiplication has a higher precedence than addition, which determines the outcome of the equation.
If instead we would like to run the addition operation first, we should group it in parentheses, which always has the highest precedence.
Below is a reference table of operator precedence of arithmetic operators in JavaScript, from highest to lowest. For incrementation and decrementation, postfix has a higher precedence than prefix.
Incrementation/decrementation, multiplication/division, and addition/subtraction have the same level of precedence.
Operator | Syntax |
---|---|
Parentheses | |
Incrementation | |
Decrementation | |
Exponentiation | |
Multiplication | |
Division | |
Addition | |
Subtraction |
Operator precedence includes not only arithmetic operators, but also assignment operators, logical operators, conditional operators, and more. For a full list, view operator precedence on Mozilla Developer Network (MDN).
Conclusion
In this article, we covered arithmetic operators and syntax, including many familiar mathematical operators and a few that are specific to programming.
Additionally, we learned how to combine arithmetic and assignment to create compound assignment operators, and the order of operations in JavaScript.
JavaScript - Operators
Previous Page
Next Page
What is an operator?
Let us take a simple expression 4 + 5 is equal to 9. Here 4 and 5 are called operands and ‘+’ is called the operator. JavaScript supports the following types of operators.
Arithmetic Operators
Comparison Operators
Logical (or Relational) Operators
Assignment Operators
Conditional (or ternary) Operators
Lets have a look on all operators one by one.
Arithmetic Operators
JavaScript supports the following arithmetic operators −
Assume variable A holds 10 and variable B holds 20, then −
Sr.No | Operator and Description |
---|---|
1 | + (Addition) Adds two operands Ex: A + B will give 30 |
2 | - (Subtraction) Subtracts the second operand from the first Ex: A - B will give -10 |
3 | * (Multiplication) Multiply both operands Ex: A * B will give 200 |
4 | / (Division) Divide the numerator by the denominator Ex: B / A will give 2 |
5 | % (Modulus) Outputs the remainder of an integer division Ex: B % A will give 0 |
6 | ++ (Increment) Increases an integer value by one Ex: A++ will give 11 |
7 | -- (Decrement) Decreases an integer value by one Ex: A-- will give 9 |
Note − Addition operator (+) works for Numeric as well as Strings. e.g. "a" + 10 will give "a10".
Example
The following code shows how to use arithmetic operators in JavaScript.
<html> <body> <script type="text/javascript"> <!-- var a = 33; var b = 10; var c = "Test"; var linebreak = "<br />"; document.write("a + b = "); result = a + b; document.write(result); document.write(linebreak); document.write("a - b = "); result = a - b; document.write(result); document.write(linebreak); document.write("a / b = "); result = a / b; document.write(result); document.write(linebreak); document.write("a % b = "); result = a % b; document.write(result); document.write(linebreak); document.write("a + b + c = "); result = a + b + c; document.write(result); document.write(linebreak); a = ++a; document.write("++a = "); result = ++a; document.write(result); document.write(linebreak); b = --b; document.write("--b = "); result = --b; document.write(result); document.write(linebreak); //--> </script> Set the variables to different values and then try... </body> </html>Output
a + b = 43 a - b = 23 a / b = 3.3 a % b = 3 a + b + c = 43Test ++a = 35 --b = 8 Set the variables to different values and then try...Comparison Operators
JavaScript supports the following comparison operators −
Assume variable A holds 10 and variable B holds 20, then −
Sr.No | Operator and Description |
---|---|
1 | = = (Equal) Checks if the value of two operands are equal or not, if yes, then the condition becomes true. Ex: (A == B) is not true. |
2 | != (Not Equal) Checks if the value of two operands are equal or not, if the values are not equal, then the condition becomes true. Ex: (A != B) is true. |
3 | > (Greater than) Checks if the value of the left operand is greater than the value of the right operand, if yes, then the condition becomes true. Ex: (A > B) is not true. |
4 | < (Less than) Checks if the value of the left operand is less than the value of the right operand, if yes, then the condition becomes true. Ex: (A < B) is true. |
5 | >= (Greater than or Equal to) Checks if the value of the left operand is greater than or equal to the value of the right operand, if yes, then the condition becomes true. Ex: (A >= B) is not true. |
6 | <= (Less than or Equal to) Checks if the value of the left operand is less than or equal to the value of the right operand, if yes, then the condition becomes true. Ex: (A <= B) is true. |
Example
The following code shows how to use comparison operators in JavaScript.
<html> <body> <script type="text/javascript"> <!-- var a = 10; var b = 20; var linebreak = "<br />"; document.write("(a == b) => "); result = (a == b); document.write(result); document.write(linebreak); document.write("(a < b) => "); result = (a < b); document.write(result); document.write(linebreak); document.write("(a > b) => "); result = (a > b); document.write(result); document.write(linebreak); document.write("(a != b) => "); result = (a != b); document.write(result); document.write(linebreak); document.write("(a >= b) => "); result = (a >= b); document.write(result); document.write(linebreak); document.write("(a <= b) => "); result = (a <= b); document.write(result); document.write(linebreak); //--> </script> Set the variables to different values and different operators and then try... </body> </html>Output
(a == b) => false (a < b) => true (a > b) => false (a != b) => true (a >= b) => false a <= b) => true Set the variables to different values and different operators and then try...Logical Operators
JavaScript supports the following logical operators −
Assume variable A holds 10 and variable B holds 20, then −
Sr.No | Operator and Description |
---|---|
1 | && (Logical AND) If both the operands are non-zero, then the condition becomes true. Ex: (A && B) is true. |
2 | || (Logical OR) If any of the two operands are non-zero, then the condition becomes true. Ex: (A || B) is true. |
3 | ! (Logical NOT) Reverses the logical state of its operand. If a condition is true, then the Logical NOT operator will make it false. Ex: ! (A && B) is false. |
Example
Try the following code to learn how to implement Logical Operators in JavaScript.
<html> <body> <script type="text/javascript"> <!-- var a = true; var b = false; var linebreak = "<br />"; document.write("(a && b) => "); result = (a && b); document.write(result); document.write(linebreak); document.write("(a || b) => "); result = (a || b); document.write(result); document.write(linebreak); document.write("!(a && b) => "); result = (!(a && b)); document.write(result); document.write(linebreak); //--> </script> <p>Set the variables to different values and different operators and then try...</p> </body> </html>Output
(a && b) => false (a || b) => true !(a && b) => true Set the variables to different values and different operators and then try...Bitwise Operators
JavaScript supports the following bitwise operators −
Assume variable A holds 2 and variable B holds 3, then −
Sr.No | Operator and Description |
---|---|
1 | & (Bitwise AND) It performs a Boolean AND operation on each bit of its integer arguments. Ex: (A & B) is 2. |
2 | | (BitWise OR) It performs a Boolean OR operation on each bit of its integer arguments. Ex: (A | B) is 3. |
3 | ^ (Bitwise XOR) It performs a Boolean exclusive OR operation on each bit of its integer arguments. Exclusive OR means that either operand one is true or operand two is true, but not both. Ex: (A ^ B) is 1. |
4 | ~ (Bitwise Not) It is a unary operator and operates by reversing all the bits in the operand. Ex: (~B) is -4. |
5 | << (Left Shift) It moves all the bits in its first operand to the left by the number of places specified in the second operand. New bits are filled with zeros. Shifting a value left by one position is equivalent to multiplying it by 2, shifting two positions is equivalent to multiplying by 4, and so on. Ex: (A << 1) is 4. |
6 | >> (Right Shift) Binary Right Shift Operator. The left operand’s value is moved right by the number of bits specified by the right operand. Ex: (A >> 1) is 1. |
7 | >>> (Right shift with Zero) This operator is just like the >> operator, except that the bits shifted in on the left are always zero. Ex: (A >>> 1) is 1. |
Example
Try the following code to implement Bitwise operator in JavaScript.
<html> <body> <script type="text/javascript"> <!-- var a = 2; // Bit presentation 10 var b = 3; // Bit presentation 11 var linebreak = "<br />"; document.write("(a & b) => "); result = (a & b); document.write(result); document.write(linebreak); document.write("(a | b) => "); result = (a | b); document.write(result); document.write(linebreak); document.write("(a ^ b) => "); result = (a ^ b); document.write(result); document.write(linebreak); document.write("(~b) => "); result = (~b); document.write(result); document.write(linebreak); document.write("(a << b) => "); result = (a << b); document.write(result); document.write(linebreak); document.write("(a >> b) => "); result = (a >> b); document.write(result); document.write(linebreak); //--> </script> <p>Set the variables to different values and different operators and then try...</p> </body> </html> (a & b) => 2 (a | b) => 3 (a ^ b) => 1 (~b) => -4 (a << b) => 16 (a >> b) => 0 Set the variables to different values and different operators and then try...Assignment Operators
JavaScript supports the following assignment operators −
Sr.No | Operator and Description |
---|---|
1 | = (Simple Assignment ) Assigns values from the right side operand to the left side operand Ex: C = A + B will assign the value of A + B into C |
2 | += (Add and Assignment) It adds the right operand to the left operand and assigns the result to the left operand. Ex: C += A is equivalent to C = C + A |
3 | −= (Subtract and Assignment) It subtracts the right operand from the left operand and assigns the result to the left operand. Ex: C -= A is equivalent to C = C - A |
4 | *= (Multiply and Assignment) It multiplies the right operand with the left operand and assigns the result to the left operand. Ex: C *= A is equivalent to C = C * A |
5 | /= (Divide and Assignment) It divides the left operand with the right operand and assigns the result to the left operand. Ex: C /= A is equivalent to C = C / A |
6 | %= (Modules and Assignment) It takes modulus using two operands and assigns the result to the left operand. Ex: C %= A is equivalent to C = C % A |
Note − Same logic applies to Bitwise operators so they will become like <<=, >>=, >>=, &=, |= and ^=.
Example
Try the following code to implement assignment operator in JavaScript.
<html> <body> <script type="text/javascript"> <!-- var a = 33; var b = 10; var linebreak = "<br />"; document.write("Value of a => (a = b) => "); result = (a = b); document.write(result); document.write(linebreak); document.write("Value of a => (a += b) => "); result = (a += b); document.write(result); document.write(linebreak); document.write("Value of a => (a -= b) => "); result = (a -= b); document.write(result); document.write(linebreak); document.write("Value of a => (a *= b) => "); result = (a *= b); document.write(result); document.write(linebreak); document.write("Value of a => (a /= b) => "); result = (a /= b); document.write(result); document.write(linebreak); document.write("Value of a => (a %= b) => "); result = (a %= b); document.write(result); document.write(linebreak); //--> </script> <p>Set the variables to different values and different operators and then try...</p> </body> </html>Output
Value of a => (a = b) => 10 Value of a => (a += b) => 20 Value of a => (a -= b) => 10 Value of a => (a *= b) => 100 Value of a => (a /= b) => 10 Value of a => (a %= b) => 0 Set the variables to different values and different operators and then try...Miscellaneous Operator
We will discuss two operators here that are quite useful in JavaScript: the conditional operator (? :) and the typeof operator.
Conditional Operator (? :)
The conditional operator first evaluates an expression for a true or false value and then executes one of the two given statements depending upon the result of the evaluation.
Sr.No | Operator and Description |
---|---|
1 | ? : (Conditional ) If Condition is true? Then value X : Otherwise value Y |
Example
Try the following code to understand how the Conditional Operator works in JavaScript.
<html> <body> <script type="text/javascript"> <!-- var a = 10; var b = 20; var linebreak = "<br />"; document.write ("((a > b) ? 100 : 200) => "); result = (a > b) ? 100 : 200; document.write(result); document.write(linebreak); document.write ("((a < b) ? 100 : 200) => "); result = (a < b) ? 100 : 200; document.write(result); document.write(linebreak); //--> </script> <p>Set the variables to different values and different operators and then try...</p> </body> </html>Output
((a > b) ? 100 : 200) => 200 ((a < b) ? 100 : 200) => 100 Set the variables to different values and different operators and then try...typeof Operator
The typeof operator is a unary operator that is placed before its single operand, which can be of any type. Its value is a string indicating the data type of the operand.
The typeof operator evaluates to "number", "string", or "boolean" if its operand is a number, string, or boolean value and returns true or false based on the evaluation.
Here is a list of the return values for the typeof Operator.
Type | String Returned by typeof |
---|---|
Number | "number" |
String | "string" |
Boolean | "boolean" |
Object | "object" |
Function | "function" |
Undefined | "undefined" |
Null | "object" |
Example
The following code shows how to implement typeof operator.
<html> <body> <script type="text/javascript"> <!-- var a = 10; var b = "String"; var linebreak = "<br />"; result = (typeof b == "string" ? "B is String" : "B is Numeric"); document.write("Result => "); document.write(result); document.write(linebreak); result = (typeof a == "string" ? "A is String" : "A is Numeric"); document.write("Result => "); document.write(result); document.write(linebreak); //--> </script> <p>Set the variables to different values and different operators and then try...</p> </body> </html>Output
Result => B is String Result => A is Numeric Set the variables to different values and different operators and then try...Previous Page
Next Page
Comments