JS101 | Scope of Variables

Hendra 'hare' Sadewa
3 min readOct 26, 2021

--

Sampai sejauh mana variable dapat diakses?

Variabel memiliki scope / jangkauan terhadap blok program / fungsi. Jika di artikel variabel & constants ini kita sudah membahas sedikit perihal scope dari suatu variabel dengan keyword var, let, dan const.

Kali ini kita akan membahas lebih dalam serta contoh bagaimana kita (HAAAAAAAAAAAAAAH~ KYTTAAAA!?~) dapat mengetahui jangkauan dari variabel.

Local & Global

Photo by Kyle Glenn on Unsplash

Berdasarkan jangkauannya, variable dapat dibedakan menjadi 2 yaitu, local dan global. Mari kita lihat di code berikut:

const CURRENT_YEAR = 2020;

const profile = {
firstName: 'Hendra',
lastName: 'Sadewa',
birth: {
year: 1994,
month: 07,
day: 16,
},
};

function getShortProfile(user) {
const fullName = `${user.firstName} ${user.lastName}`;
const age = CURRENT_YEAR - user.birth.year;

const profile = {
...user,
fullName,
age,
};

console.log('profile - getShortProfile', profile);

return profile;
}

const shortProfile = getShortProfile(profile);

console.log('profile - global', profile);

console.log(
`Halo ${shortProfile.fullName}`,
`You're ${shortProfile.age} years old`
);

Output:

profile - getShortProfile {
firstName: 'Hendra',
lastName: 'Sadewa',
birth: { year: 1994, month: 7, day: 16 },
fullName: 'Hendra Sadewa',
age: 26
}

profile - global {
firstName: 'Hendra',
lastName: 'Sadewa',
birth: { year: 1994, month: 7, day: 16 }
}

Halo Hendra Sadewa You're 26 years old

Ada beberapa hal yang perlu diperhatikan yaitu:

  • CURRENT_YEAR dan profile yang didefinisikan diluar blok fungsi dapat disebut dengan variabel global, dan dapat diakses lewat dalam blok fungsi getShortProfile.
  • CURRENT_YEAR digunakan untuk menghitung nilai age didalam getShortProfile, tanpa ada masalah.
  • profile didalam getShortProfile berbeda dengan variabel profile yang didefinisikan di luar function. Variabel profile yang berada didalam hanya berlaku didalam / local functionnya saja, oleh karena itu disebut dengan local variable. Ini dibuktikan dengan mencetak kedua variabel dengan perintah console.log yang menghasilkan nilai yang berbeda namun dengan nama variabel yang sama.

Oke dari code diatas terbukti ya kalo perbedaan antara local dan global variabel. Eh, tapi ada pertanyaan ni.

Q: gimana kalo kita definisikan variabel didalam function terus, I mau akses di luar function apakah bisa gan?

A: nga, ngga bisa, karena jangkauan nya variabel yang didefinisikan didalam function merupakan variabel local, jika keluar dari block nya akan tak terdefinisi.

Mari kita buktikan dengan code berikut:

function greeting() {
const username = 'hendra';
return username;
}

// mencoba akses username didalam function greeting
console.log(username);

ketika dirunning, program akan menghasilkan Reference error: username is not defined. Artinya variabel username yang didefinisikan di dalam function greeting tidak dapat dikenali selain didalam function greeting.

Okay mungkin cukup untuk bahasan scsope dalam variabel ini, kita akan bahas callback function dalam artikel berikutnya, have a good friday guys.

Oiya, kalo bingung atau menemukan kesalahan dalam artikel ini, silahkan mention gue di twitter @sadevva_.

Cheers 🥂

Originally published at https://hendrasadewa.site.

--

--

Hendra 'hare' Sadewa
Hendra 'hare' Sadewa

Written by Hendra 'hare' Sadewa

Front-end Developer | FOSS & Web Enthusiast

No responses yet