Fitur - fitur baru di ECMAcript 6

-

ES6 merupakan singkatan dari Ecmascript 6, yang mana merupakan bahasa program yang distandarisasi oleh ECMAScript international. Bahasa ini dipakai untuk membuat aplikasi di sisi client. Bahasanya populer dikenal sebagai Javascript, Jscript, dan ActionScript.

Fitur baru di ES 6 :

  • Support for constant
  • Block scope
  • Arrow function
  • Extended parameter handling
  • Template literals
  • Extended literals
  • Enhanced onject properties
  • De-structing assignment
  • Modules
  • Classes
  • Iterators
  • Generators
  • Collections
  • New built in methods  for various classes
  • promises
Constant
Mendukung tipe data konstan, artinya variabel dengan tipe data ini mempunyai nilai static/tidak berubah-ubah.
Contoh di ES6 :
const PI = 3.14;
run contoh script di web console dengan browser terabaru.

Contoh di ES5:

Object.defineProperty(typeof global === "object" ? global : window, "PI", {
    value:        3.141593,
    enumerable:   true,
    writable:     false,
    configurable: false
})


 Scoping

  • Block-scoped variables
Contoh di ES6 :
let callbacks = []
for (let i = 0; i <= 2; i++) {
    callbacks[i] = function () { return i * 2; }
}
callbacks[0]() === 0;
callbacks[1]() === 2;
callbacks[2]() === 4;

Contoh di ES5 :
var callbacks = [];
for (var i = 0; i <= 2; i++) {
    (function (i) {
        callbacks[i] = function() { return i * 2; };
    })(i);
}
callbacks[0]() === 0;
callbacks[1]() === 2;
callbacks[2]() === 4;


  • Block-Scoped Functions
Contoh di ES6 :
{
    function foo () { return 1 }
    foo() === 1
    {
        function foo () { return 2 }
        foo() === 2
    }
    foo() === 1
}
Contoh di ES5 :
(function () {
    var foo = function () { return 1; }
    foo() === 1;
    (function () {
        var foo = function () { return 2; }
        foo() === 2;
    })();
})();foo() === 1;
 Arrow Functions

  • Expression Bodies
Contoh di ES6 :

let evens = [1, 2, 3, 4]
odds  = evens.map(v => v + 1)
pairs = evens.map(v => ({ even: v, odd: v + 1 }))
nums  = evens.map((v, i) => v + i)
Contoh di ES5 :
var evens = [1, 2, 3, 4];
odds  = evens.map(function (v) { return v + 1; });
pairs = evens.map(function (v) { return { even: v, odd: v + 1 }; });
nums  = evens.map(function (v, i) { return v + i; });

  • Statement Bodies
Contoh di ES6 :

let nums = [1, 2, 3, 4, 5];
letfives=[];
nums.forEach(v => {
   if (v % 5 === 0)
       fives.push(v)
}); 
fives;
 Contoh di ES5 :
var nums = [1, 2, 3, 4, 5];
var fives=[];
nums.forEach(function (v) {
   if (v % 5 === 0)
       fives.push(v)
}); 
fives;


  • Lexical this
Contoh di ES6 :

let nums = [1, 2, 3, 4, 5];
var fives=[];
this.nums.forEach((v) => {
    if (v % 5 === 0)
        this.fives.push(v)
})
fives;
Contoh di ES5 :
var nums = [1, 2, 3, 4, 5];
var self = this;
this.nums.forEach(function (v) {
    if (v % 5 === 0)
        self.fives.push(v);
});
fives;
//  variant 2
this.nums.forEach(function (v) {
    if (v % 5 === 0)
        this.fives.push(v);
}, this);
fives;
//  variant 3 (since ECMAScript 5.1 only)
this.nums.forEach(function (v) {
    if (v % 5 === 0)
        this.fives.push(v);
}.bind(this));
fives;
Extended parameter handling

  • Default parameter values
Contoh di ES6 :
function f (x, y = 7, z = 42) {
    return x + y + z
}
f(1) === 50
Contoh di ES5   :
function f (x, y, z) {
    if (y === undefined)
        y = 7;
    if (z === undefined)
        z = 42;
    return x + y + z;
};
f(1) === 50;

  • Rest parameter
