What is a web console?
Modern web browsers have development tools built-in to work with JavaScript and other web technologies. These tools include the Console which is similar to a shell interface, along with tools to inspect the Document Object Model (DOM), debug, and analyze network activity.
The Console is generally used by the developers to log information as part of the JavaScript development process, which also allows you to interact with web pages. For more detailed information about web console and how to run it, you can visit here.
How addition is performed in JavaScript ?
In JavaScript, addition can be performed only on numbers and strings, all the other values are converted to either of those types. There are two kinds of values in JavaScript-
- Primitive – undefined, null, boolean, numbers, strings
- Object – arrays, and functions
Let’s understand the general rule of addition:
So, consider the given expression
var result = value 1 + value 2
- If either value 1 or value 2 is a string then the result be will string and the output will be the concatenation of both value 1 and value 2;
- Otherwise, it will convert the result to numbers, and output will be the sum of value 1 and value 2.
Examples:
> var value1 = “hello” > var value2 = 123 > var result = value1 + value2 > console.log(result) Output : hello123 > typeof(result) Output : “String” > var result = value1 + value1 > console.log(result) Output : 246 > typeof(result) Output : “number”
Some more expected results: Adding two empty arrays:
> var result = []+[] > console.log(result) Output : > typeof(result) Output : "string" Hence the result of []+[] is the concatenation of two empty strings.
JavaScript Object Literals: It is a simple way of creating an object using { } brackets. Objects can include comma-separated key-value pairs in { }, where a key would be property or method name, and value will be the value of the property of any data type or a function.
Syntax:
var <object-name> = { key1: value1, key2: value2,... keyN: valueN};
Adding String and objects:
> var result = []+{}
> console.log(result)
Output : [object Object]
> String({})
Output:'[object Object]'
Explanation: Hence, in the above example, an empty object is converted into string yielding the following result. And the result is thus created by concatenating ” ” and “[object Object]”.
Some more interesting result: Take a look at the following:
Explanation: Here, JavaScript interprets the first {} as an empty block of code and ignores it. The result NaN is computed by evaluating + {}. The plus (+) here is not the binary addition operator, it is a unary prefix operator that transforms its operand to a number, in the same manner as Number(). For example:
> +”10”
output: 10
But, the question arises why javascript interpreted the first {} as an empty code block?
This is because the entire input is parsed as a statement and the first curly braces of the statement are interpreted as starting a code block. Hence, this can be fixed by forcing the input to be parsed as an expression like this:
> ({} + {})
Output: ‘[object Object][object Object]’
Now, Chrome dev tools automatically wrap everything that begins with { and ends with } in an implicit pair of parentheses (see code), to force its evaluation as an expression.
Hence {}+{} is no longer NaN in the chrome console and in most of the modern browsers now.
