Geekly articles weekly

Kapan menggunakan var, biarkan dan const dalam Javascript [terjemahan dari artikel Tyler McGinnis]

Halo, Habr! Saya mempersembahkan untuk Anda terjemahan artikel “var vs let vs const in JavaScript” oleh Tyler McGinnis.

gambar

Pada artikel ini, Anda akan belajar 2 cara baru untuk membuat variabel dalam Javascript (ES6), let dan const. Sepanjang artikel ini, kita akan melihat perbedaan antara var , let, dan const , serta topik terkait seperti: "lingkup fungsi versus lingkup blok", "meningkatkan" variabel dan kekebalan.

Jika Anda lebih suka video, tonton ini (asli dalam bahasa Inggris):


ES2015 (atau ES6) memperkenalkan kami pada 2 cara baru untuk membuat variabel, mis. Dan konst. Tetapi sebelum kita mempelajari perbedaan antara var , let, dan const , ada beberapa topik yang harus Anda ketahui terlebih dahulu. Ini adalah deklarasi variabel dan inisialisasi mereka, ruang lingkup (ruang lingkup fungsi khusus) dan "meningkatkan".

Mendeklarasikan dan menginisialisasi variabel


Deklarasi variabel memperkenalkan pengidentifikasi baru.

var declaration

Di atas kami membuat pengenal baru yang kami namakan "deklarasi". Dalam Javascript, saat dibuat, variabel diinisialisasi dengan nilai yang tidak ditentukan . Ini berarti bahwa jika kami mencoba menampilkan variabel deklarasi kami, kami tidak terdefinisi .

 var declaration console.log(declaration)

Jadi, kami menyimpulkan variabel deklarasi dan kami tidak terdefinisi .

Dibandingkan dengan mendeklarasikan variabel, menginisialisasi variabel adalah pertama kali Anda menetapkan nilai variabel ini.

 var declaration console.log(declaration) // undefined declaration = '  '

Jadi, di sini kita menginisialisasi variabel deklarasi dengan menulis string padanya.

Ini membawa kita ke konsep, ruang lingkup berikutnya.

Lingkup


Ruang lingkup menjelaskan di mana variabel dan fungsi dapat diakses dalam program kami. Dalam Javascript, ada 2 jenis cakupan - cakupan global , dan cakupan fungsi . Menurut spesifikasi resmi,
"Jika deklarasi variabel terjadi di dalam deklarasi fungsi, variabel didefinisikan dalam lingkup lokal dari fungsi ini ..."
Ini berarti bahwa jika Anda membuat variabel menggunakan var , ruang lingkup variabel ini akan menjadi fungsi di mana ia dibuat dan akan tersedia hanya di dalam fungsi ini atau fungsi bersarang lainnya.

 function getDate () { var date = new Date() return date } getDate() console.log(date) // NOT OK: Reference Error