Contoh di ES6 :
function f (x, y, ...a) {
    return (x + y) * a.length
}
f(1, 2, "hello", true, 7) === 9
Contoh di ES5 :
function f (x, y) {
    var a = Array.prototype.slice.call(arguments, 2);
    return (x + y) * a.length;
};
f(1, 2, "hello", true, 7) === 9;


  • Spread operator 
Contoh di ES6 :

function f (x, y, ...a) {
    return (x + y) * a.length
}
f(1, 2, ...params) === 9
var str = "foo"
var chars = [ ...str ]

Contoh di ES5 :
var params = [ "hello", true, 7 ];
var other = [ 1, 2 ].concat(params); // [ 1, 2, "hello", true, 7 ]
function f (x, y) {
    var a = Array.prototype.slice.call(arguments, 2);
    return (x + y) * a.length;
};
f.apply(undefined, [ 1, 2 ].concat(params)) === 9;
var str = "foo";
var chars = str.split(""); // [ "f", "o", "o" ]
Template Literals

  • String interpolation 
Contoh di ES6 :

var customer = { name: "Foo" }
var card = { amount: 7, product: "Bar", unitprice: 42 }
var message = `Hello ${customer.name},
want to buy ${card.amount} ${card.product} for
a total of ${card.amount * card.unitprice} bucks?`

Contoh di ES5 :
var customer = { name: "Foo" };
var card = { amount: 7, product: "Bar", unitprice: 42 };
var message = "Hello " + customer.name + ",\n" +
"want to buy " + card.amount + " " + card.product + " for\n" +
"a total of " + (card.amount * card.unitprice) + " bucks?";

  •  Costum interpolation
Contoh di ES6:

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
Contoh di ES5 :
var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
// "Fifteen is 15 and
// not 20."

  • Raw string access

Contoh di ES6 :
function quux (strings, ...values) {
    strings[0] === "foo\n"
    strings[1] === "bar"
    strings.raw[0] === "foo\\n"
    strings.raw[1] === "bar"
    values[0] === 42
}
quux `foo\n${ 42 }bar`

String.raw `foo\n${ 42 }bar` === "foo\\n42bar"
 Extended literals

  • Binary & octal literal

Contoh di ES6 :
0b111110111 === 503
0o767 === 503
Contoh di ES5 :
parseInt("111110111", 2) === 503;
parseInt("767", 8) === 503;
0767 === 503; // only in non-strict, backward compatibility mode

  •  Unicode string & regexp literal
Contoh di ES6 :
"𠮷".length === 2
"𠮷".match(/./u)[0].length === 2
"𠮷" === "\uD842\uDFB7"
"𠮷" === "\u{20BB7}"
"𠮷".codePointAt(0) == 0x20BB7
for (let codepoint of "𠮷") console.log(codepoint)
 Contoh di ES5:
"𠮷".length === 2;
"𠮷".match(/(?:[\0-\t\x0B\f\x0E-\u2027\u202A-\uD7FF\uE000-\uFFFF][\uD800-\uDBFF][\uDC00-\uDFFF][\uD800-\uDBFF](?![\uDC00-\uDFFF])(?:[^\uD800-\uDBFF]^)[\uDC00-\uDFFF])/)[0].length === 2;
"𠮷" === "\uD842\uDFB7";
//  no equivalent in ES5
//  no equivalent in ES5
//  no equivalent in ES5


Enhanced regular expression

  • Regural expression sticky matching
Contoh di ES6 :
let parser = (input, match) => {
    for (let pos = 0, lastPos = input.length; pos < lastPos; ) {
        for (let i = 0; i < match.length; i++) {
            match[i].pattern.lastIndex = pos
            let found
            if ((found = match[i].pattern.exec(input)) !== null) {
                match[i].action(found)
                pos = match[i].pattern.lastIndex
                break
            }
        }
    }
}
​
let report = (match) => {
    console.log(JSON.stringify(match))
}
parser("Foo 1 Bar 7 Baz 42", [
    { pattern: /^Foo\s+(\d+)/y, action: (match) => report(match) },
    { pattern: /^Bar\s+(\d+)/y, action: (match) => report(match) },
    { pattern: /^Baz\s+(\d+)/y, action: (match) => report(match) },
    { pattern: /^\s*/y,         action: (match) => {}            }
])
Contoh di ES5:
var parser = function (input, match) {
    for (var i, found, inputTmp = input; inputTmp !== ""; ) {
        for (i = 0; i < match.length; i++) {
            if ((found = match[i].pattern.exec(inputTmp)) !== null) {
                match[i].action(found);
                inputTmp = inputTmp.substr(found[0].length);
                break;
            }
        }
    }
}

