Develop Reference

why the small number string is greater than big number string in javascript [duplicate]

The comparison operators like > and < return Boolean value when their input is given as two string values.
I tried few examples:
/* String vs String */
console.log('firstName' < 'lastname'); // true
console.log('firstName' < 'Firstname'); // false
console.log('!firstName' < 'lastname'); // true
console.log('!firstName' < 'Firstname'); // true
console.log('!firstName' < '!Firstname'); // false
console.log('!firstName' < '_!Firstname'); // true
console.log('#!firstName' < '_!Firstname'); // true
console.log('#!firstName' < '2_!Firstname'); // false
/* String vs Number */
console.log('#!firstName' < 2); // false
console.log('#!firstName' < -1); // false
/* String vs Special Numbers */
console.log('#!firstName' < Infinity); // false
console.log('#!firstName' < -Infinity); // false
console.log('#!firstName' < -Infinity + Infinity); // false
/* String vs NaN */
console.log('#!firstName' < NaN); // false
console.log(NaN.toString()); // "NaN"
console.log('#!firstName' < "NaN"); // true
/* String vs Arrays */
console.log('firstName' < [Infinity, -Infinity]); // false
console.log('firstName' < ['Firstname', Infinity, -Infinity]); // false
console.log('firstName' < ['2_Firstname', Infinity, -Infinity]); // false
I'm really curious to know how JavaScript really evaluates such expressions. In the above examples, I find this one as the most fascinating one console.log('#!firstName' < Infinity); // false.
So, the question I have is:
How is the comparison done using "is greater than" and "is
less than" operators in JavaScript in these scenarios (from above examples):
String vs String,
String vs Number,
String vs Special Numbers,
String vs NaN,
String vs Arrays

As said above, the formal specification is in the standard: http://www.ecma-international.org/ecma-262/7.0/#sec-abstract-relational-comparison , in layman's terms the logic is like this:
1) String vs String
Split both strings into 16-bit code units and compare them numerically. Note that code units != characters, e.g. "cafè" < "cafè" is true (really).
2) String vs other primitive
Convert both to numbers. If one of them is NaN, return false, otherwise compare numerically. +0 and -0 are considered equal, +/-Infinity is bigger/smaller than anything else.
3) String vs Object
Try to convert the object to a primitive, attempting, in order, [Symbol.toPrimitive]("number"), valueOf and toString. If we've got string, proceed to 1), otherwise proceed to 2). For arrays specifically, this will invoke toString which is the same as join.

String, String comparison is based on Unicode ordering (a is greater than A).
String, Number comparison first converts the string into a number before comparing (same with infinity).
String, Array comparison first converts the array into a string and then compares as above.
Javascript String Comparison
Javascript Object Comparison

The precise steps to take are described in the specification, which specifically describes what to do in the case that one (or both) sides of the comparison are NaN or +Infinity or -Infinity. For px < py, for example, the less-than operator calls the Abstract Relational Comparison Algorithm:
11.8.5 The Abstract Relational Comparison Algorithm
(If both items being compared are not strings, then:)
Let nx be the result of calling ToNumber(px). Because px and py are primitive values evaluation order is not important.
Let ny be the result of calling ToNumber(py).
If nx is NaN, return undefined.
If ny is NaN, return undefined.
If nx and ny are the same Number value, return false.
If nx is +0 and ny is −0, return false.
If nx is −0 and ny is +0, return false.
If nx is +∞, return false.
If ny is +∞, return true.
If ny is −∞, return false.
If nx is −∞, return true.
If the mathematical value of nx is less than the mathematical value of ny —note that these mathematical values are both finite and not both zero—return true. Otherwise, return false.
Else, both px and py are Strings
If py is a prefix of px, return false. (A String value p is a prefix of String value q if q can be the result of concatenating p and some other String r. Note that any String is a prefix of itself, because r may be the empty String.)
If px is a prefix of py, return true.
Let k be the smallest nonnegative integer such that the character at position k within px is different from the character at position k within py. (There must be such a k, for neither String is a prefix of the other.)
Let m be the integer that is the code unit value for the character at position k within px.
Let n be the integer that is the code unit value for the character at position k within py.
If m < n, return true. Otherwise, return false.
When both items being compared are strings, it effectively results in the code points of each character being compared. For example, 'firstName' < 'lastname' because the character code of f (102) is smaller than the character code of l (108). For '!firstName' < 'Firstname', the character code of ! (33) is smaller than the character code of F (70), so that evaluates to true as well. See the following snippet for an example of the implementation:
function compare(left, right) {
for (let i = 0; i < left.length; i++) {
const c1 = left[i].charCodeAt();
const c2 = right[i].charCodeAt();
if (c1 !== c2) {
console.log('Char code comparision:', c1 < c2, '< comparison:', left < right);
break;
}
}
}
/* String vs String */
compare('firstName', 'lastname'); // true
compare('firstName', 'Firstname'); // false
compare('!firstName', 'lastname'); // true
compare('!firstName', 'Firstname'); // true
compare('!firstName', '!Firstname'); // false
compare('!firstName', '_!Firstname'); // true
compare('#!firstName', '_!Firstname'); // true
compare('#!firstName', '2_!Firstname'); // false

