How flexible is JavaScript?

JavaScript is a flexible language and extremely expressive. Let me give you an example that is guaranteed to surprise many people.

　This article was inspired by Kyle Simpson’s article "Iterating ES6 Numbers".

　First, deploy an add method on the Number.prototype object.

Number.prototype.add = function (x) {
  return this + x;
};

　The above code defines an add method for Number instances. (If you are not familiar with this writing method, it is recommended to read my "JavaScript Object-Oriented Programming" first.)

Since the instance of Number is a numerical value, when a method is called on the numerical value, the numerical value will be automatically converted into an instance object, so The following results were obtained.

8['add'](2)
// 10

　In the above code, the reason why the calling method is written as 8['add'] instead of 8.add is because the dot after the value will be interpreted as a decimal point instead of a dot operator.

　By placing the value in parentheses, you can use the dot operator to call the method.

(8).add(2)
// 10

Actually, there is another way to write it.

8..add(2)
// 10

　The first dot in the above code is interpreted as a decimal point, and the second dot is interpreted as a dot operator. For the sake of semantic clarity, I will use parentheses below.

Since the add method still returns a numerical value, it can be chained.

Number.prototype.subtract = function (x) {
  return this - x;
};
(8).add(2).subtract(4)
// 6

　The above code deploys the subtract method on the instance of the Number object, which can be called in a chain with the add method.

If you use square brackets to call attributes, the writing will be very weird.

8["add"](2)["subtract"](4)
// 6

　 We can also deploy more complex methods.

Number.prototype.iterate = function () {
  var result = [];
  for (var i = 0; i <= this; i++) {
    result.push(i);
  }
  return result;
};
(8).iterate()
// [0, 1, 2, 3, 4, 5, 6, 7, 8]

　The above code deploys the iterate method on the prototype of the Number object, which can automatically expand a value into an array.

　In short, now we can directly call methods on values, but the pair of parentheses at the back look a bit annoying. Is it possible to remove the parentheses? In other words, can you write the following expression

(8).double().square()

in another way?

(8).double.suqare

　It can be done.

　ES5 stipulates that each object's attribute has a value method get, which is used to customize the reading operation of the attribute.

Number.prototype = Object.defineProperty(
  Number.prototype, "double", {
    get: function (){return (this + this)} 
  }
);
Number.prototype =  Object.defineProperty(
  Number.prototype, "square", {
    get: function (){return (this * this)} 
  }
);

　The above code defines two properties double and square on Number.prototype, as well as their value method get.

　 Therefore, at any value, reading these two attributes can be written as follows.

(8).double.square
// 256

　You can also use the square bracket operator instead.

8["double"]["square"]
// 256