JavaScript Quiz #11

Assume that we have the following short JavaScript code:

<script>
    var x = !!"Hello" + (!"world", !!"from here!!");
    
    alert(x);
</script> 

Will this code succeed or fail? and if it succeeds, what is the output of the alert?
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The code will work fine. The alert will output 2. Let’s understand why we will have this result.

The following sequence of operations occurs:
1. !!"Hello" ==> This operand will be evaluated to !false which will be finally true.
2. (!"world", !!"from here!!") ==> The comma operator evaluates both of its operands (from left to right) and returns the value of the second operand. which means that !!"from here!!" will be returned and will be evaluated to true.
3. As none of the operands is of String type, the + operands will be converted to number which means true + true will be evaluated to 1 + 1 which will equal finally 2.

JavaScript Quiz #5

This quiz covers some of the JavaScript operators in order to explain they can work together inside expressions. Assume that we have the following JavaScript code:

var object1 = {
    valueOf: function () {
	return 10;
    },
    toString: function () {
	return "object1";
    }
};

var object2 = {
    valueOf: function () {
	return 20;
    },
    toString: function () {
	return "object2";
    }
};

var object3 = {
    valueOf: function () {
	return 30;
    },
    toString: function () {
	return "object3";
    }
};

var result = (object2, object1, object3) + object1 +-- object1; 
alert(result);

What is the output of the alert?
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The output of the alert is 49. Let’s analyze this quiz. In the following expression:

(object2, object1, object3)

In order to know the result of this expression, we have to know how expressions work with the comma operator, if we have an expression that contains many comma operators then this expression will be evaluated to the last mentioned value. This means that
(object2, object1, object3) will be evaluated to object3. We will then have the following reduced expression:

object3 + object1 +-- object1

In this expression, we have two main operators:
1. + operator.
2. — prefix operator.

The execution order will be as follows:
1. — prefix operator.
2. + operator.

To get the complete list of operator precedence, check https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Operator_Precedence.

The execution order means that the expression evaluation will start by:

-- object1

The — prefix operator will be applied on object1 which will result in calling the valueOf method of object1, This means that the result will be 10 – 1 = 9.

Then the evaluation execution continues by adding object3 + object1 to the previous result as follows:

object3 + object1 + 9

Now, we come to the simplest part of the quiz, the valueOf methods of object1 and object3 are called, which means that the final result will be 30 + 10 + 9 = 49.

The original addition 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).

In order to check previous quizzes:
1. JavaScript Quiz #4
2. JavaScript Quiz #3
3. JavaScript Quiz #2
4. JavaScript Quiz #1

JavaScript Quiz #4

Understanding JavaScript by example is useful for absorbing the different concepts of the language quickly. In this post, I will illustrate a JavaScript Quiz to understand how the JavaScript operators work together. Assume that we have the following JavaScript code:

var object1 = {
    valueOf: function () {
        return 1;
    },
    toString: function () {
        return "object1";
    }
};

var object2 = {
    valueOf: function () {
        return 2;
    },
    toString: function () {
        return "object2";
    }
};

alert((object2 > object1 +-- object1) + true); //What is the output of the alert?

What is the output of the alert?
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The output of the alert is 2. In order to understand why we have this result, we should know how the different JavaScript operators work together. Let’s analyze this quiz.
In the following expression:

(object2 > object1 +-- object1) + true

We have two main part, the first part is the expression between brackets and the second one is the boolean true operand. Let’s see how the first part will be evaluated.

object2 > object1 +-- object1

In this expression, we have three main operators:
1. > operator.
2. + operator.
3. — prefix operator.

The execution order will be as follows:
1. — prefix operator.
2. + operator.
3. > operator.

To get the complete list of operator precedence, check https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Operator_Precedence.

The execution order means that the expression evaluation will start by:

-- object1

The — prefix operator will be applied on object1 which will result in calling the valueOf method of object1, which means that the result will be 1 – 1 = 0.

Then the evaluation continues by adding object1 to the previous result:

object1 + 0

The valueOf method of object1 is called again, which means that the result will be 1 + 0 = 1.

Then the comparison will be performed as follows:

object2 > 1

In order to perform the comparison, the valueOf method of object2 is called, which means that the result will be 2 > 1 = true.

Then finally we will have the following:

true + true

According to Ecma-262, if we have an arithmetic plus operator and none of its operand are of type String, then both operands will be converted to numeric and the addition operation is performed. In JavaScript when true is converted to Numeric, the result will be 1 (while false is converted to 0).

The original addition 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).