Is Object.is(x,y) faster than other comparisons?

So in JavaScript we have three equality comparison operators. I've been reading the ECMAScript specification and looking at how they work. Something struck me. The Object.is() built in function has less steps to it's comparison and it has a greater chance of terminating early than the other operators. So does this make Object.is() function faster than the other operators?
Here are the specification snippets:
Object.is()
If Type(x) is different from Type(y), return false.
If Type(x) is Number, then
a. If x is NaN and y is NaN, return true.
b. If x is +0 and y is -0, return false.
c. If x is -0 and y is
+0, return false.
d. If x is the same Number value as y, return true.
e. Return false.
Return SameValueNonNumber(x, y).
Loose equals ==
The comparison x == y, where x and y are values, produces true or
false. Such a comparison is performed as follows:
If Type(x) is the same as Type(y), then
a. Return the result of performing Strict Equality Comparison x === y.
If x is null and y is undefined, return true.
If x is undefined and y is null, return true.
If Type(x) is Number and Type(y) is String, return the result of the comparison x == ! ToNumber(y).
If Type(x) is String and Type(y) is Number, return the result of the comparison ! ToNumber(x) == y.
If Type(x) is Boolean, return the result of the comparison ! ToNumber(x) == y.
If Type(y) is Boolean, return the result of the comparison x == ! ToNumber(y).
If Type(x) is either String, Number, or Symbol and Type(y) is Object, return the result of the comparison x == ToPrimitive(y).
If Type(x) is Object and Type(y) is either String, Number, or Symbol, return the result of the comparison ToPrimitive(x) == y.
Return false.
Strict equals ===
The comparison x === y, where x and y are values, produces true or
false. Such a comparison is performed as follows:
If Type(x) is different from Type(y), return false.
If Type(x) is Number, then
a. If x is NaN, return false.
b. If y is NaN, return false.
c. If x is the same Number value as y, return true.
d. If x is +0 and y is -0, return true.
e. If x is -0 and y is +0, return true.
f. Return false.
Return SameValueNonNumber(x, y).
If someone who works on JavaScript compilers could answer that question, that would be great!

Less steps in the spec do not necessarily mean less steps in the implementation. All kinds of optimizations apply here. So in the end, all we can do is to actually race the horses! (in your real world usecase, some synthetic while(true) Object.is(1, 1); won't generate any useful results). If it is really (notably) faster, does it make your code better, e.g. is
Object.is(user.age, 3)
clearer than
user.age === 3
?

(!n%2) is the same as (!n%2 == 0)?

I am trying to understand this code from Eloquent JavaScript:
function unless(test, then) {
if (!test) then();
}
function repeat(times, body) {
for (var i = 0; i < times; i++) body(i);
}
repeat(3, function(n) {
unless(n % 2, function() {
console.log(n, "is even");
});
});
// → 0 is even
// → 2 is even
I get that it says, run the following code 3 times testing with 0,1,2:
if (!n%2) function(n) {
console.log(n, "is even");
});
What I don't get is how we get true/false from (!n%2)?
Is (!n%2) the same as (!n%2 == 0)?

