JavaScript supports all basic arithmetic operations. In this tutorial, you'll learn how the regular +
, -
, *
, and /
perform on different data types.
Addition
You can use the binary operator +
to add two numbers in JS. It’s called binary because it needs exactly two operands (numbers in our case) to perform the desired action.
const sum = 2 + 2; // 4
So, the result is exactly what you would expect here, but things change when we start using other data types. For example, if one of the operands is a string, then the other one will also be considered a string. Those two strings will be concatenated or "glued" together.
const numberPlusString = 2 + '2'; // 22
const booleanPlusString = true + 'Story'; // trueStory
const stringPlusString = 'just' + 'Strings'; // justStrings
You can also place a regular object, an array, or a function on any side of the +
operator. In this case, they will be first converted to a string and then the addition will be done.
const f = () => {return 0};
const obj = {type: 'regular'};
const arr = [1, 2, 3];
console.log('Hello!' + f); // Hello!() => {return 0}
console.log(true + obj); // true[object Object]
console.log(1 + arr); // 11,2,3
Notice that most objects will be converted to strings as [object Object]
. If you want to do something different, then you should implement a custom toString()
function.
const obj = {
type: 'regular',
toString: function () {
return JSON.stringify(this);
},
};
console.log(1 + obj); // 1{"type":"regular"}
Interesting things happen when either both operands are boolean or one of them is a boolean and another one is a number. In this case true
will always be converted to 1
and false
will become 0
.
const truePlusTrue = true + true; // 2
const truePlusFalse = true + false; // 1
const booleanPlusNumber = true + 5; // 6
Subtraction, multiplication, and division
Even though the rules for addition might seem quite complex, other basic operations follow common sense logic. With numbers, everything is as expected.
const subtractionResult = 10 - 2; // 8
const multiplicationResult = 2 * 2; // 4
const divisionResult = 10 / 2; // 5
Booleans are still converted to either 0
or 1
when on the other side is a boolean or a number.
console.log(true / true); // 1
console.log(5 * false); // 0
console.log(true - false); // 1
Infinity
and -Infinity
If you try to divide something by 0
or false
, then the result is either Infinity
or -Infinity
.
console.log(5 / 0); // Infinity
console.log(-5 / false); // -Infinity
NaN
In most other cases when it’s hard to make sense of the arithmetic expression, the result will be NaN
or "not-a-number".
console.log(false / false); // NaN
console.log(10 / 'string'); // NaN
console.log(5 * {}); // NaN
console.log({} - []) // NaN
Empty Array
An empty array is converted either to an empty string or into 0
whenever possible.
console.log('str1' + [] + 'str2'); // str1str2
console.log(12 * []); // 0
console.log(5 - []); // 5
console.log(1 / []); // Infinity
Unary increment and decrement
Two very useful operators allow you to either increment or decrement the value of the variable by 1. They look like double plus ++
and double minus --
.
let counter = 0;
counter++;
console.log(counter); // 1
counter--;
console.log(counter); // 0
The ++
and --
operators can be placed on either side of the variable. Both counter++
and ++counter
expressions are valid. The difference can be represented by these examples:
let i = 0;
console.log(i++); // 0
console.log(i); // 1
So, first, we’ve taken the value of i
, logged it into the screen, and then did the increment, which we see in the second console.log
.
With ++i
it’s the other way around.
let i = 0;
console.log(++i); // 1
console.log(i); // 1
To make sure you got this right, please answer the following question in the comments below.
let x = 1;
let y = 2;
let z = 3;
console.log(++x - y-- + z++); // ?
Conclusion
Thank you for reading the whole article! Now you know how basic arithmetic operations work in JavaScript, their rules, and exceptions.
The +
, -
, *
, /
behave as expected with numbers, but with strings, objects, arrays, functions, and booleans it changes a lot.
Top comments (1)
Hey thanx for this. I am new to JS and I hit problem so I need help understanding this while loop.
Could you please help me understand this:
Var number =1;
Var sum = 0;
While(number < 11){
Sum += number;
++number;
}
Console.log(sum); //Displays 55
My question is how does it get to 55?
I'd appreciate it if you can break it down for this Newby.
Thanx in advance m