ES6 sudah keluar, dukungan browser sebenarnya lumayan dan jika itu tidak cukup bagi Anda, selalu ada Babel. Jadi mari kita dapatkan informasi terbaru tentang fitur-fitur baru yang paling penting dan mengagumkan.

Biarlah ada Konstanta

Cakupan dalam JavaScript mungkin masih asing bagi sebagian besar orang. Karena kami memiliki sesuatu yang disebut "hosting variabel" yang menarik semua variabel keluar dan mendefinisikannya di bagian atas Cakupannya. Cakupannya adalah fungsi global atau fungsi sekitar yang pertama. Contoh klasik di sini adalah perulangan for.

function foo() {
  for(var i = 0; i < 10; i++) {
    console.log(i) // 0 1 2 3 4 5 6 7 8 9
  }
  console.log(i) //10
}

Itu karena yang sebenarnya terjadi adalah var i diangkat ke Ruang Lingkupnya.

function foo() {
  var i
  for(i = 0; i < 10; i++) {
    console.log(i) // 0 1 2 3 4 5 6 7 8 9
  }
  console.log(i) //10
}

Mengetahui hal ini sangat masuk akal. Namun sekarang kami mendapatkan kata kunci baru yang mengagumkan yang sebenarnya tercakup dalam Blok di sekitarnya.

let secara efektif adalah var baru. Itu hanya ada dalam Blok yang sesuai.

function foo() {
  for(let i = 0; i < 9; i++) {
    console.log(i) // 0 1 2 3 4 5 6 7 8 9
  }
  console.log(i) //undefined
}

const mendefinisikan sebuah konstanta. Artinya, tidak dapat ditugaskan kembali. Dan oleh karena itu juga tidak dapat digunakan dalam perulangan for di mana variabel iterator terus diperbarui. Jika Anda mendefinisikan sebuah konstanta yang merupakan sebuah Objek, Anda dapat mengubah dan mendefinisikan propertinya tetapi tidak menetapkan ulang variabel tersebut menjadi sesuatu yang lain.

const obj = {
  name: ‘HoverBaum’
}
obj.name = ‘Tester’ //works
obj.awesome = true //also okay
obj = [] //NOPE, this is an error

Fungsi Panah

Apakah Anda ingat kata kunci `fungsi` lama yang bagus?

function foo() {
  return ‘bar’
}

Anak-anak keren menemukan cara untuk melakukan ini dengan kode yang jauh lebih sedikit. Sangat bagus untuk orang yang menulis blog dan mengadakan presentasi. Kita dapat membatasi lebih banyak logika ke dalam ruang yang lebih sedikit menggunakan sintaksis yang membingungkan pembaca.//setara dengan ES6

const foo = () => {
  return ‘bar’
}
//And even shorter because returns are implied
const foo = () => ‘bar’

Namun mereka sangat berguna saat Anda perlu meneruskan suatu fungsi ke sesuatu. Seperti memetakan array. Dan dengan pemrograman fungsional (apa pun itu) yang semakin berkembang saat ini, Anda akan melihat orang-orang semakin sering melakukan hal ini.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const doubled = arr.map(number => {return number * 2})
// [2, 4, 6, 8, 10, 12, 14, 15, 19, 20]
//And again all the sugar to leave out things.
const awesomeDouble = arr.map(number => number * 2)
// [2, 4, 6, 8, 10, 12, 14, 15, 19, 20]
//That implicit return even works for Objects.
const wrapped = arra.map(number => ({num: number}))
//[{num: 1}, {num: 2}, {num: 3}, {num: 4}, …]

Apakah Anda memperhatikan bagaimana Anda harus membungkus Objek di `()` agar mereka berfungsi dengan pengembalian implisit? kode yang sangat konsisten yang kami tulis di sini. Jadi, Anda mungkin ingin mempertahankan pola { return ‘bar’ } hanya untuk membuat kode Anda konsisten dan tidak membingungkan Anda sendiri. Karena percayalah itu akan membingungkan Anda. Dan jangan berdebat tentang lebih sedikit kode vs. orang termasuk penulis dapat membacanya dengan mudah karena saya mendukung yang nanti dan ini adalah blog saya.