var report = function (match) {
    console.log(JSON.stringify(match));
};
parser("Foo 1 Bar 7 Baz 42", [
    { pattern: /^Foo\s+(\d+)/, action: function (match) { report(match); } },
    { pattern: /^Bar\s+(\d+)/, action: function (match) { report(match); } },
    { pattern: /^Baz\s+(\d+)/, action: function (match) { report(match); } },
    { pattern: /^\s*/,         action: function (match) {}                 }
]);
Enhanced object properties

  • Property shorhand
Sintak lebih sedikit untuk mendefinisikan objek
Contoh di ES6 :
obj = { x, y }
Contoh di ES5 :
obj = { x: x, y: y }; 

  • Computed property names 
Mendukung untuk komputasi nama di defini objek properti
Contoh di ES6 :

let objek = { //objek
    foo: "bar",
    [ "baz" + quux() ]: 42 //property
}
Contoh di ES5:
var obj = {
    foo: "bar"
};
obj[ "baz" + quux() ] = 42;

  • Enhanced object properties
Mendukung menotasikan method di pendefinisian objek properti.
Contoh di ES6 :
obj = {
    foo (a, b) {
        
    },
    bar (x, y) {
        
    },
    *quux (x, y) {
        
    }
}
Contoh di ES5 :
obj = {
    foo: function (a, b) {
  
    },
    bar: function (x, y) {
  
    },
    //  quux: no equivalent in ES5
  
};
 Destructuring Asignment

  • Array Matching
Mnedestruksi array ke dalam individual variabel
Contoh di ES6 :
var list = [ 1, 2, 3 ]
var [ a, , b ] = list
[ b, a ] = [ a, b ]
Contoh di ES5 :
var list = [ 1, 2, 3 ];
var a = list[0], b = list[2];
var tmp = a; a = b; b = tmp;

  • Object matching, shorthand notation
Contoh  di ES6:
var { op, lhs, rhs } = getASTNode()
Contoh di ES5:
var tmp = getASTNode();
var op  = tmp.op;
var lhs = tmp.lhs;
var rhs = tmp.rhs;

  •  Object matching, deep matching
Contoh di ES6:
var { op: a, lhs: { op: b }, rhs: c } = getASTNode()
Contoh di ES5:
var tmp = getASTNode();
var a = tmp.op;
var b = tmp.lhs.op;
var c = tmp.rhs;

  • Object and array matching default values
 Mendestruksi objek dan array
Contoh di ES6 :
var obj = { a: 1 }
var list = [ 1 ]
var { a, b = 2 } = obj
var [ x, y = 2 ] = list
Contoh di ES5 :
var obj = { a: 1 };
var list = [ 1 ];
var a = obj.a;
var b = obj.b === undefined ? 2 : obj.b;
var x = list[0];
var y = list[1] === undefined ? 2 : list[1];

  • Parameter Context Matching
Contoh di ES6 :
function f ([ name, val ]) {
    console.log(name, val)
}
function g ({ name: n, val: v }) {
    console.log(n, v)
}
function h ({ name, val }) {
    console.log(name, val)
}
f([ "bar", 42 ])
g({ name: "foo", val:  7 })
h({ name: "bar", val: 42 })
Contoh di ES5 :
function f (arg) {
    var name = arg[0];
    var val  = arg[1];
    console.log(name, val);
};
function g (arg) {
    var n = arg.name;
    var v = arg.val;
    console.log(n, v);
};
function h (arg) {
    var name = arg.name;
    var val  = arg.val;
    console.log(name, val);
};
f([ "bar", 42 ]);
g({ name: "foo", val:  7 });
h({ name: "bar", val: 42 });

  • Fail soft destructing
