Semakin besar sebuah aplikasi, maka akan semakin kompleks juga kode-kode pada aplikasi yang dibuat tersebut. Untuk memudahkan melakukan maintainance atau perawatan maka biasanya kode-kode tersebut akan displit atau dipisah ke dalam beberapa file atau berupa module-module. Show
Pada ES2015 kita bisa membuat module javascript. Ada dua statements yang biasa digunakan dalam membuat atau memakai module javascript pada es2015 yaitu export statement dan import statement. ExportExport digunakan untuk mengexport function, objek atau nilai primitif pada sebuah module sehingga bisa digunakan pada program lain dengan menggunakan statement import. ImportImport bisa dikatakan adalah pasangan dari statement export. Jadi import digunakan tentunya untuk mengimport function,objek,variabel yang sudah di export pada module lain. Contoh Penggunaan Export dan Import
buat sebuah file dengan nama module.js //module.jsfunction say() { return “hello world”;}const name = “Budi”;const age = 20;//mengekspor function say dan variabel name sekaligusexport { say, name, age }; Untuk menggunakan module.js pada file atau program lain kita bisa menggunakan perintah import. buat sebuah file dalam folder yang sama dengan nama main.js. // main.js/*** Import single export. (function say dari module lain)**/import {say} from ’./module.js’;console.log(say()); //hello world/*** mengimport sekaligus dua objek export yaitu function say dan variabel const name**/import {name, age} from ‘./module.js’;console.log(name); //Budiconsole.log(age); //20 2. Menggunakan Default untuk export Jika kita ingin mengekspor single value atau hanya satu nilai kita bisa menggunakan default export seperti contoh berikut : // module.js Pada file main.js, untuk mengimportnya kodenya seperti ini: import text from ‘./module.js’;console.log(text); // Belajar ES2015 Oya untuk contoh kode di atas jika kita jalankan pada browser akan menghasilkan error. Untuk menjalankannya kita perlu mengcompilenya terlebih dahulu menggunakan plugin BabelJS dan Webpack. Dan Insya Allah pada artikel selanjutnya Saya akan membahas sedikit tentang penggunaan babel + webpack untuk mengcompile kode javascript yang ditulis dengan standard es2015. Terima kasih. happy coding :) Referensi : Improvisasi Kode dengan ECMAScript 2015 – Gimana Caranya? Hallo developer, hallo semuanya! Sebenarnya pembahasan kali ini agak sedikit usang. Tapi karena Dicoding jarang nge-post artikel teknologi web serta bahasa pemrogramannya, makannya saya agak tertarik memperbanyak tulisan mengangkat topik tersebut. 💻 Mulai Belajar PemrogramanBelajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional. Daftar Sekarang Apa itu ES6 atau ECMAScript 2015?ECMAScript unofficial logo from https://github.com/wingsuitist/ecmascript-logo Belajar Javascript saja sudah bikin kita bingung karena kondisi tertentu. Nah, jangan sampai penamaan versinya juga buat kalian bingung ya. ES6, ES2015 dan ECMAScript 2015 itu sama. ES6 merupakan format penamaan yang digunakan pada versi sebelumnya yaitu ES5 yang dirilis pada Desember 2009, Yup 10 tahun silam! Lalu, Juni 2015 barulah ES6 ini muncul diikuti dengan ketetapan baru untuk penamaan versinya, yang akhirnya menggunakan tahun sebagai format penamaanya. Jadi mau kalian sebut ES6, ES2015 ataupun ECMAScript 2015 itu merujuk ke hal yang sama.
ECMAScript 2015: Syntax ImprovementECMAScript 2015 membawa banyak sekali perubahan, karena gap atau jarak waktu dari versi sebelumnya memang relatif jauh, sehingga ada yang bilang juga sebagai bahasa JavaScript modern. Untuk syntax-nya sendiri banyak yang di improvisasi, Oke mari kita bahas satu persatu Let dan ConstSekarang terdapat cara baru untuk mendeklarasikan sebuah variabel, bisa menggunakan let dan const. Sebelum ECMAScript 2015, hanya terdapat satu cara yaitu dengan menggunakan var. Cara ini memang sangat simple tetapi beberapa kasus penggunaanya membuat kita bingung. Bingung#1 – HoistingApa itu hoisting? Yups, sesuai artinya “Mengangkat” variabel yang dideklarasikan menggunakan var ini dapat diinisialisasi terlebih dahulu sebelum dideklarasikan, Contoh
Bingung#2 – RedeclareVariabel yang dideklarasikan dengan var dapat dideklarasikan lagi dengan penamaan yang sama. Contoh
Kemudian const digunakan untuk mendeklarasikan sebuah variabel yang sifatnya immutable atau tidak perlu diinisialisasi kembali. Jika kalian menginisialisasi nilai variabel dengan menggunakan const, maka akan mendapati eror “TypeError: Assignment
to constant variable.”
Template LiteralsSebelum ECMAScript 2015 proses penggabungan nilai string (concatenating) dilakukan dengan menggunakan operator (+).
Untuk menggunakan template literals, kita gunakan tanda backticks menggantikan tanda single quotes (‘) atau double quotes (“) yang digunakan sebelumnya. Kemudian untuk menggabungkan nilai string, kita dapat gunakan tanda ${ } di dalam tanda backticks
tersebut.
Destructuring Array dan ObjectApa sih destructuring itu? Destructuring pada JavaScript merupakan syntax yang dapat mengeluarkan nilai dari array atau properties dari sebuah object ke dalam satuan variabel yang berbeda. Mendestruksikan sebuah array atau object sebelum ECMAScript 2015 dilakukan dengan cara klasik seperti ini
Object LiteralsObject Literals merupakan shorthand atau cara cepat dalam menginisialisasikan sebuah properti dalam object. Biasanya ketika membuat sebuah object kita membutuhkan sebuah key: kemudian nilai nya.
kita tidak memerlukan lagi keyword function untuk membuatnya.
For..ofUntuk melakukan looping pada sebuah array, selama ini kita gunakan for loop. Untuk menggunakannya, biasanya kita membuat sebuah variabel iterator yang berperan sebagai index atau mendapatkan nilai posisi ketika proses loop berjalan.
Spread operator Masih tentang iterator nih! Sesuai namanya “Spread” yang berarti membentangkan, operator ini digunakan untuk membentangkan nilai array menjadi
beberapa elements. Untuk melakukannya kita gunakan three consecutive dot (…) pada sebuah array. Look at this code baby!
Rest parametersJika Spread operator adalah pelebur array menjadi multiple element yang berbeda, nah rest parameter ini adalah kebalikan dari fungsi tersebut. Kita dapat menggabungkan beberapa elemen menjadi satu array. Teknik ini sangat bermanfaat ketika kita hendak membuat sebuah variadic function yaitu fungsi yang dapat menyediakan argument tidak
terbatas. Contohnya ketika membuat fungsi sum() seperti ini:
KesimpulanWell, biar gak terlalu panjang, cukup sampai sini dulu pembahasan kali ini. Dengan ini saya harap kalian tahu cara mengimprovisasi kode dengan ECMAScript 2015. Make your code fun, clean and shorter tentunya! Sebenarnya masih ada improvisasi lain contohnya dalam penulisan fungsi, tapi nanti akan dibahas pada artikel selanjutnya, jadi tunggu saja ya. COMING SOON! Improvisasi Kode dengan ECMAScript 2015 – Gimana Caranya? – end Artikel Terkait Lainnyahttps://www.dicoding.com/blog/mengenal-fungsi-asynchronous-request-pada-javascript/ https://www.dicoding.com/blog/dasar-tampilan-responsif-pada-website/ https://www.dicoding.com/blog/cara-membuat-browser-menjadi-lokal-web-server/ Suka dengan Materi Ini?Mungkin ini saatnya buatmu coba kelas Membangun Progressive Web Apps di Dicoding Academy Bagaimana cara memanggil fungsi di JavaScript?Cara Memanggil/Eksekusi Fungsi
Kita bisa memanggil fungsi di dalam kode Javascript dengan menuliskan nama fungsinya seperti ini: namaFungsi(); Contoh: // membuat fungsi function sayHello(){ console.log("Hello World!"); } // memanggil fungsi sayHello() // maka akan menghasilkan -> Hello World!
Kapan arrow function digunakan?dengan menggunakan arrow function pada javascript kita bisa lebih menghemat waktu pada saat mendevelop sebuah script javascript, selain itu arrow function ini juga akan sangat berguna saat kita membuat aplikasi web/android menggunakan framework javascript, seperti React dan React native nantinya.
Apa itu es 6?ES6 adalah singkatan dari ECMAScript 6. ECMAScript 6 sendiri digunakan untuk memperkuat JavaScript dan ES6 adalah versi-6 ECMAScript yang diterbitkan pada tahun 2015, dan juga dikenal sebagai ECMAScript 2015.
Apa tanda yang dapat digunakan untuk membuat objek di JavaScript?Objek pada javascript, dapat dibuat dengan tanda kurung kurawal dengan isi berupa key dan value.
|