Hoisting in JavaScript Explained: Paano nga ba ito gumagana?

Hoisting ng Function: Example 2

Pati ang mga function declaration ay ina-apply din ang hoisting. Tingnan natin ito sa pamamagitan ng isang halimbawa:

greet(); // "Hello, world!"

function greet() {
  console.log("Hello, world!");
}

Sa code na ito, kahit na ang deklarasyon ng function na greet ay nasa ibaba ng tawag sa function, magtatrabaho pa rin ito nang walang error. Ito ay dahil ang function declaration ay na-hoist sa itaas ng scope.

Hoisting sa mga Variable na Gamit ang let at const

Sa mga modernong deklarasyon ng variable tulad ng let at const, hindi pareho ang behavior kumpara sa var. Bagamat ang mga ito ay na-hoist pa rin, ang kanilang mga value ay hindi available hanggang sa makarating sa aktwal na deklarasyon. Ang mga ito ay tinatawag na "temporal dead zone" (TDZ).

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 10;

Sa halimbawa na ito, magtataas ng error ang code na nagsasabing hindi pwedeng ma-access ang variable bago pa man ito ma-initialize, kahit na ito ay na-hoist. Ito ang isang malaking pagkakaiba ng let at const mula sa var.

Paano ito Nakakaapekto sa Code?

Ang hoisting ay may malaking epekto sa ating JavaScript code, at ito ay mahalagang maunawaan para makaiwas sa mga bugs at hindi inaasahang behavior. Halimbawa, kung gumagamit ka ng var at inaasahan mong magtapon ng error kapag tinawag ang isang hindi pa nadeklarang variable, baka magulat ka na lang na hindi pala ito magtapon ng error kundi magbibigay lang ng undefined.

Gayundin, sa paggamit ng let at const, kailangan mong maging maingat at siguraduhing hindi ka tatawag ng variable o function bago ito ideklara upang maiwasan ang mga reference errors na dulot ng TDZ.

Hoisting at Function Expressions

Isang mahalagang aspeto ng hoisting ay ang pagkakaiba ng function declarations at function expressions. Ang function declaration ay nai-hoist nang buo, ngunit ang function expression ay hindi. Tingnan natin ang halimbawa:

sayHello(); // TypeError: sayHello is not a function

var sayHello = function() {
  console.log("Hello!");
};

Sa code na ito, nagkakaroon tayo ng error dahil ang function expression na ipinahayag gamit ang var ay hindi pa hoisted bilang isang function. Sa halip, ito ay itinulak bilang undefined sa itaas ng scope, kaya nagkakaroon ng TypeError kapag tinawag ang sayHello().

Best Practices sa Hoisting

Habang ang hoisting ay isang natural na bahagi ng JavaScript, may ilang mga best practices na dapat sundin upang maiwasan ang mga error:

• Iwasan ang paggamit ng var: Mas mainam na gumamit ng let at const upang maiwasan ang mga isyu na dulot ng hoisting. Ang mga ito ay mas secure at hindi magkakaroon ng "hoisting" issues tulad ng var.
• Palaging ideklara ang mga variable sa itaas ng scope: Para maiwasan ang kalituhan, mainam na ideklara ang mga variable at function bago pa man gamitin ang mga ito sa iyong code.
• Mag-ingat sa function expressions: Kung ginagamit mo ang function expressions, siguraduhin na hindi mo ito tatawagin bago ang aktwal na deklarasyon ng function.