Apakah saya menyebutkan bahwa Fungsi Panah juga mempertahankan Cakupan saat ini? Jadi `ini` di dalam Fungsi Panah akan sama dengan di luarnya. Hanya satu hal yang perlu diingat.

Penghancuran

Kita sekarang bisa mengeluarkan Object dari other. Terutama kami menggunakan ini untuk impor dan ekspor (berikutnya, hanya di posting blog ini) tetapi Anda juga bisa menggunakannya pada Objek atau untuk mendapatkan parameter bernama untuk fungsi.

let {a, b} = {
  a: 1,
  b: 2
}
console.log(a) // 1
function foo ({greeting, name}) {
  console.log(greeting + ‘ ‘ + name)
}
foo({name: ‘HoverBaum’, greeting: ‘Hello’})

Modul

Tarian kemenangan di sini dengan perayaan besar! Kami akhirnya mendapatkan modul asli. Sekarang andai saja kita semua dapat menggunakannya dan kompatibel dengan node.js. Tapi mereka sangat mengagumkan. Sekarang kita dapat `mengimpor` sesuatu dari modul yang `mengekspor` sesuatu tersebut.

//app.js
//import the default export from logger
import log from ‘./logger’
//only import a from letters
import { a } from ‘./letters’
log(a) // 1
//logger.js
export default const log = (msg) => {
  console.log(msg)
}
//letters.js
export const a = 1
export const b = 2

String Templat

Ini satu lagi "OHHH ya Tuhan kenapa kita tidak memiliki ini sebelumnya???!?". Karena kita semua ingat membuat String dengan variabel di dalamnya. sekarang kita bisa melakukannya menggunakan `dan ${}.

function greet(greeting, name) {
  console.log(`${greeting} ${name}, nice to see you.`)
}

Jika ini tidak membuat Anda bersemangat… kembalilah dan bangun beberapa lusin situs web tanpa itu!

Parameter Bawaan

Baca lagi kalimat pertama dari paragraf terakhir ^^

Dengan Paramter Default kita dapat dengan mudah menentukan Parameter apa yang seharusnya jika tidak disediakan.

//Old way
function greet(greeting, name) {
  if(!greeting) {
     greeting = ‘Hello’
  }
  if(!name) {
    name = “Friend”
  }
  console.log(`${greeting} ${name}.`)
}
//ES6 Default Paramteres
function greeti(greeting = ‘Hello’, name = ‘Friend’) {
  console.log(`${greeting} ${name}.`)
}

Kami menyimpan total enam baris kode! Bukankah itu luar biasa?

Objek.assign

Jika Anda membaca postingan React saya, Anda pasti sudah sering melihatnya. Menggunakan Object.assign memungkinkan kita membuat Objek baru dan meneruskan Objek lain. Apa? Contoh:

const obj = {
  a: 1,
  b: 2
}
const newObj = Object.assign({}, obj, {
  b: 13
})
/*
newObj == {
  a: 1,
  b: 13
}
*/

Yang penting disini adalah kita membuat Object yang benar-benar baru. Anda memanggil fungsi seperti Object.assign(target, …sources) dengan menyerahkannya sebuah Objek dan kemudian Objek yang nilainya harus digabungkan ke dalamnya.

Ini berguna untuk membuat penyimpanan data yang tidak dapat diubah di mana Anda tidak ingin mengubah data atau status yang disimpan tetapi membuat yang baru. Dengan demikian memungkinkan Anda mengingat yang lama dan kembali ke sana.

Singkatan properti

Fitur lain untuk menyimpan baris kode dan mungkin membingungkan orang adalah Property Shorthands. Jika Anda ingin meneruskan nama ke dalam dan objek sebagai properti objek object.name Anda cukup meletakkannya di sana.

const name = ‘HoverBaum’
//old
const nameObj = {
  name: name
}
//ES6
const es6Obj = {
  name
}

Bacaan lebih lanjut

Berikut ini beberapa tautan ke referensi bagus dan bacaan lebih lanjut.

- tulis semua fitur

- Referensi untuk fitur

- Seri ES6 oleh FunFunFunction

Awalnya diterbitkan di hoverbaum.net pada 25 Juli 2016.