#valueof

Each year I make a post about the best posts I think I have for the year that are not in the most popular posts sidebar (on obscurejavascript.tumblr.com as of early January 2019). Since popular doesn't necessarily mean better. The list for 2018 is below:

1. All Objects Have ValueOf This method is available in all objects. It specifies the value of the object when used in numerical operations. For example, the Date object returns the timestamp of the current date so that dates can be subtracted to compare if the time is different and by how much.

2. JavaScripts Console Object (Beyond Logging) JavaScript is generally a very lean language without too much syntactical helpers or much built in functionality. One exception is the console object which provides functionality to track how many times a function is called, time a piece of code and other functions all without using any libraries.

3. Caching Functions Via Memoization If you ensure a functions output is directly determined by its input (referential transparency in Functional Programming), it is easy to cache a functions result after it has been called without custom storage code. Which is very useful to eliminate performance issues on problems like, for example, UI calls that get called on fluid user input like mouse or finger dragging.

4. ES6 Classes Are Just Syntactic Sugar This provides an example of how JS objects were created in the past that could be used as classes and gives a direct translation to what it looks like with the much simpler class syntax.

5. Natural String Sorts In general, doing natural string sorts where capitalization, numbering and so on to make sense to humans is very hard without a library. Fortunately, JS provides this through String.localeCompare which enjoys wide browser support.

Posts of Previous Years

Best Posts Of 2017

Best Posts Of 2016

Every custom object has a toString operation that gives an objects string representation. There is also a lesser known valueOf property. This gives an object value in calculations. For example, this is how Date arithmetic is done:

const ONE_DAY_MS = 86400000; const today = new Date(); const yesterday = new Date(new Date() - ONE_DAY_MS); if (today - yesterday > 0) { console.log(`${today} takes place after ${yesterday}`); } else { console.log(`${today} is the same as or before ${yesterday}`); } // Something like: // Fri May 11 2018 20:56:47 GMT-0400 (EDT) takes place after Thu May 10 2018 20:56:47 GMT-0400 (EDT)

This could be replaced with valueOf appended:

const yesterday2 = new Date(new Date().valueOf() - ONE_DAY_MS); if (today.valueOf() - yesterday2.valueOf() > 0) { console.log(`${today} takes place after ${yesterday2}`); } else { console.log(`${today} is the same as or before ${yesterday2}`); } // Something like: // Fri May 11 2018 20:56:47 GMT-0400 (EDT) takes place after Thu May 10 2018 20:56:47 GMT-0400 (EDT)

So with valueOf, an object can be created that can easily be used in calculations. For example, here is a Rounded object:

class Rounded { constructor(value) { this.value = Math.round(value); } valueOf() { return this.value; } } const revenue = new Rounded(201.2445); const costs = new Rounded(325.2211); const profit = revenue - costs; const dreams = revenue * costs; console.log(profit); // -124 console.log(dreams); // 65325

Note that since let and const are supported in all modern browsers and a good practice I will be using them instead of var. To support legacy environments, just use var instead.

Every object that inherits from Object has valueOf which gives the value of an object when it is coerced to a primitive. Firstly, When valueOf is not specified it just returns the object itself:

const ObjectA = function() { this.property1 = 'value1'; }; let objectA = new ObjectA(); console.log(objectA.valueOf()); // { property1: 'value1' }

Which is a good default, but not very useful. There are a few cases when overridding is useful. For example a custom Money object could be created that stores numbers up to 3 decimals. Then usually, to compare 2 different Money objects direct property accesses or a getter would need to be used. With valueOf, this can be skipped:

const Money = function(value) { // Assume that Numbers are only sent in. this.value = Math.round(value * 1000) / 1000; }; Money.prototype.valueOf = function() { return this.value; } let oneHundred = new Money(100), oneHundredAgain = new Money(100), below1 = new Money(0.1256); console.log(oneHundred.value); // 100 console.log(below1.value); // 0.126 console.log(oneHundred - below1); // 99.874 console.log(oneHundred * oneHundredAgain); // 10000

Usually the result of the computation would also need to be converted to a Money object. toString which returns the objects value for string operations can make logging easy in this case:

Money.prototype.toString = Money.prototype.valueOf; console.log(new Money(oneHundred / below1) + ''); // 793.651

Note that valueOf does not apply in equality operations:

console.log(oneHundred === oneHundredAgain); // false

Specifically, it works for almost all numeric operators:

+ - * / % & | ^ > >>> >= ++ --

Se utiliza el método valueOf de la clase String.

int num = 0;