Advance JavaScript 4 - execution context,hoisting Dan scope

Advance JavaScript 4 - execution context,hoisting Dan  scope

Didalam JavaScript itu Ada 2 fase pada execution context , execution context ini saat program kalian di jalankan nanti didalam nya Ada fase creation Dan fase execution

Kalau Kita menuliskan
Console.log(nama) di code Javascript Kita itu pasti akan error, kenapa karena variabel nama tidak pernah Kita definisikan sebelumnya

Tapi coba kalau di bawah nya Kita kasih variabel nya

Console.log(nama)
var nama = "gimasn"

Ini akan menampilkan undefined ,padahal variabel nama nya sudah Kita definisikan Tapi tampilnya undifined Dan ga error,Tapi kalau console log nya dibawah variabel itu baru muncul nama nya kenapa ini yang terjadi seperti ini

Saat program dijalankan yang terjadi adalah Ada sesuatu  yang disebut creation pase atau pase kreasi/pembentukan Dan terjadi nya di kontek global karena Kita membuatnya langsung di file JavaScript nya langsung ,kalau di dalam function itu beda lagi

Yang terjadi pada pase creation ini JavaScript nya akan mengecek apakah Ada variabel atau function didalam kodingan nya ,misal jika kalian mempunyai code 10 baris itu yang dicari ama JavaScript adalah Ada keyword var Dan function ada atau tidak ,jika Ada dia akan membuat nama variabel itu akan di isi dengan undefined, Dan kalau Ada  function itu akan di isi kode function itu sendiri, konsep ini disebut dengan hoisting (dalam Indonesia artinya menderek atau menaikan ,seperti menaikan bendera),selain Dua hal itu Ada lagi yang di definisikan yaitu JavaScript mendefinisikan object window sebagai global object,Dan this sebagai window .

Setelah itu baru execution fase yaitu meng exsekusi program nya baris perbaris dari atas kebawah makanya kode console.log di atas isinya undefined karena kena hoisting

Itu contoh dari execution context Dan hoisting ,jika kalian ingin melihat lebih detail bisa kunjungi website JavaScript visualizer.

Sekarang Kita fokus ke bagian function nya

console.log(sayhello())

var nama = "gimasn"
var umur = 18

function sayhello() {
return `hallo nama saya ${nama} saya ${umur} tahun`
}

Coba kalian copy code tersebut pastekan ke JavaScript visualizer

Kalau di liat di visualizer nya pada saat masuk menjalankan function itu seolah olah dia menjalan Kan execution context nya sendiri jadi Kalau ketemu function execution nya nya sudah tidak global lagi ,kalau ketemu function dia membuat lokal execution context yang didalam nya sama terdapat creation Dan execution beda nya kalau lokal execution context itu selain Kita dapat mengakses window Kita juga punya akses ke yang namanya arguments  ,Dan didalam nya Ada hoisting juga Tapi hoisting nya lokal.

Coba perhatikan code berikut
var nama = "gimasn"
var username = "@gimasn"

function CetakUrl(username){
var InstagramUrl = "http://Instagram.com"
return InstagramUrl + username;
}

console.log(cetakUrl(username))

Ini akan menampilkan gimasn

Tapi kalau saya ubah

var nama = "gimasn"
var username = "@gimasn"

function CetakUrl(username){
var InstagramUrl = "http://Instagram.com"
return InstagramUrl + username;
}

console.log(cetakUrl('nuralamsah));

Coba menurut kalian gimasn atau nuralamsah yang akan dicetak ,ya pasti berubah menjadi nuralamsah kenapa itu karena scope ,begitu Kita menulis argument Lalu datanya dikirimkan ke parameter maka username yang Ada didalam function itu ngambilnya ke argument makanya mama nya berubah Tapi kalau misalkan Kita hapus argument nya tetapi Kita tetap kirimkan parameter  nya  ,itu akan berubah lagi menjadi gimasn kenapa karena nuralamsah dikirimkan kedalam argument tetapi tidak Ada yang nangkep tapi di sini Ada tulisan username ,itu yang pertama di cek yaitu variabel lokal nya Ada ga yang namanya username jika tidak Ada dia cek ke argument nya kalau ga Ada juga dia cek ke window nya atau diluar function nya kebetukan di luar function Kita punya variabel yang nama nya username maka yang dipake itu, Lalu kemana parameter nuralamsah tadi, dia Masuk kedalam object yang namanya arguments,

var nama = "gimasn"
var username = "@gimasn"

function CetakUrl(){
var InstagramUrl = "http://Instagram.com"
return InstagramUrl + username;
}

console.log(cetakUrl('nuralamsah'));

Kita cek nuralamsah nya ke dalam arguments

Kita tinggal console.log(arguments) maka akan muncul arguments nya Dan kalau Kita console.log(arguments[0]) maka akan muncul nuralamsah nya