Di atas, kami mencoba mengakses variabel dari luar fungsi yang dideklarasikan. Karena ruang lingkup variabel tanggal adalah fungsi getDate , itu hanya tersedia di dalam fungsi ini atau dalam fungsi lain yang bersarang di getDate (seperti yang ditunjukkan di bawah).

 function getDate () { var date = new Date() function formatDate () { return date.toDateString().slice(4) // OK } return formatDate() } getDate() console.log(date) // NOT OK: Reference Error

Sekarang mari kita lihat contoh yang lebih maju. Katakanlah kita memiliki array harga dan kita membutuhkan fungsi yang mengambil array ini, serta variabel diskon , dan mengembalikan kita array harga baru dengan diskon. Tujuan akhir mungkin terlihat seperti ini:

 discountPrices([100, 200, 300], .5)

Dan implementasinya mungkin terlihat seperti ini:

 function discountPrices (prices, discount) { var discounted = [] for (var i = 0; i < prices.length; i++) { var discountedPrice = prices[i] * (1 - discount) var finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } return discounted }

Ini terlihat cukup sederhana, tetapi apa hubungannya dengan ruang lingkup blok? Lihatlah ini untuk loop. Apakah variabel yang dideklarasikan di dalamnya dapat diakses di luarnya? Ternyata tersedia.

 function discountPrices (prices, discount) { var discounted = [] for (var i = 0; i < prices.length; i++) { var discountedPrice = prices[i] * (1 - discount) var finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } console.log(i) // 3 console.log(discountedPrice) // 150 console.log(finalPrice) // 150 return discounted }

Jika JavaScript adalah satu-satunya bahasa pemrograman yang Anda ketahui, Anda mungkin tidak perlu terlalu khawatir tentang itu. Namun, jika Anda datang ke JavaScript dari bahasa pemrograman lain, khususnya bahasa pemrograman yang memblokir ruang lingkup, Anda mungkin sedikit khawatir tentang apa yang terjadi di sini.

Itu tidak rusak, itu hanya bekerja sedikit aneh. Sebenarnya tidak ada alasan untuk memiliki akses ke i , discountPrice, dan finalPrice di luar for for . Itu tidak ada gunanya bagi kita, dan bahkan dapat membahayakan kita dalam beberapa situasi. Namun, karena variabel dideklarasikan menggunakan var , mereka termasuk dalam ruang lingkup fungsi dan Anda dapat mengaksesnya.

Sekarang kita telah membahas deklarasi dan inisialisasi variabel, serta ruang lingkup, hal lain yang perlu kita tangani sebelum kita menyelami perbedaan antara let dan const , ini adalah "meningkatkan".

"Angkat"


Ingat, sebelumnya dikatakan, "Dalam Javascript, ketika dibuat, variabel diinisialisasi dengan nilai yang tidak ditentukan". Ternyata itu berarti "terangkat". Penerjemah JavaScript mengatur variabel yang dideklarasikan menjadi tidak terdefinisi selama fase yang disebut “Penciptaan”.

Untuk studi yang lebih rinci tentang fase Penciptaan, "Meningkatkan" dan cakupan, baca artikel ini: "Panduan Utama untuk Mengangkat, Lingkup, dan Penutupan dalam JavaScript" .

Mari kita lihat contoh sebelumnya dan lihat bagaimana "peningkatan" memengaruhinya.

 function discountPrices (prices, discount) { var discounted = undefined var i = undefined var discountedPrice = undefined var finalPrice = undefined discounted = [] for (var i = 0; i < prices.length; i++) { discountedPrice = prices[i] * (1 - discount) finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } console.log(i) // 3 console.log(discountedPrice) // 150 console.log(finalPrice) // 150 return discounted }

Perhatikan bahwa semua variabel yang dideklarasikan telah disetel ke tidak terdefinisi . Itu sebabnya jika Anda mencoba mengakses salah satu dari mereka sebelum benar-benar diumumkan, Anda hanya tidak terdefinisi .

 function discountPrices (prices, discount) { console.log(discounted) // undefined var discounted = [] for (var i = 0; i < prices.length; i++) { var discountedPrice = prices[i] * (1 - discount) var finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } console.log(i) // 3 console.log(discountedPrice) // 150 console.log(finalPrice) // 150 return discounted }

Sekarang Anda tahu semua yang Anda butuhkan tentang var , sekarang mari kita bicara tentang tujuan utama kita di sini: untuk apa perbedaan antara var , let dan const ?

var, let atau const


Untuk memulai, mari kita bandingkan var dan biarkan . Perbedaan utama antara var dan let adalah membiarkannya terlepas dari lingkup global dan lingkup fungsi, membiarkan Anda menentukan variabel dalam lingkup blok. Ini berarti bahwa variabel yang dibuat menggunakan kata kunci let tersedia di dalam "blok" tempat itu dibuat, serta di dalam blok bersarang. Ketika saya mengatakan "block," saya berarti sesuatu yang dikelilingi oleh kurung kurawal {}, seperti perulangan for atau pernyataan if .

Jadi, mari kita kembali ke fungsi discountPrices kami untuk yang terakhir kalinya.

 function discountPrices (prices, discount) { var discounted = [] for (var i = 0; i < prices.length; i++) { var discountedPrice = prices[i] * (1 - discount) var finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } console.log(i) // 3 console.log(discountedPrice) // 150 console.log(finalPrice) // 150 return discounted }

Ingatlah bahwa kita memiliki hak untuk mengeluarkan i , discountPrice , dan finalPrice di luar for loop, karena mereka dideklarasikan menggunakan var , dan variabel yang dideklarasikan menggunakan kata kunci var dibatasi oleh cakupan fungsi. Tetapi apa yang terjadi sekarang jika kita mengubah var untuk membiarkan dan mencoba menjalankan kode kita?

 function discountPrices (prices, discount) { let discounted = [] for (let i = 0; i < prices.length; i++) { let discountedPrice = prices[i] * (1 - discount) let finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } console.log(i) // 3 console.log(discountedPrice) // 150 console.log(finalPrice) // 150 return discounted } discountPrices([100, 200, 300], .5) // NOT OK: ReferenceError: i is not defined

Kami mendapat ReferenceError: saya tidak didefinisikan . Yang memberitahu kita bahwa variabel yang dideklarasikan dengan let terbatas pada lingkup blok, bukan fungsi. Cobalah untuk memanggil saya (atau diskon Harga atau harga akhir ) di luar "blok" di mana mereka dinyatakan, dan ini akan memberi kita kesalahan panggilan, seperti yang baru saja kita lihat.

 var VS let var:     let:

Perbedaan berikut terkait dengan "peningkatan". Kami mengatakan sebelumnya bahwa definisi "uplift" adalah: "Penerjemah JavaScript menetapkan variabel yang dideklarasikan menjadi tidak terdefinisi selama fase yang disebut" Penciptaan. "

 function discountPrices (prices, discount) { console.log(discounted) // undefined var discounted = [] for (var i = 0; i < prices.length; i++) { var discountedPrice = prices[i] * (1 - discount) var finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } console.log(i) // 3 console.log(discountedPrice) // 150 console.log(finalPrice) // 150 return discounted }

Saya tidak dapat mengingat kasus penggunaan tunggal ketika Anda benar-benar ingin mengakses variabel sebelum mendeklarasikannya. Tampaknya mendapatkan ReferenceError akan lebih baik daripada tidak terdefinisi .

Sebenarnya, inilah yang dibiarkan . Jika Anda mencoba mengakses variabel sebelum deklarasi dengan membiarkan , alih-alih tidak terdefinisi (seperti ketika mendeklarasikan dengan var ), Anda akan mendapatkan ReferenceError .

 function discountPrices (prices, discount) { console.log(discounted) // NOT OK: ReferenceError let discounted = [] for (let i = 0; i < prices.length; i++) { let discountedPrice = prices[i] * (1 - discount) let finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } console.log(i) // 3 console.log(discountedPrice) // 150 console.log(finalPrice) // 150 return discounted } 

 var VS let var:        undefined         . let:       ReferenceError        .

biarkan atau const


Sekarang Anda mengerti perbedaan antara var dan let, bagaimana dengan const? Ternyata const hampir sama dengan let. Namun, ada satu perbedaan: jika Anda pernah menetapkan nilai menggunakan const, Anda tidak dapat mengubahnya ke yang lain.

 let name = 'Tyler' const handle = 'tylermcginnis' name = 'Tyler McGinnis' // OK handle = '@tylermcginnis' // NOT OK: TypeError: Assignment to constant variable.

Kesimpulan dari di atas adalah bahwa variabel yang dideklarasikan dengan let dapat ditimpa, dan variabel yang dideklarasikan dengan const tidak bisa.

Hebat, sekarang karena Anda ingin variabel Anda tidak berubah, Anda dapat mendeklarasikannya dengan const . Atau tidak juga. Hanya karena sebuah variabel dideklarasikan menggunakan const tidak berarti bahwa itu tidak dapat diubah, semua itu berarti bahwa itu tidak dapat ditimpa. Di bawah ini adalah contoh yang bagus.

 const person = { name: 'Kim Kardashian' } person.name = 'Kim Kardashian West' // OK person = {} // NOT OK: Assignment to constant variable.

Perhatikan bahwa mengubah properti suatu objek bukanlah overwrite, jadi meskipun objek tersebut dinyatakan menggunakan const , ini tidak berarti Anda tidak dapat mengubah salah satu propertinya. Ini hanya berarti bahwa Anda tidak dapat menimpa objek ini.

Sekarang, pertanyaan paling penting yang belum dijawab: apa yang harus saya gunakan var , let atau const ? Pendapat yang paling populer, dan yang saya patuhi, adalah untuk selalu menggunakan const sampai Anda tahu apakah variabel akan berubah. Alasan untuk ini adalah karena menggunakan const Anda membuatnya jelas untuk diri sendiri dan pengembang masa depan yang harus membaca kode Anda bahwa variabel ini tidak boleh diubah. Jika Anda perlu mengubahnya (misalnya dalam for for loop), cukup gunakan let .

Tidak banyak kasus yang tersisa antara variabel yang berubah dan variabel yang tidak berubah. Ini berarti Anda tidak perlu menggunakan var lagi.

Sekarang, pendapat tidak populer, meskipun masih memiliki pembenaran, adalah bahwa Anda tidak boleh menggunakan const , meskipun Anda mencoba untuk menunjukkan bahwa variabel ini tidak berubah, seperti yang kita lihat di atas, ini tidak sepenuhnya benar. Pengembang yang memegang pendapat ini selalu menggunakan biarkan selama tidak ada variabel yang benar-benar konstan, seperti _LOCATION_ = ....

Mari kita buat ringkasan dari hal di atas, var dibatasi oleh ruang lingkup fungsi dan jika Anda mencoba mengakses variabel seperti itu sebelum deklarasi, Anda akan tidak terdefinisi . const dan let dibatasi oleh lingkup blok, dan jika Anda mencoba mengakses variabel-variabel ini sebelum mendeklarasikannya, Anda mendapatkan ReferenceError . Dan perbedaan antara const dan let adalah bahwa nilai yang ditugaskan ke const tidak dapat ditimpa, tidak seperti let .

 var VS let VS const var:        undefined         . let:       ReferenceError        . const:       ReferenceError        .

Artikel ini awalnya diterbitkan di tylermcginnis.com sebagai bagian dari kursus JavaScript Modern .

Terima kasih telah membaca terjemahan ini, saya harap Anda menemukan sesuatu yang baru dan berguna untuk diri Anda sendiri. Saya akan senang melihat umpan baliknya!

Source: https://habr.com/ru/post/id438880/

More articles:


All Articles