<h1 id="javascript-arithmetic-operators">JavaScript Arithmetic Operators</h1>
<p><strong>Summary</strong>: in this tutorial, you will learn how to use JavaScript arithmetic operators to perform arithmetic calculations.</p>
<h2 id="introduction-to-the-javascript-arithmetic-operators">Introduction to the JavaScript Arithmetic Operators</h2>
<p>JavaScript supports the following standard arithmetic operators:</p>
<table>
<thead>
<tr>
<th align="left">Operator</th>
<th align="left">Sign</th>
</tr>
</thead>
<tbody><tr>
<td align="left">Addition</td>
<td align="left"><code>+</code></td>
</tr>
<tr>
<td align="left">Subtraction</td>
<td align="left"><code>-</code></td>
</tr>
<tr>
<td align="left">Multiplication</td>
<td align="left"><code>*</code></td>
</tr>
<tr>
<td align="left">Division</td>
<td align="left"><code>/</code></td>
</tr>
</tbody></table>
<p>An arithmetic operator accepts numerical values as operands and returns a single numerical value. The numerical values can be literals or variables.</p>
<h2 id="addition-operator-">Addition operator (+)</h2>
<p>The addition operator returns the sum of two values. For example, the following uses the addition operator to calculate the sum of two numbers:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">let</span> sum = <span class="hljs-number">10</span> + <span class="hljs-number">20</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(sum); <span class="hljs-comment">// 30Code language: JavaScript (javascript)</span>
</code></pre>
<p>Also, you can use the addition operator with two <a href="https://www.javascripttutorial.net/javascript-variables/">variables</a>. For example:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">let</span> netPrice = <span class="hljs-number">9.99</span>,
shippingFee = <span class="hljs-number">1.99</span>;
<span class="hljs-keyword">let</span> grossPrice = netPrice + shippingFee;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(grossPrice);<span class="hljs-title class_">Code</span> <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<p>Output:</p>
<pre><code class="hljs language-js"><span class="hljs-number">11.</span>98Code <span class="hljs-attr">language</span>: <span class="hljs-variable constant_">CSS</span> (css)
</code></pre>
<p>If either value is a <a href="https://www.javascripttutorial.net/string/">string</a>, the addition operator uses the following rules:</p>
<ul>
<li>If both values are strings, it concatenates the second string to the first one.</li>
<li>If one value is a string, it implicitly converts the numeric value into a string and conatenate two strings.</li>
</ul>
<p>For example, the following uses the addition operator to add concatenate two strings:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">let</span> x = <span class="hljs-string">'10'</span>,
y = <span class="hljs-string">'20'</span>;
<span class="hljs-keyword">let</span> result = x + y;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(result);<span class="hljs-title class_">Code</span> <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<p>Output:</p>
<pre><code class="hljs language-js"><span class="hljs-number">1020</span>
</code></pre>
<p>The following example shows how to use the addition operator to calculate the sum of a number and a string:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">let</span> result = <span class="hljs-number">10</span> + <span class="hljs-string">'20'</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(result); <span class="hljs-title class_">Code</span> <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<p>Output:</p>
<pre><code class="hljs language-js"><span class="hljs-number">1020</span>
</code></pre>
<p>In this example, JavaScript converts the number <code>10</code> into a string <code>'10'</code> and concatenates the second string <code>'20'</code> to it.</p>
<p>The following table shows the result when using the addition operator with special numbers:</p>
<table>
<thead>
<tr>
<th align="left">First Value</th>
<th align="left">Second Value</th>
<th align="left">Result</th>
<th align="left">Explanation</th>
</tr>
</thead>
<tbody><tr>
<td align="left">NaN</td>
<td align="left"></td>
<td align="left">NaN</td>
<td align="left">If either value is NaN, the result is NaN</td>
</tr>
<tr>
<td align="left">Infinity</td>
<td align="left">Infinity</td>
<td align="left">Infinity</td>
<td align="left">Infinity + Infinity = Infinity</td>
</tr>
<tr>
<td align="left">-Infinity</td>
<td align="left">-Infinity</td>
<td align="left">-Infinity</td>
<td align="left">-Infinity + ( -Infinity) = – Infinity</td>
</tr>
<tr>
<td align="left">Infinity</td>
<td align="left">-Infinity</td>
<td align="left">NaN</td>
<td align="left">Infinity + -Infinity = NaN</td>
</tr>
<tr>
<td align="left">+0</td>
<td align="left">+0</td>
<td align="left">+0</td>
<td align="left">+0 + (+0) = +0</td>
</tr>
<tr>
<td align="left">-0</td>
<td align="left">+0</td>
<td align="left">+0</td>
<td align="left">-0 + (+0) = +0</td>
</tr>
<tr>
<td align="left">-0</td>
<td align="left">-0</td>
<td align="left">-0</td>
<td align="left">-0 + (-0) = -0</td>
</tr>
</tbody></table>
<h2 id="subtraction-operator--">Subtraction operator (-)</h2>
<p>The subtraction operator (<code>-</code>) subtracts one number from another. For example:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">let</span> result = <span class="hljs-number">30</span> - <span class="hljs-number">10</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(result); <span class="hljs-comment">// 20Code language: JavaScript (javascript)</span>
</code></pre>
<p>If a value is a string, a boolean, null, or undefined, the JavaScript engine will:</p>
<ul>
<li>First, convert the into a number using the Number() function.</li>
<li>Second, perform the subtraction.</li>
</ul>
<p>The following table shows how to use the subtraction operator with special values:</p>
<table>
<thead>
<tr>
<th align="left">First Value</th>
<th align="left">Second Value</th>
<th align="left">Result</th>
<th align="left">Explanation</th>
</tr>
</thead>
<tbody><tr>
<td align="left">NaN</td>
<td align="left"></td>
<td align="left">NaN</td>
<td align="left">If either value is NaN, the result is NaN</td>
</tr>
<tr>
<td align="left">Infinity</td>
<td align="left">Infinity</td>
<td align="left">NaN</td>
<td align="left">Infinity – Infinity = NaN</td>
</tr>
<tr>
<td align="left">-Infinity</td>
<td align="left">-Infinity</td>
<td align="left">NaN</td>
<td align="left">-Infinity – ( -Infinity) = NaN</td>
</tr>
<tr>
<td align="left">Infinity</td>
<td align="left">-Infinity</td>
<td align="left">-Infinity</td>
<td align="left">-Infinity</td>
</tr>
<tr>
<td align="left">+0</td>
<td align="left">+0</td>
<td align="left">+0</td>
<td align="left">+0 – (+0) = +0</td>
</tr>
<tr>
<td align="left">+0</td>
<td align="left">-0</td>
<td align="left">-0</td>
<td align="left">+0 – (-0) = -0</td>
</tr>
<tr>
<td align="left">-0</td>
<td align="left">-0</td>
<td align="left">+0</td>
<td align="left">-0 – (-0) = +0</td>
</tr>
</tbody></table>
<h2 id="multiplication-operator-">Multiplication operator (*)</h2>
<p>JavaScript uses the asterisk (*) to represent the multiplication operator. The multiplication operator multiplies two numbers and returns a single value. For example:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">let</span> result = <span class="hljs-number">2</span> * <span class="hljs-number">3</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(result);<span class="hljs-title class_">Code</span> <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<p>Output:</p>
<pre><code class="hljs language-js"><span class="hljs-number">6</span>
</code></pre>
<p>If either value is not a number, the JavaScript engine implicitly converts it into a number using the <code>Number()</code> function and performs the multiplication. For example:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">let</span> result = <span class="hljs-string">'5'</span> * <span class="hljs-number">2</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(result);<span class="hljs-title class_">Code</span> <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<p>Output:</p>
<pre><code class="hljs language-js"><span class="hljs-number">10</span>
</code></pre>
<p>The following table shows how the multiply operator behaves with special values:</p>
<table>
<thead>
<tr>
<th align="left">First Value</th>
<th align="left">Second Value</th>
<th align="left">Result</th>
<th align="left">Explanation</th>
</tr>
</thead>
<tbody><tr>
<td align="left">NaN</td>
<td align="left"></td>
<td align="left">NaN</td>
<td align="left">If either value is NaN, the result is NaN</td>
</tr>
<tr>
<td align="left">Infinity</td>
<td align="left">0</td>
<td align="left">NaN</td>
<td align="left">Infinity * 0 = NaN</td>
</tr>
<tr>
<td align="left">Infinity</td>
<td align="left">Positive number</td>
<td align="left">Infinity</td>
<td align="left">-Infinity * 100 = Infinity</td>
</tr>
<tr>
<td align="left">Infinity</td>
<td align="left">Negative number</td>
<td align="left">-Infinity</td>
<td align="left">Infinity * (-100) = -Infinity</td>
</tr>
<tr>
<td align="left">Infinity</td>
<td align="left">Infinity</td>
<td align="left">Infinity</td>
<td align="left">Infinity * Infinity = Infinity</td>
</tr>
</tbody></table>
<h2 id="divide-operator-">Divide operator (/)</h2>
<p>Javascript uses the slash (<code>/</code>) character to represent the divide operator. The divide operator divides the first value by the second one. For example:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">let</span> result = <span class="hljs-number">20</span> / <span class="hljs-number">10</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(result); <span class="hljs-comment">// 2Code language: JavaScript (javascript)</span>
</code></pre>
<p>If either value is not a number, the JavaScript engine converts it into a number for division. For example:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">let</span> result = <span class="hljs-string">'20'</span> / <span class="hljs-number">2</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(result); <span class="hljs-comment">// 10;Code language: JavaScript (javascript)</span>
</code></pre>
<p>The following table shows the divide operators’ behavior when applying to special values:</p>
<table>
<thead>
<tr>
<th align="left">First Value</th>
<th align="left">Second Value</th>
<th align="left">Result</th>
<th align="left">Explanation</th>
</tr>
</thead>
<tbody><tr>
<td align="left">NaN</td>
<td align="left"></td>
<td align="left">NaN</td>
<td align="left">If either value is NaN, the result is NaN</td>
</tr>
<tr>
<td align="left">A number</td>
<td align="left">0</td>
<td align="left">Infinity</td>
<td align="left">1/0 = Infinity</td>
</tr>
<tr>
<td align="left">Infinity</td>
<td align="left">Infinity</td>
<td align="left">Infinity</td>
<td align="left">Infinity / Infinity = NaN</td>
</tr>
<tr>
<td align="left">0</td>
<td align="left">0</td>
<td align="left">NaN</td>
<td align="left">0/0 = NaN</td>
</tr>
<tr>
<td align="left">Infinity</td>
<td align="left">A positive number</td>
<td align="left">Infinity</td>
<td align="left">Infinity / 2 = Infinity</td>
</tr>
<tr>
<td align="left">Infinity</td>
<td align="left">A negative number</td>
<td align="left">-Infinity</td>
<td align="left">Infinity / -2 = -Infinity</td>
</tr>
</tbody></table>
<h2 id="using-javascript-arithmetic-operators-with-objects">Using JavaScript arithmetic operators with objects</h2>
<p>If a value is an <a href="https://www.javascripttutorial.net/javascript-objects/">object</a>, the JavaScript engine will call the <code>valueOf()</code> method of the object to get the value for calculation. For example:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">let</span> energy = {
<span class="hljs-title function_">valueOf</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">return</span> <span class="hljs-number">100</span>;
},
};
<span class="hljs-keyword">let</span> currentEnergy = energy - <span class="hljs-number">10</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(currentEnergy);
currentEnergy = energy + <span class="hljs-number">100</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(currentEnergy);
currentEnergy = energy / <span class="hljs-number">2</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(currentEnergy);
currentEnergy = energy * <span class="hljs-number">1.5</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(currentEnergy);
<span class="hljs-title class_">Code</span> <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<p>Output:</p>
<pre><code class="hljs language-js"><span class="hljs-number">90</span>
<span class="hljs-number">200</span>
<span class="hljs-number">50</span>
<span class="hljs-number">150</span>
</code></pre>
<p>If the object doesn’t have the <code>valueOf()</code> method but has the <code>toString()</code> method, the JavaScript engine will call the <code>toString()</code> method to get the value for calculation. For example:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">let</span> energy = {
<span class="hljs-title function_">toString</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">return</span> <span class="hljs-number">50</span>;
},
};
<span class="hljs-keyword">let</span> currentEnergy = energy - <span class="hljs-number">10</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(currentEnergy);
currentEnergy = energy + <span class="hljs-number">100</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(currentEnergy);
currentEnergy = energy / <span class="hljs-number">2</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(currentEnergy);
currentEnergy = energy * <span class="hljs-number">1.5</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(currentEnergy);
<span class="hljs-title class_">Code</span> <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<p>Output:</p>
<pre><code class="hljs language-js"><span class="hljs-number">40</span>
<span class="hljs-number">150</span>
<span class="hljs-number">25</span>
<span class="hljs-number">75</span>
</code></pre>
<h2 id="summary">Summary</h2>
<ul>
<li>Use the JavaScript arithmetic operators including addition (<code>+</code>), subtraction (<code>-</code>), multiply (<code>*</code>) and divide (<code>/</code>) to perform arithmetic opeations.</li>
</ul>