Logical NOT ! has higher precedence than modulo operator %.
Thus, (!n%2) is equivalent to (!n) % 2 which will always return 0 a falsy value except when n = 0.
Whereas (!n%2 == 0) will return true(again except 0).
They both are not equal, in fact they are opposite of each other(falsy vs truthy value).
You need !(n % 2).
Or simply to check if number is even
n % 2 === 0

Your test code you wrote is not equivalent to the sample code from the article.
In the sample code, n % 2 is evaluated first, and the result is passed into the unless function. There, you are performing a Logical Not operation against the result.
If n is even, n % 2 will pass 0 to unless. A Boolean comparison of 0 returns false, and the ! negates the result (logical not), so !0 == true. this, in turn, causes the then function to fire.
If n is odd, the opposite occurs. Some value other than 0 is passed, which evaluates to false, causing then to not fire.
In contrast, your attempt to reproduce the sample code without using Higher-Order functions won't work the same way. !n % 2 will perform the Logical Not on n first, then try to modulo the result. !(n % 2) is a better representation of the sample code.

!Boolean(n%2) should work as a way to determine whether one is even or odd.
Remember that Boolean does not follow BIDMAS.
It does !n first where n is treated as a Boolean so that the numerical value of 0 is treated as false and any other numerical value is treated as true. The exclamation mark inverts the logic state of n.
Now the %2 converts the Boolean back to an integer where true is 1 and 0 is false. !n = 0 returns 0 and !n = 1 returns 1.
Using !n%2 in an if statement converts it back to a Boolean (1 = true, 0 = false).
Thus if n = 0 then the if statements proceeds because it returned true. If n != 0 (!= meaning not equal) then if statement is skipped because it returned false.

No, it's not. As stated here the "!" operator has highest precedence than "%" so the expression will return true if n is 0 and false if n is different from 0.
More in detail, suppose n is 2. the execution of the expression is:
(!n)%2
(!2)%2
0%2
0
so it is false, now for n=0
(!0)%2
1%2
1
so it is true. It is the opposite behavior of (!n%2 == 0) that returns true if n is different from 0 and false otherwise since == has less precendence and the comparison with 0 is executed at the end of the calculation above. You can easily convince yourself by using this simple javascript with different values of n:
n = 1;
if(!n%2)
{
document.getElementById("par1").innerHTML="true";
}
if(!n%2 == 0)
{
document.getElementById("par2").innerHTML="true";
}

How do Javascript Math.max and Math.min actually work?

I am really curious how these functions actually work? I know there are a lot of questions about how to use these, I already know how to use them, but I couldn't find anywhere how to actually go about implementing this functionality on an array, for example, if there were no such functions? How would you code such a function if there were no helpers?

Here is the Math.max code in Chrome V8 engine.
function MathMax(arg1, arg2) { // length == 2
var length = %_ArgumentsLength();
if (length == 2) {
arg1 = TO_NUMBER(arg1);
arg2 = TO_NUMBER(arg2);
if (arg2 > arg1) return arg2;
if (arg1 > arg2) return arg1;
if (arg1 == arg2) {
// Make sure -0 is considered less than +0.
return (arg1 === 0 && %_IsMinusZero(arg1)) ? arg2 : arg1;
}
// All comparisons failed, one of the arguments must be NaN.
return NaN;
}
var r = -INFINITY;
for (var i = 0; i < length; i++) {
var n = %_Arguments(i);
n = TO_NUMBER(n);
// Make sure +0 is considered greater than -0.
if (NUMBER_IS_NAN(n) || n > r || (r === 0 && n === 0 && %_IsMinusZero(r))) {
r = n;
}
}
return r;
}
Here is the repository.

