Cara menggunakan HOISTING. pada JavaScript

Hoisting adalah konsep dalam JavaScript, bukan fitur. Dalam bahasa skrip atau sisi server lain, variabel atau fungsi harus dideklarasikan sebelum menggunakannya.

Dalam JavaScript, nama variabel dan fungsi dapat digunakan sebelum mendeklarasikannya. Kompilator JavaScript memindahkan semua deklarasi variabel dan fungsi ke atas sehingga tidak akan ada kesalahan apa pun. Ini yang disebut dengan Hoisting.

Contoh Syntax :

<!DOCTYPE html>
<html>
<body>
	<h2>Demo: Hoisting</h2>
	
	<p id="p1">x = </p>
	
	<script>

		x = 1;

		document.getElementById("p1").innerHTML = x ;

		var x;

    </script>
</body>
</html>

Dan untuk hasilnya adalah :

Dari Syntax diatas, yang dimaksud Hoisting JavaScript adalah deklarasi dari var x; akan otomatis terangkat sampai diatasnya x = 1; . Selain itu, variabel dapat ditempatkan ke variabel lain seperti yang ditunjukkan di bawah ini.

Contoh :

<!DOCTYPE html>
<html>
<body>
	<h2>Demo: Hoisting</h2>
	
	<p id="p1">x = </p>
	<p id="p2">y = </p>
	
	<script>

		x = 1;
		y = x;

		document.getElementById("p1").innerHTML += x ;
		document.getElementById("p2").innerHTML += y ;

		var x;
		var y;

    </script>
</body>
</html>

Dan hasil dari Syntax diatas adalah :

Jadi Hoisting mungkin hanya dengan deklarasi tetapi tidak dengan inisialisasi. JavaScript tidak akan memindahkan variabel yang dideklarasikan dan diinisialisasi dalam satu baris.

Contoh :

<!DOCTYPE html>
<html>
<body>
	<h2>Demo: Hoisting</h2>
	
	<p id="p1">x = </p>
	
	<script>

		document.getElementById("p1").innerHTML += x; 
        
		var x = 1;

    </script>
</body>
</html>

Dan untuk hasilnya sebagai berikut :

Seperti yang Anda lihat pada contoh di atas, nilai x tidak akan ditentukan karena var x = 1 tidak diangkat.

Hoisting of Function

Hoisting of Function yaitu Compiler JavaScript yang memindahkan definisi fungsi ke atas dengan cara yang sama seperti deklarasi variabel.

Contoh :

<!DOCTYPE html>
<html>
<body>
	<h2>Demo: Hoisting</h2>
	
	<script>
		alert(Sum(5, 5));

		function Sum(val1, val2)
		{
			return val1 + val2;
		}
        
    </script>
</body>
</html>

Dan untuk hasilnya adalah akan memunculkan alert dengan nilai 10. Dan harap dicatat bahwa compiler JavaScript tidak memindahkan ekspresi dari sebuah function. Dan berikut contoh dari Hoisting tanpa ekspresi sebuah function

Syntax :

<!DOCTYPE html>
<html>
<body>
	<h2>Demo: Hoisting</h2>
	
	
	<script>
		try
		{
			Add(5, 5); // error

			var Add = function Sum(val1, val2)
			{
				return val1 + val2;
			}
		}
		catch(ex)
		{
			alert(ex);
		}
        
    </script>
</body>
</html>

Dan untuk hasilnya adalah :

Hoisting Functions Before Variables

Kompilator JavaScript akan memindahkan definisi function sebelum deklarasi variabel. Contoh berikut ini membuktikannya.

<!DOCTYPE html>
<html>
<body>
	<h2>Demo: Hoisting</h2>
	
	<script>
		alert(UseMe);

		var UseMe;

		function UseMe()
		{            
			alert("UseMe function called");
		}

    </script>
</body>
</html>

Dan hasilnya adalah :

Seperti contoh di atas, ini akan menampilkan definisi fungsi UseMe. Jadi fungsinya bergerak sebelum variabel.

Point untuk diingat :
1. Compiler JavaScript memindahkan variabel dan deklarasi fungsi ke atas dan ini disebut hoisting.
2. Hanya deklarasi variabel yang pindah ke atas, bukan inisialisasi.
3. Definisi function bergerak terlebih dahulu sebelum variabel