Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

JavaScript Quiz #3

DZone's Guide to

JavaScript Quiz #3

Hope you know the data type priorities when using the "+" operator in JavaScript. Strings added to numbers result in strings, but what about strings and objects?

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Understanding JavaScript by example is useful for absorbing the different concepts of the language quickly. In this post, I will give you a quick JavaScript Quiz to illustrate how the JavaScript (+) operator works. Assume that we have the following JavaScript code:

var object1 = {
    someVar: 2,
    someName: "object1",
    valueOf: function () {
        return this.someVar;
    },
    toString: function () {
        return this.someName;
    }
};

var result = "I equal " + object1;

alert(result); //What is the output of the alert?

Question: What is the output of the alert?

*Write your answer on a piece of paper and then read the answer.*


Answer:

The output of the alert is “I equal 2″. In order to understand why we have this result, we should know how the JavaScript (+) operator works. Normally the (+) operator favors strings, which means that if we have a String + Number then Number will be converted to a String and the result will be a concatenation between the two String objects.

If we have a String + Object, then the toString() method will be called on the Object's valueOf() method.

"I equal " + object1;

In the line above, the right hand side value of the expression will be evaluated to “2” which will be concatenated with the left hand side value to produce the string “I equal 2″.

The original rule according to Ecma-262 specification is as follows for your reference:
“The addition operator either performs string concatenation or numeric addition.

The production AdditiveExpression : AdditiveExpression + MultiplicativeExpression is evaluated as follows:
1. Let lref be the result of evaluating AdditiveExpression.
2. Let lval be GetValue(lref).
3. Let rref be the result of evaluating MultiplicativeExpression.
4. Let rval be GetValue(rref).
5. Let lprim be ToPrimitive(lval).
6. Let rprim be ToPrimitive(rval).
7. If Type(lprim) is String or Type(rprim) is String, then
a. Return the String that is the result of concatenating ToString(lprim) followed by ToString(rprim)
8. Return the result of applying the addition operation to ToNumber(lprim) and ToNumber(rprim).”

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
javascript ,web dev

Published at DZone with permission of Hazem Saleh, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}