{"id":278,"date":"2022-06-15T06:00:03","date_gmt":"2022-06-15T06:00:03","guid":{"rendered":"https:\/\/rizkiakmanda.com\/?p=278"},"modified":"2022-06-20T06:00:35","modified_gmt":"2022-06-20T06:00:35","slug":"perbedaan-javascript-es5-dan-es6","status":"publish","type":"post","link":"https:\/\/rizkiakmanda.com\/?p=278","title":{"rendered":"Perbedaan JavaScript ES5 dan ES6"},"content":{"rendered":"

ECMAScript adalah spesifikasi bahasa scripting dari ECMA International,ini dibuat untuk membakukan JavaScript.ES ini memiliki banyak implementasi, dan yang populer adalah JavaScript.Umumnya,ECMAScript digunakan untuk script client side dan world wide web.<\/span><\/p>\n

ES5 itu sendiri adalah singkatan dari ECMAScript 5 atau dikenal sebagai ECMAScript 2009,dan ES6 adalah ECMAScript 6 atau ECMAScript 2015.ES6 adalah peningkatan besar dalam JavaScript,yang memungkinkan kita untuk menulis kode untuk aplikasi kompleks.ES5 dan ES6 memiliki beberapa kesamaan dalam sifatnya,dan juga banyak perbedaan diantara mereka.Mari kita lihat beberapa perbedaan antara ES5 dan ES6.<\/span><\/p>\n

Yang pertama adalah Tipe-Data,dalam ES5 mensupport <\/span>data types primitive<\/span><\/i> yaitu: string,number,boolean,null,dan undefined.Sedangkan ES6 terdapat beberapa tipe data tambahan ke JavaScript yaitu symbol untuk mensupport unique value.Dari segi performa sudah jelas ES6 memiliki kinerja yang lebih baik dari ES5.Manipulasi Object pun lebih lancar di ES6 karena destrukturisasi dan speed operators.Terdapat juga cara baru untuk mendefinisikan variabel yaitu <\/span>const <\/b>dan <\/span>let<\/b>,keduanya sama-sama mendeklarasikan variabel hanya saja <\/span>const <\/b>untuk yang nilainya tetap sedangkan <\/span>let<\/b> untuk yang nilainya berubah ubah<\/span>.<\/b>Selain itu terdapat juga arrow functions,dimana kita tidak perlu menambahkan keyword function lagi,contoh<\/span><\/p>\n

\n\t\t\t
\n
\n
\n
<\/div>\n
<\/div>\n
<\/div>\n <\/div>\n
\n \n Copy Code<\/span>\n Copied<\/span>\n Use a different Browser<\/span><\/a>\n <\/div>\n <\/div>\n 
<\/p>\n
\/\/ Function Biasa\r\nvar fungsi = function() {\r\n    return \"Classic Function\";\r\n}\r\n\r\n\/\/Arrow Function\r\nconst fungsi = () => {\r\n    return \"Arrow Function\";\r\n}\r\n<\/pre>\n
<\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n
Selain Arrow Function terdapat juga konsep baru di loop yaitu <\/span>for of<\/span><\/i>,dengan tujuan melakukan <\/span>iteration <\/span><\/i>atas nilai nilai objek yang dapat diubah.<\/span><\/p>\n
Di ES6 terdapat juga Spread Operator(…),dengan spread operator ini membuat kita lebih mudah untuk bekerja dengan array atau object.<\/span><\/p>\n
\"\"<\/p>\n
Seperti bisa dilihat di line 20, spread operators digunakan untuk menyalin isi dari state dan mengatur ulang isi dari state.<\/span><\/p>\n
Selain Spread Operators,terdapat juga Template Literal(`),dengan ini kita bisa melakukan string interpolation dengan mudah,contoh:\u00a0<\/span><\/p>\n
\n\t\t\t
\n                
\n                    
\n                        
<\/div>\n                        
<\/div>\n                        
<\/div>\n                    <\/div>\n                    
\n                        \n                        Copy Code<\/span>\n                        Copied<\/span>\n                        Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                
<\/p>\n
\/\/String interpolation\r\nvar a = 10;\r\nvar b = 15;\r\n\r\nconsole.log('Hasil dari a+b adalah' + (a+b));\r\n\r\n\/\/String interpolation dengan Template Literal\r\nlet a = 10;\r\nlet b = 15;\r\n\r\nconsole.log(`Hasil dari a+b adalah ${a+b}`);\r\n<\/pre>\n
<\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n
Sampai sekarang,tidak ada browser yang sepenuhnya mendukung fitur ES6,namun kita bisa mengubah kode ES6 menjadi ES5 dengan transpilation,dengan menggunakan Babel atau Traceur.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
ECMAScript adalah spesifikasi bahasa scripting dari ECMA International,ini dibuat untuk membakukan JavaScript.ES ini memiliki banyak implementasi, dan yang populer adalah JavaScript.Umumnya,ECMAScript digunakan untuk script client side dan world wide web. ES5 itu sendiri adalah singkatan dari ECMAScript 5 atau dikenal sebagai ECMAScript 2009,dan ES6 adalah ECMAScript 6 atau ECMAScript 2015.ES6 adalah peningkatan besar dalam JavaScript,yang […]<\/p>\n","protected":false},"author":1,"featured_media":280,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[3,20],"tags":[],"class_list":["post-278","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding-tutorial","category-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=\/wp\/v2\/posts\/278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=278"}],"version-history":[{"count":1,"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=\/wp\/v2\/posts\/278\/revisions"}],"predecessor-version":[{"id":281,"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=\/wp\/v2\/posts\/278\/revisions\/281"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=\/wp\/v2\/media\/280"}],"wp:attachment":[{"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}