Contoh di ES6 :

var list = [ 7, 42 ]
var [ a = 1, b = 2, c = 3, d ] = list
a === 7
b === 42
c === 3
d === undefined
Contoh di ES5 :
var list = [ 7, 42 ];
var a = typeof list[0] !== "undefined" ? list[0] : 1;
var b = typeof list[1] !== "undefined" ? list[1] : 2;
var c = typeof list[2] !== "undefined" ? list[2] : 3;
var d = typeof list[3] !== "undefined" ? list[3] : undefined;
a === 7;
b === 42;
c === 3;
d === undefined;

Modules

  •  Value export/import


 
 



Comments

Post a Comment

Popular posts from this blog

CARA MEMBUAT INPUT, UPDATE, DELETE dan CARI DATA DI VISUAL BASIC 6.0

-
Image
 cara membuat input, update, delete dan cari data di visual basic 6.0 - aksi penting yang biasanya di aplikasi sistem informasi seperti yang akan saya tutorialkan. Memasukan data di suatu sistem informasi itu pasti selalu dilakukan oleh user dan sebagai programmer bagaimana anda membuat aplikasi yang memudahkan user untuk memasukan data dengan cepat, mudah & juga menarik. Memperbarui data, bila user boleh memasukan data terkadang data tersebut sudah harus diganti dengan yang baru atau user salah memasukan data berarti seorang user harus memperbarui datanya. Menghapus data, bila ada data yang sudah tidak penting lagi atau suatu data yang salah dimasukan, berarti harus dihapus dari database karna hal ini sangat penting dalam sistem informasi data yang terlau banyak dapat menghambat kelancaran sistem informasi apalagi kalau memori anda hampir penuh :v. Di tutorial ini masih pakai aplikasi visual basic 6.0 karena, masih banyak sekolah yang mengajarkan tentang visual ba...
Read more

Cara membuat aplikasi Image Viewer di Visual Basic 6.0

-
Image
Cara membuat aplikasi Image Viewer di Visual Basic 6.0 –   hi, gan. Kali ini saya akan share cara membuat aplikasi image viewer di visual basic yang sederhana, walau sederhana tapi anda bisa dengan mudah membuat aplikasi tersebut dengan desain yang lebih menarik, karna di software visual basic sangat mudah digunakan untuk membuat aplikasi interface.   Tutorial membuat aplikasi image viewer ceritanya ini ketika saya ingin menampilkan gambar dilaptop saya yang saya gunakan aplikasi windows photo viewer yang terlihat sederhana jadi saya inigin membuat aplikasi image viewer atau photo viewer buatan sendiri dengan tampilan yang lebih menarik, jadi saya coba browsing dan download sebuah e-book yang menjelaskan tentang pemprogaman di visual basic yang menampilkan gambar juga program yang mengedit gambar. Tetapi dipostingan ini saya hanya menjelaskan yang sederhana saja dalam membuat aplikasi image viewer ini, aplikasi juga hanya bisa menampilkan gambar yang berformat *.jpg/...
Read more

Download aplikasi converter terbaru Format Factory 3.7.0

-
Image
Download aplikasi converter Format Factory 3.7.0 - hi, gan. Di blog aneh saya ini yang isinya agak tidak terlalu penting, tapi kali ini saya akan berbagi suatu aplikasi converter yang sudah sangat terkenal dan juga terbaru. Aplikasi ini sangat saya sukai karna bisa mengkonversi bebagai jenis format multimedia seperti video, music dan gambar, aplikasi ini juga gratis, jadi tidak perlu dicrack, masukan serial number atau yang semacamnya. Aplikasi Format Factory 3.7 adalah aplikasi yang terbaru dari versinya, aplikasi ini juga ringan dan mudah digunakan. Format factory mempunyai kemampuan berbagai converter format multimedia, hanya di satu aplikasi anda bisa melakukan konversi format dalam berbagai jenis file foto, video dan music. Kegunaan penting dari aplikasi konverter ini merupakan mengkonversi file video seperti banyak yang dilakukan orang yang biasanya ingin share film dengan format yang paling terbaik di pc sampai format yang terendah di handphone. Kelebihan aplikasi format...
Read more