Perbedaan Var, Const Dan Let Pada Javascript
Tutorial JavaScript Pemula Part 11 : Perbedaan Var, Const Dan Let Pada Javascript - Hello everyone selamat datang kembali diwebsite saya belajarwithib.my.id, pada seri kali ini kita akan membahas Perbedaan Var, Const Dan Let Pada Javascript.
Ada beberapa orang yang mungkin bertanya Perbedaan Var, Const Dan Let Pada Javascript karena salah satu orang itu adalah saya dulu jadi saya mau ngeshare sama kalian mengenai Perbedaan Var, Const Dan Let Pada Javascript.
Yuk simak materinya!
Perbedaan Var, Const Dan Let Pada Javascript
Pada awal Rilis ES6, Javascript mulai memperkenalkan Const dan Let dalam pembuatan sebuah variable dan Var tetap ada karena untuk mempertahankan kompatibilitas dari versi-versi sebelumnya. Lalu apasih sebenarnya perbedaan Var, Const Dan Let pada javascript? Mari kita bahas!
Perbedaannya pada Assignment, Hoisting dan Scope lalu ada beberapa perbedaannya lagi namun kita akan bahas satu per satu terlebih dahulu
Assignment (Tugas)
Perbedaan yang paling mencolok adalah let dan var bisa diubah kembali isinya namun sedangkan conts tidak bisa diubah. Nah inilah yang menjadikan const jadi pilihan terbaik buat kamu yang memerlukan variable yang tidak perlu diubah isinya dan itu mencegah kesalahan dalam merubah data yang tidak sengaja diubah.
Namun bukan berarti const tidak bisa diubah, dalam beberapa case di array atau objek kita bisa mengubah isi dari constnya.
Hoisting (Mengangkat)
Pada variable yang menggunakan var selalu dinaikkan kebagian atas ruang lingkup masing-masing, sedangkan variable yang dibuat menggunakan const tidak dibiarkan dinaikkan. Nah inilah mengapa var bisa lebih rentan terjadi kesalahan.
Ingat sebelumnya kita mengatakan bahwa "Dalam JavaScript, variabel diinisialisasi dengan nilai undefined saat dibuat.". Ternyata, hanya itu yang dimaksud dengan " Hoisting ". Penerjemah JavaScript akan menetapkan deklarasi variabel sebagai nilai default undefined selama apa yang disebut fase "Pembuatan".
Mari kita lihat contoh sebelumnya dan lihat bagaimana Hoisting memengaruhi itu.
function discountPrices (prices, discount) {
var discounted = undefined
var i = undefined
var discountedPrice = undefined
var finalPrice = undefined
discounted = []
for (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 semua deklarasi variabel diberi nilai default undefined. Itulah mengapa jika Anda mencoba mengakses salah satu variabel tersebut sebelum benar-benar dideklarasikan, Anda hanya akan menjadi tidak terdefinisi.
Scope (Cakupan)
Pada Var adalah function scoped sedangkan let dan const adalah block-scope. Blok adalah kode apa pun dalam kurung kurawal, termasuk fungsi pernyataan kondisional dan loop.
Scope menentukan di mana variabel dan Function dapat diakses di dalam program Anda. Di JavaScript, ada dua jenis cakupan - cakupan global, dan cakupan Function.
"Jika pernyataan variabel muncul di dalam FunctionDeclaration, variabel tersebut ditentukan dengan lingkup Function-lokal di Function itu.".
Artinya adalah jika Anda membuat variabel dengan var, variabel itu "dibatasi" ke fungsi tempat ia dibuat dan hanya dapat diakses di dalam Function itu atau, fungsi bertingkat apa pun.
function getDate () {
var date = new Date()
return date
}
getDate()
console.log(date) // Uncaught ReferenceError: date is not defined
Di atas saya mencoba mengakses variabel di luar Function yang dideklarasikannya. Karena tanggal "scope" atau dibatasi ke Function getData, itu hanya dapat diakses di dalam getDate itu sendiri atau Function bertingkat apa pun di dalam getDate. Lihatlah code dibawah ini :
function getDate () {
var date = new Date()
console.log(date) // Sun Jan 31 2021 12:53:15 GMT+0700 (Western Indonesia Time)
return date
}
getDate();
Maka jika diconsole log didalam function maka hasilnya akan keluar tidak seperti sebelumnya.
|
|
Redeclare |
Hoisting |
Block Scope |
Create Global props |
|
Var |
Ya |
Ya |
Tidak |
Ya |
|
Let |
Tidak |
Tidak |
Ya |
Tidak |
|
Const |
Tidak |
Tidak |
Ya |
Tidak |
Var VS let VS const
Pertama, mari bandingkan var dan let. Perbedaan utama antara var dan let adalah bahwa alih-alih menjadi cakupan fungsi, let adalah Block Scope. Artinya, variabel yang dibuat dengan kata kunci let tersedia di dalam "block" tempat ia dibuat serta semua blok bersarang. Saat saya mengatakan "block", yang saya maksud adalah segala sesuatu yang dikelilingi oleh kurung kurawal {} seperti dalam for atau pernyataan if.
Perhatikanlah code dibawah 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)
}
console.log(i) // 3
console.log(discountedPrice) // 150
console.log(finalPrice) // 150
return discounted
}
Ingatlah bahwa kita bisa memasukkan i, discountedPrice, dan finalPrice di luar loop for karena mereka dideklarasikan dengan var dan var adalah function scoped. Tapi sekarang, apa yang terjadi jika kita mengubah deklarasi var tersebut untuk menggunakan let dan coba menjalankannya?
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)
console.log(discountedPrice)
console.log(finalPrice)
return discounted
}
discountPrices([100, 200, 300], .5); //Uncaught ReferenceError: i is not defined
Kita mendapatkan Uncaught ReferenceError: i is not defined. Ini memberitahu kita bahwa variabel yang dideklarasikan dengan let memiliki Block Scope, bukan function scoped. Jadi mencoba mengakses i (atau discountedPrice atau finalPrice) di luar "block" tempat mereka dideklarasikan akan memberi kita kesalahan referensi seperti yang baru saja kita lihat.
var VS let
var: function scoped
let: block scoped
Perbedaan berikutnya berkaitan dengan Hoisting. Sebelumnya kita mengatakan bahwa definisi hoisting adalah "Penerjemah JavaScript akan menetapkan deklarasi variabel sebagai nilai default yang Undefined selama apa yang disebut fase 'Pembuatan'.” kita bahkan melihat ini beraksi dengan mencatat variabel sebelum dideklarasikan.
var:
Function Scope
undefined saat mengakses variabel sebelum dideklarasikan.
Let:
Block Scoped
ReferenceError saat mengakses variabel sebelum dideklarasikan.
Let VS Const
Sekarang setelah Anda memahami perbedaan antara var dan let, bagaimana dengan const? Ternyata, const hampir persis sama dengan let. Namun, satu-satunya perbedaan adalah setelah Anda menetapkan nilai ke variabel menggunakan const, Anda tidak dapat menetapkannya kembali ke nilai baru seperti yang kita jelaskan sebelumnya.
let name = 'Tyler'
const handle = 'tylermcginnis'
name = 'Tyler McGinnis' // benar
handle = '@tylermcginnis' // Uncaught TypeError: Assignment to constant variable.
Kesimpulan di atas adalah bahwa variabel yang dideklarasikan dengan let dapat ditugaskan kembali, tetapi variabel yang dideklarasikan dengan const tidak bisa.
Keren, jadi kapan pun Anda ingin variabel menjadi tetap, Anda dapat mendeklarasikannya dengan const. Yah, kurang tepat. Hanya karena sebuah variabel dideklarasikan dengan const bukan berarti ia tidak dapat diubah, yang berarti bahwa nilainya tidak dapat ditetapkan kembali. Ini contoh yang bagus.
const person = {
name: 'Kim Kardashian'
}
person.name = 'Kim Kardashian West' // Benar
person = {} // Uncaught TypeError: Assignment to constant variable.
Perhatikan bahwa mengubah properti pada suatu objek tidak menetapkannya kembali, jadi meskipun sebuah objek dideklarasikan dengan const, itu tidak berarti Anda tidak dapat mengubah propertinya. Itu hanya berarti Anda tidak dapat menetapkannya kembali ke nilai baru.
var VS Let VS const
var:
Function Scope
undefined saat mengakses variabel sebelum dideklarasikan
Let:
Block Scope
ReferenceError saat mengakses variabel sebelum dideklarasika
const:
Block Scope
ReferenceError saat mengakses variabel sebelum dideklarasikan tidak dapat
ditugaskan kembali
Sumber Referensi
https://medium.com/coderupa/es6-var-let-const-apa-bedanya-1cd4daaee9f0