Below is how to implement the functions if Math.min() and Math.max() did not exist.
Functions have an arguments object, which you can iterate through to get its values.
It's important to note that Math.min() with no arguments returns Infinity, and Math.max() with no arguments returns -Infinity.
function min() {
var result= Infinity;
for(var i in arguments) {
if(arguments[i] < result) {
result = arguments[i];
}
}
return result;
}
function max() {
var result= -Infinity;
for(var i in arguments) {
if(arguments[i] > result) {
result = arguments[i];
}
}
return result;
}
//Tests
console.log(min(5,3,-2,4,14)); //-2
console.log(Math.min(5,3,-2,4,14)); //-2
console.log(max(5,3,-2,4,14)); //14
console.log(Math.max(5,3,-2,4,14)); //14
console.log(min()); //Infinity
console.log(Math.min()); //Infinity
console.log(max()); //-Infinity
console.log(Math.max()); //-Infinity

Let's take a look at the specifications (which could/should help you in implementation!)
In ECMAScript 1st Edition (ECMA-262) (the initial definitions for both Math.max/min), we see the following:
15.8.2.11 max(x, y)
Returns the larger of the two arguments.
• If either argument is NaN, the result is NaN.
• If x>y, the result is x.
• If y>x, the result is y.
• If x is +0 and y is +0, the result is +0.
• If x is +0 and y is −0, the result is +0.
• If x is −0 and y is +0, the result is +0.
• If x is −0 and y is −0, the result is −0.
15.8.2.12 min(x, y)
Returns the smaller of the two arguments.
• If either argument is NaN, the result is NaN.
• If x<y, the result is x.
• If y<x, the result is y.
• If x is +0 and y is +0, the result is +0.
• If x is +0 and y is −0, the result is −0.
• If x is −0 and y is +0, the result is −0.
• If x is −0 and y is −0, the result is −0.
Later versions of the specification give us:
ECMAScript 5.1
15.8.2.11 max ( [ value1 [ , value2 [ , … ] ] ] )
Given zero or more arguments, calls ToNumber on each of the arguments and returns the largest of the resulting values.
• If no arguments are given, the result is −∞.
• If any value is NaN, the result is NaN.
• The comparison of values to determine the largest value is done as in 11.8.5 except that +0 is considered to be larger than −0.
The length property of the max method is 2.
15.8.2.12 min ( [ value1 [ , value2 [ , … ] ] ] )
Given zero or more arguments, calls ToNumber on each of the arguments and returns the smallest of the resulting values.
• If no arguments are given, the result is +∞.
• If any value is NaN, the result is NaN.
• The comparison of values to determine the smallest value is done as in 11.8.5 except that +0 is considered to be larger than −0.
The length property of the min method is 2.
The reference to 11.8.5 can be found here: The Abstract Relational Comparison Algorithm
ECMAScript 2015
20.2.2.24 Math.max ( value1, value2 , …values )
Given zero or more arguments, calls ToNumber on each of the arguments and returns the largest of the resulting values.
• If no arguments are given, the result is −∞.
• If any value is NaN, the result is NaN.
• The comparison of values to determine the largest value is done using the Abstract Relational Comparison algorithm (7.2.11) except that +0 is considered to be larger than −0.
The length property of the max method is 2.
20.2.2.25 Math.min ( value1, value2 , …values )
Given zero or more arguments, calls ToNumber on each of the arguments and returns the smallest of the resulting values.
• If no arguments are given, the result is +∞.
• If any value is NaN, the result is NaN.
• The comparison of values to determine the smallest value is done using the Abstract Relational Comparison algorithm (7.2.11) except that +0 is considered to be larger than −0.
The length property of the min method is 2.
And again, 7.2.11 can be found here: Abstract Relational Comparison

Basic functionality:
Math.max() and Math.min() are used on numbers (or what they can coerce into numbers) you cannot directly pass an array as a parameter.
Ex:
Math.max(1,52,28)
You can have an number of comma delimited numbers.
Arrays:
This example shows how one could apply them to arrays:
JavaScript: min & max Array values?
Basically the following works:
Math.max.apply(null, [1,5,2,3]);
Why that works?
This works because apply is a function that all functions have which applies a function with the arguments of an array.
Math.max.apply(null, [1,5,2,3]) is the same as Math.max(1,5,2,3)

