2.11.Build-in methods.md

2.11 New Build-in Methods

ES6 bring on-board new solution for all problems, and if you have these problem in the past: You will love it.

Math

Number Safety Checking

// ES5
function isSafeInteger (n) {
    return (
           typeof n === 'number'
        && Math.round(n) === n
        && -(Math.pow(2, 53) - 1) <= n
        && n <= (Math.pow(2, 53) - 1)
    );
}
isSafeInteger(42) === true;
isSafeInteger(9007199254740992) === false;

// ES6
Number.isSafeInteger(42) === true
Number.isSafeInteger(9007199254740992) === false

cosh, acosh, tanh, atanh, sinh, asinh

Math.acosh(1); // 0
Math.cosh(0); // 1
Math.tanh(0); // 0
Math.atanh(1); // Infinity
Math.sinh(0); // 0
Math.asinh(0); // 0

sign

Math.sign(-1); // -1
Math.sign(1); // 1
Math.trunc(2.9);  // 2

cbrt, clz32, log1p, log10, expm1

Math.cbrt(27); //3
Math.clz32(10); // 28
Math.log1p(10); // 2.3978952727983707
Math.log10(10); // 1
Math.expm1(2); // 6.38905609893065
Math.hypot(2,4); // 4.47213595499958

Number

Number Type Checking

// ES5
var isNaN = function (n) {
    return n !== n;
};
var isFinite = function (v) {
    return (typeof v === "number" && !isNaN(v) && v !== Infinity && v !== -Infinity);
};
isNaN(42) === false;
isNaN(NaN) === true;

isFinite(Infinity) === false;
isFinite(-Infinity) === false;
isFinite(NaN) === false;
isFinite(123) === true;

// ES6
Number.isNaN(42) === false
Number.isNaN(NaN) === true

Number.isFinite(Infinity) === false
Number.isFinite(-Infinity) === false
Number.isFinite(NaN) === false
Number.isFinite(123) === true

Array

String Repeating

// ES5
Array(3 + 1).join("Friday");

// ES6
"Friday ".repeat(10) + ("YAY")

Array Element find: .find() and .findIndex()

// ES5
[ 1, 3, 4, 2 ].filter(function (x) { return x > 3; })[0]; // 4

// ES6 find
[ 1, 3, 4, 2 ].find(x => x > 3); // 4

// ES6 findIndex
[ 1, 3, 4, 2 ].findIndex(x => x > 3); // 2 (INDEX)

Array fill

[ 1, 3, 4, 2 ].fill('0'); // ["0", "0", "0", "0"]

[ 1, 3, 4, 2 ].fill('0', 2, 3); // [1, 3, "0", 2]

Array copyWithin

[ 1, 3, 4, 2 ].copyWithin(2, 0, 1);  // [1, 3, 1, 2] copy index 2 to with 0 and stop after 1 copy

Object

Object Property Assignment keys

// ES5
var dst  = { quux: 0 };
var src1 = { foo: 1, bar: 2 };
var src2 = { foo: 3, baz: 4 };
Object.keys(src1).forEach(function(k) {
    dst[k] = src1[k];
});

// ES6
var dst  = { quux: 0 }
var src1 = { foo: 1, bar: 2 }
var src2 = { foo: 3, baz: 4 }
Object.assign(dst, src1, src2)

String Searching

// ES5
"hello".indexOf("ello") === 1;    // true
"hello".indexOf("hell") === (4 - "hell".length); // true
"hello".indexOf("ell") !== -1;    // true
"hello".indexOf("ell", 1) !== -1; // true
"hello".indexOf("ell", 2) !== -1; // false

// ES6
"hello".startsWith("ello", 1) // true
"hello".endsWith("hell", 4)   // true
"hello".includes("ell")       // true
"hello".includes("ell", 1)    // true
"hello".includes("ell", 2)    // false

Assigning two variables with single string value

// ES5
var controller = "controllerName";
var state = controller;

// ES6
var controllerName, stateName = controllerName = "A";

Object

Object.assign: Merge multiple sources

// ES6
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var o4 = { c: 3 };

var obj = Object.assign(o1, o2, o3,o4);
console.log(obj); // { a: 1, b: 2, c: 3 }

Object.assign: Merge and overwrite equal keys

// ES6
var b = Object.assign({foo: 0}, {foo: 1}, {foo: 2});
console.log(b); // {foo: 2}

Object.assign: Clone an object

// ES6
var x = {person: 'Leo'};
var cloneObj = Object.assign({}, x);
console.log(cloneObj); // Object {person: "Leo"}

Object.is: Similar to ===

You pass in two arguments and it tells you whether they’re the same reference or the same primitive value.

// ES6
Object.is({}, {}); // false
Object.is([], []); // false
Object.is(null, null); // true
Object.is('', NaN); // false
Object.is(1,"1"); // false
Object.is(1,"00001"); // false

var test = { a: 1 };
Object.is(test, test);       // true

// differences from ===
-0 === +0 // true
Object.is(-0,+0); // false

NaN === NaN // false
Object.is(NaN,NaN); // true

Template Literals: String Interpolation (using grave accent: `)

// ES5
var customer = { name: "Foo" };
var card = { amount: 7, product: "Bar", unitprice: 42 };
var message = "hi " + customer.name + customer.name";
// "hi Foo Bar"

// ES6
var customer = { name: "Foo" }
var card = { amount: 7, product: "Bar", unitprice: 42 }
message = `hi ${customer.name} ${card.product}`
// "hi Foo Bar"

2.11 Templates

ES6 template literals are more like string literals than like traditional text templates. But you can use them for templating if you return them from functions:

Simple templating via template literals

var template = addrs => `
   <table>
   ${addrs.map(addr => `
       <tr><td><h1>${addr.first}</h1></td></tr>
       <tr><td><h2>${addr.last}</h2></td></tr>
    `).join('')}
    </table>
`;
var data = [
   { first: 'Line', last: 'One' },
   { first: 'Line', last: 'Two' },
];
console.log(template(data));

// <table>
//   <tr><td><h1>Line</h1></td></tr>
//   <tr><td><h2>One</h2></td></tr>  
//   <tr><td><h1>Line</h1></td></tr>
//    <tr><td><h2>Two</h2></td></tr> 
// </table>