JavaScript Hosting — Ինչպես հոսթ անել քո JS ֆայլերը ճիշտ ձևով

JavaScript-ը ունի մի յուրահատուկ մեխանիզմ, որը երբեմն շփոթեցնող է, հատկապես սկսնակների համար։ Մտածիր՝ գրում ես կոդ, ու փոփոխականը կանչում ես մինչ այն հայտարարված է, ու սխալ չես ստանում։ Սա կախարդանք չէ — սա hoisting է։

Այս հոդվածում կխոսենք, թե ինչ է hoisting-ը, ինչպես է այն աշխատում տարբեր դեպքերում (var, let, const, function declarations, function expressions), ինչպես է այն կապվում Temporal Dead Zone-ի հետ, ու ինչից պետք է զգուշանալ։

---

Ի՞նչ է Hoisting-ը

Hoisting նշանակում է՝ JavaScript-ը նախքան կոդի իրականացումը՝ մեխանիկորեն “բարձրացնում է” (hoists) որոշ հայտարարություններ դեպի իրենց scope-ի վերև։

Այսինքն՝ նույնիսկ եթե դու հայտարարում ես փոփոխական կամ ֆունկցիա կոդի ստորին հատվածում, JS շարժիչը նախ դրանք "տեսնում է", հետո միայն իրականացնում քո կոդը։

    console.log(name); // undefined
    var name = "Ani";

Վերևի օրինակը իրականում JS-ի կողմից ընկալվում է այսպես՝

    var name;
    console.log(name); // undefined
    name = "Ani";

Նկատիր՝ միայն հայտարարությունն է բարձրացվում, ոչ թե նշանակումը (assignment)։

---

var, let, const — տարբերություններ hoisting-ի ժամանակ

var

• Hoisted է ամբողջությամբ
• Ինիցիալիզացվում է undefined
• Կարող ես կանչել մինչև հայտարարելը

    console.log(x); // undefined
    var x = 10;

let և const

• Նույնպես hoisted են, բայց...
• Չեն ինիցիալիզացվում
• Մինչ ինիցիալիզացումը գտնվում են Temporal Dead Zone-ում (TDZ)
• Օգտագործումը մինչև հայտարարելը հանգեցնում է ReferenceError -ի

    console.log(y); // ReferenceError
    let y = 10;
    
    console.log(z); // ReferenceError
    const z = 20;

---

Temporal Dead Zone (TDZ) ի՞նչ է

TDZ-ը ժամանակահատված է, երբ փոփոխականը hoisted է, բայց դեռ ինիցիալիզացված չէ, ու եթե փորձես օգտագործել դրան՝ կստանաս ReferenceError։

---

Օրինակներ համեմատելու համար

var

    function exampleVar() {
      console.log(a); // undefined
      var a = 5;
    }
    exampleVar();

let

    function exampleLet() {
      console.log(b); // ReferenceError
      let b = 5;
    }
    exampleLet();

const

    function exampleConst() {
      console.log(c); // ReferenceError
      const c = 5;
    }
    exampleConst();

---

Ֆունկցիաների hoisting

Function Declarations – լիովին hoisted է

    greet(); // "Hello!"

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

JS-ն այսպես է դա վերափոխում՝

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

Function Expressions – հոսթ չեն լինում որպես ֆունկցիա

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

    var sayHi = function () {
      console.log("Hi");
    };

Ինչ է իրականում տեղի ունենում՝

    var sayHi;
    sayHi(); // TypeError
    sayHi = function () {
      console.log("Hi");
    };

Նույնն է նաև Arrow Functions-ը

    sayYo(); //  TypeError

    const sayYo = () => {
      console.log("Yo");
    };