Well, here's min without Math.min (code is in ES6).
function min() {
return Array.from(arguments).reduce(
(minSoFar, next) => minSoFar < next ? minSoFar : next
, Infinity)
}
The same logic could be implemented with a simple loop. You would just need to keep track of one of variable through your iteration, which is the lowest value you've seen so far. The initial value of minSoFar would be Infinity. The reason is that any Number except Infinity is less than Infinity, but in the case of no arguments sent, we want to return Infinity itself, because that's what Math.min() with no arguments evaluates to.
function min() {
let minSoFar = Infinity
for(let i = 0, l = arguments.length; i < l; i++) {
const next = arguments[i]
minSoFar = minSoFar < next ? minSoFar : next
}
return minSoFar
}
Max can be implemented with pretty much the same logic, only you're keeping track of the highest value you've seen so far, and the initial value is -Infinity.

This is easy to implement with Array.prototype.reduce:
function min() {
var args = Array.prototype.slice.call(arguments);
var minValue = args.reduce(function(currentMin, nextNum) {
if (nextNum < currentMin) {
// nextNum is less than currentMin, so we return num
// which will replace currentMin with nextNum
return nextNum;
}
else {
return currentMin;
}
}, Infinity);
return minValue;
}

Here is the implementation of Math.min and Math.max from a real Javascript engine
Math.max : https://github.com/v8/v8/blob/cd81dd6d740ff82a1abbc68615e8769bd467f91e/src/js/math.js#L78-L102
Math.min : https://github.com/v8/v8/blob/cd81dd6d740ff82a1abbc68615e8769bd467f91e/src/js/math.js#L105-L129

Do the && and || operators convert their operands to booleans?

Flanagan's O'Reilly JavaScript book states:
Unlike the && and || operators, the ! operator converts its operand to
a boolean value [...] before inverting the converted value.
If those logical operators don't convert the operands to booleans, how can the expression be evaluated?

They do convert the values to boolean, but only to determine how to proceed in evaluating the expression. The result of the expression is not necessarily boolean (in fact, if neither of your operands are boolean, it will not give you a boolean):
var x = false || 'Hello' // gives you 'Hello'
var y = 0 && 1 // gives you 0, because 0 is "falsy" and short circuits
var z = 1 || 2 // gives you 1, because 1 is "truthy" and short circuits

Per specification, section 11.11: Binary Logical Operators:
The production [of evaluating &&] ... is evaluated as follows:
Let lref be the result of evaluating LogicalANDExpression.
Let lval be GetValue(lref).
If ToBoolean(lval) is false, return lval.
Let rref be the result of evaluating BitwiseORExpression.
Return GetValue(rref).
The production [of evaluating ||] ... is evaluated as follows:
Let lref be the result of evaluating LogicalORExpression.
Let lval be GetValue(lref).
If ToBoolean(lval) is true, return lval.
Let rref be the result of evaluating LogicalANDExpression.
Return GetValue(rref).
So internally the value is "converted to a boolean". However, since this is never exposed -- and the entire semantic explanation is an abstraction which can be/is "optimized out" -- the behavior of && and || can be simply explained through using truthy-and-falsy values (for which ToBoolean covers: a truthy-value is one for which ToBoolean returns true, all other values are falsy).
The logical table for && is:
a b result
truthy any b
falsy any a
The logic table for || is:
a b result
truthy any a
falsy any b
Note that either the evaluation of a or b is returned.
Happy coding.
For completeness, from section 9.2:
The abstract operation ToBoolean converts its argument to a value of type boolean as ...
Undefined - false
Null - false
boolean (not Boolean object!) - The result equals the input argument (no conversion).
number (not Number object!) - The result is false if the argument is +0, -0, or NaN; otherwise the result is true.
string (not String object!) - The result is false if the argument is the empty String (its length is zero); otherwise the result is true.
Object - true

The operands are interpreted as booleans for evaluating the expression, but the return value of && or || is always one of the operands.
For example:
true && 0 === 0, not false
1 || false === 1, not true

Because JavaScript has an idea of truthiness that covers more than booleans.