DEV Community: dav

Closure-ները JavaScript-ում.

dav — Thu, 04 Jan 2024 13:09:12 +0000

Երբևէ լսե՞լ եք JavaScript-ում closure-ների մասին շատերին այն բարդ ու անհասկանալի է թվում(ինձ թվում է անունից է) բայց մի անհանգստացեք դա այնքան էլ բարդ չէ, որքան թվում է

JavaScript-ում closure-ները նման են տուփի որը պահում է ֆունկցիան և այն միջավայրը որում ֆունկցիան հայտարավել է, այն թույլ է տալիս ֆունկցիային հիշել այն միջավայրը որում այն ստեղծվել է( այդ միջավայրի փոփոխականները): այսինքն javascript ում ֆունկցիան ոչ միայն ունի այն փոփոխականները որոնք հայտարարվել են իր մեջ կամ ստացել է որպես արգումենտ այլ նաև այն scop-ի փոփոխականները որում ֆունկցիան հայտարարել ենք։ շուտով ամեն ինչ ավելի պարզ կդառնա

Եկեք պարզենք կախարդանքը պարզ օրինակներով.

let name = 'Dav'
function seyHi(){
    console.log('hello ' + name)
}

seyHi()
//hello Dav

այստեղ մենք հայտարարել ենք ֆունկցիա որը օգտագործում է իր ծնող scop ի փոփոխականը (այն scop-ի որում հայտարարվել է) և այդ ֆունկցիան նորմալ աշխատում է և փոփոխականի կախվածության հետ միասին կոչվում է Closure։ այսպիսով ֆունկցիան իր կախվածությունների հետ(այն փոփոխականների որոնք նա օգտագործում է բայց հայտարարված են իրենից դուրս) միասին կոչվում է Closure հայերեն կարող են ասել "փակում" (մի փոքր ծիրծացելի թարգմանություն է բայց այո բառացի այդպես է թարգմանվում)

նայենք մեկ այլ օրինակ

function outerFunction() {
  let outerVariable = "ես դրսում եմ հայտարարված!";

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const closureFunction = outerFunction();
closureFunction(); // Output: ես դրսում եմ հայտարարված

այստեղ մենք հայտարարել ենք ֆունկցիա outerFunction անունով դրա մեջ outerVariable անունով փոփոխական ու մի ֆունկցիայել innerFunction անունով որը տպում է outerVariable փոփոխականը հետո վերադրաձնում ենք ներսում հայտարարված ֆունցիան՝ innerFunction-ը։
և այո javascript ում հնարավոր է որպես արժեք վերադրաձնել ֆունցիան ու երբ այն ֆունկցիան որը վերադարձնում է տվյալ ֆունկցիան վերագրվում է փոփոխականին կարելի է ասել որ այդ փոփոխականը դառնում է հղում ներսի ֆունկցիայի համար որը հնարավոր է կանչել(եթե չհասկացաք ուղակի նայեք կոդին)

այսպիսով ինչ կատարվեց innerFunction ը օգտագործում է outerVariable-ը որը հայտարարված է իր ծնող ֆունկցիայում և դա հնարավոր է որովհետև innerFunction-ը պահում է outerVariable փոփոխականը(ի շնորիվ Closure-ի)

debugger ում կարող եք նայել closure-ները: նայեք նկարի կոդին և closure-ները

հիմա եկեք մի փոքր բարդացնենք

let globalVariable = "ես global scop ում եմ գտնվում"
function outerFunction() {
  let outerVariable = "ես դրսում եմ հայտարարված!";

  function innerFunction() {
    console.log(outerVariable);
    console.log(globalVariable );
  }

  return innerFunction;
}

const closureFunction = outerFunction();
closureFunction(); // Output: "ես դրսում եմ հայտարարված!"                           
                   // Output։ ""ես global scop ում եմ գտնվու

global scop ում ավելացրել եմ փոփոխական globalVariable անունով ու այն օգտագործել եմ innerFunction ում և ամեն ինչ դեռ աշխատում է ինչի քանի որ outerFunction ը պահում է global scop ի փոփոխականները(քանի որ այդտեղ է հայտարարվել) իսկ innerFunction ը outerFunction-ի մեջ գտնվուղ փոփոխականները ու այդպես "ժառանգաբար" innerFunction ը կարող է օգտագործել global scop ի փոփոխականները։ ի շնորհիվ դրա ֆունկցիաները կորող են իրենց կրող scop ի փոփոխականները օգտագործել նաև իրենց կրող scop ը կրող scop-ում գտնվող փոփոխականները և այդպես մինչև global scop բոլոր փոփոխականները այլ կերպ ասած ինենց scop ից վեր գտնվող բոլոր scop-երի փոփոխականները

եկեք նայենք մեկ այլ օրինակ

function f(){

  function k(){
    var x = 10

    }
  k()
  console.log(x)

}


f() // Output: ReferenceError: x is not defined"

հայտարարել եմ f ֆունկցիա դրա մեջ k անունով ֆունկցիա և k ֆունկցիայի մեջ x անունով փոփոխական իսկ հետո f() ֆունկցիայում փորձել օգտագործել x ը և ReferenceError: x is not defined" հմմ ինչի։ քանի որ ֆունկցիան պահում է միայն իրեն կրող scop ի փոփոխականները իսկ k ֆունկցիան գտնվում է f ի մեջ այսինքն k ի մեջ հասանելի են f ի փոփոխականները բայց հակառակը ոչ նույն կերպել global scop ում հասանելի չեն f և k ֆունկցիաներում հայտարարված փոփոխականները բայց global scop ի փոփոխականները հասանելի են 2 ֆունկցիաներումել

իրականում jsvasctipt ի engin-ը ավելի խելացի է և միայն պահում է այն փոփոխականները որոնք ֆունկցիան օգտագործում է և եթե global scop-ում պահենք n անունով փոփոխակամ և չօգտագործենք f ֆունկցիայում f ը չի պահի այդ փոփոխականը

կարող եք նաև տեսահոլովակ նայել նույն թեմայով

Javascript - Փակումներ (Closures) - YouTube

Հղումներ----------------Javascript դասընթաց: https://youtube.com/playlist?list=PLkVo56yGU5Pqld7f3jtoE-g_755aPT0NVՖեյսբուքյան էջ: https://www.facebook.com/rou...

youtube.com

ինչ է Hoisting ը JavaScript-ում

dav — Wed, 03 Jan 2024 09:36:42 +0000

այսպիսով javascript engine ը ունի առաջին հայացքից մի փոքր տարօրինակ բայց հետաքրքիր վարքագիծ այն փոփոխակաները class-ները function-ները բարձրացնում է տվիալ scop-ի ամենավերևը դա տեղի է ունենում compilation ի փուլում և կոչվում է hoisting այն օգտակար է բայց եթե չգիտես ինչպես է աշխատում կարող խնդիրներ առաջացնել

Function Hoisting

function printHello() {
  console.log("hello")
}

printHello()
// hello

Այստեղ մենք հայտարարում ենք printHello ֆունկցիան և անմիջապես հետո կանչում այդ ֆունկցիան: Սխալներ չկան ամեն ինչ աշխատում է!

Այժմ նայեք այս օրինակին.

printHello()
// hello

function printHello() {
  console.log("hello")
}

հմմ Այստեղ մենք կանչում ենք printHello ֆունկցիան նախքան այն հայտարարելը: Եվ ամեն ինչ դեռ աշխատում է առանց սխալների: Ի՞նչ է տեղի ունեցել այստեղ։ hoisting .

Նախքան interpreter-ը կկատարի կոդը, այն նախ բարձրացնում է հայտարարված ֆունկցիաները scop-ի ամենավերևը(այն scop-ի որում ֆունկցիան հայտարարված է)։ hoistion-ի միջոցով ֆունկցիան հասանելի է դառնում նույնիսկ նախքան հայտարարելը։

Տեսնենք մեկ այլ օրինակ.

printHello()
// hello

printWorld()
// ReferenceError: printWorld is not defined

function printHello() {
  console.log('hello')

  function printWorld() {
    console.log("world")
  }
}

Ինչպես տեսնում եք այստեղ, մենք հայտարարում ենք printHello ֆունկցիան. որը տպում է 'hello' այնուհետև հայտարարում ենք մեկ այլ ֆունկցիա, որը կոչվում է printWorld, որը տպում է 'world' , երբ կանչվում է:

Նախքան printHello ֆուկցիան հայտարարելը, մենք փորձում ենք կանչել այն՝ printHello(). և Այն հասանելի է (ի շնորհիվ hoisting ի այն բարձրացել է global scop ի ամենավերևը), ուստի մենք «hello» ենք տեսնում console-ում:

Բայց հետո մենք կանչում ենք printWorld-ը, և ստանում ենք ReferenceError. printWorld-ը սահմանված չէ : Արդյո՞ք hoisting ը տեղի չի ունենում printWorld ի դեպքում:

hoisting ը աշխատում է, բայց այն "բարձրացնում է" միայն այն scop ի վերին մաս, որտեղ հայտարարվել է ֆունկցիան տվիալ դեպքում printHello ֆունկցիայի սքոփի վերևը: Հետևաբար, այն հասանելի կլինի միայն այդ ֆունկցիայում: Եկեք թարմացնենք մեր կոդը.

printHello()
// hello

function printHello() {
  printWorld()
  // world

  console.log('hello')

  function printWorld() {
    console.log("world")
  }
}

Այժմ մենք կանչում ենք printWorld ֆունկցիան printHello ֆունկցիայի վերևում, բայց նախքան printWorld ը հայտարարելը և այն աշխատում է Քանի որ hoisting ը ֆունկցիան բարձրացնում է local scop ի վերևը, և մենք կարող ենք մուտք գործել այն նախքան հայտարարելը

hoisting-ը այս ամենը հնարավոր է դարձնում function declaration-ների համար: Բայց, հարկ է նաև նշել, որ այն չի աշխատի function expression-ների դեպքում: դրա մասին կգրեմ մեկ այլ անգամ

Հիմա եկեք նայենք փոփոխականների hoisting ը:

Variable Hoisting

Դուք կարող եք փոփոխականներ հայտարարել JavaScript-ում var, let, և const keyword-ներով: Եվ այս փոփոխականները կենթարկվեն hoisting-ի, բայց այլ կերպ: Սկսենք var-ից.

var

Նայեք այս օրինակին.

console.log(name)
// undefined

var name = "Dav"

Այստեղ մենք հայտարարում ենք name անունով փոփոխական, որի արժեքը «dav» է: Բայց երբ մենք փորձում ենք մուտք գործել փոփոխական նախքան այն հայտարարելը ոչ մի սխալ չենք ստանում: hoisting է տեղի ունեցել. name փոփոխականը "բարձրացվել է" ուստի թարգմանիչը «գիտի», որ կա փոփոխական, որը կոչվում է name: Եթե թարգմանիչը չիմանար, դուք կստանաք անունը սահմանված չէ : Եկեք փորձենք.

console.log(name)
// ReferenceError: name is not defined

var myName = "Dav"

Մենք ունենք փոփոխական, որը կոչվում է, myName (ոչ թե name): և ստանում ենք «անունը սահմանված չէ» սխալ, երբ փորձում ենք
վերցնել name-ի արժեքը: Թարգմանիչը «չգիտի» այս փոփոխականի մասին։

Վերադառնալով վերը նշված մեր օրինակին.

console.log(name)
// undefined

var name = "Dav"

Թեև hoisting ը տեղի է ունեցել այստեղ, բայց nameո ի արժեքը որոշված չէ, երբ մենք մուտք ենք գործում այն նախքան հայտարարելը: եթե փոփոխականը հայտարարված է var ով հայտարարությունը բարձրացվում է, բայց իր default արժեքով` undefined: Փաստացի արժեքը փոխվում է, երբ հայտարարման տողը կատարվում է և այդ տողից հետո փոփոխականին մուտք գործելով՝ մենք ստանում ենք իրական արժեքը.

`
console.log(name)
// undefined

var name = "Dav"

console.log(name)
// Dav
`

Ենթադրենք, name ը հայտարարել ենք ֆունկցիայի մեջ.

`
print()

console.log(name)
// ReferenceError: name is not defined

function print() {
var name = "Dav"
}
`

Այստեղ մենք ստանում ենք ReferenceError. անունը սահմանված չէ : Հիշեք, որ փոփոխականները բարձրացվում են, բայց միայն այն scop ի վերին մաս որտեղ նրանք հայտարարվել են: Այս դեպքում, name-ը հայտարարված է print ֆունկցիայում, այնպես որ այն կբարձրացվի այդ local scop-ի վերև: Փորձենք մուտք գործել այն ֆունկցիայում.

`
print()

function print() {
console.log(name)
// undefined

var name = "dav"
}
`

Փորձելով մուտք գործել name ֆունկցիայում, թեև այն գտնվում է հայտարարման տողից վեր, մենք սխալ չենք ստանում: Դա պայմանավորված է նրանով որ name ը բարձրացված է(hoisting), բայց մի մոռացեք, որ իր default արժեքով` undefined:

let

Թեև let փոփոխականները նույնպես ենթարկվում են hoisting ի, նրանք ունեն այլ վարքագիծ: Տեսնենք մի օրինակ.

console.log(name)
// ReferenceError: Cannot access 'name' before initialization

let name = "Dav"

Այստեղ մենք ստանում ենք ReferenceError. Հնարավոր չէ մուտք գործել «name» նախքան հայտարարելը : Նկատո՞ւմ եք, որ սխալն ասում է, որ name ը սահմանված չէ : Դա պայմանավորված է նրանով, որ թարգմանիչը «տեղյակ է» name փոփոխականի մասին, քանի որ փոփոխականը ենթարկվել է hoisting ի:

«Cannot access 'name' before initialization» տեղի է ունենում, քանի որ հայտարարված let փոփոխականները չունեն default արժեք, երբ ենթարկվում է hoisting-ի(բարձրացվում է): Ինչպես տեսանք var, փոփոխականներն ունեն default արժեք՝ undefined մինչդեռ let, փոփոխականները չեն 'սկզբնավորվում':

Փոփոխականները բարձրացվում են այն scop ի վերին մաս, որտեղ նրանք հայտարարված են (local կամ glbal), բայց հասանելի չեն, քանի որ չեն սկզբնավորվել: Այդ հատվածը կոչվում է Temporal Dead Zone(ժամանակավոր մեռյալ գոտի):

Դրանք կարող են հասանելի լինել միայն հայտարարման տողից հետո.

_const _

const ի դեպքում ամեն ինչ նույն է ինչ let ի դեպքում

console.log(name)
// ReferenceError: Cannot access 'name' before initialization

const name = "Dav"

Class

JavaScript-ի class-ները նույնպես բարձրացվում են(hoisting): Տեսնենք մի օրինակ.

const Dog = new Animal("jeko")
// ReferenceError: Cannot access 'Animal' before initialization

class Animal {
  constructor(name) {
    this.name = name
  }
}

Այստեղ մենք հայտարարում ենք class, որը կոչվում է Animal. Մենք փորձում ենք մուտք գործել այս class (ստեղծելով Dog օբյեկտ) նախքան այն հայտարարելը: Մենք ստանում . ReferenceError հնարավոր չէ մուտք գործել «Animal» նախքան սկզբնավորումը : Ի՞նչ է ձեզ հիշեցնում այս սխալը:

Ճիշտ այնպես, ինչպես let և constփոփոխականների դեպքում, class ները բարձրացվում են այն scop ի վերևում, որտեղ նրանք սահմանվել են, բայց անհասանելի են այնքան ժամանակ, քանի դեռ չեն սկզբնավորվել:

Եկեք թարմացնենք կոդը.

class Animal {
  constructor(name) {
    this.name = name
  }
}

const Dog = new Animal("jeko")

console.log(Dog)
// { name: 'jeko' }

Animal ը հայտարարելուց հետո այն դառնում է հասանելի, այնպես որ մենք կարող ենք ստեղծել Dog առանց սխալների:

և այսպես երբեմն կտեսնեք այսպիսի կոդ

՝՝՝
function1()
function2()
function3()

// lines of code
// lines of code

function function1() {...}
function function2() {...}
function function3() {...}
՝՝՝

այստեղ ֆունկցաները իրենց տրամաբանությամբ հայտարարված են ներգևում բայց օգտագործվում կոդի մեջ ավելի վերև այն աշխատում է ի շնորհիվ hoisting ի իսկ փոփոխականների և class ների դեպքում ամեն ինչ այլ է

JavaScript-ում Null-ի և Undefined-ի միջև եղած տարբերությունը

dav — Tue, 02 Jan 2024 07:00:52 +0000

JavaScript-ը, որպես բազմակողմանի և լայնորեն օգտագործվող ծրագրավորման լեզու, ունի որոշ առանձնահակություններ և նրբություններ: «null» և «undefaind» Երկու տերմին, որոնք հաճախ շփոթեցնում են ծրագրավորողներին, հատկապես նրանց, ովքեր նոր են տիրապետում լեզվին: Թեև երկուսն էլ ներկայացնում են արժեքի բացակայությունը, նրանք ունեն տարբեր իմաստներ և օգտագործման դեպքեր JavaScript-ում: Այս հոդվածում մենք կխորանանք null-ի և undefined-ի միջև եղած տարբերությունների մասին

Undefined:

JavaScript-ում փոփոխականին default վերագրվում է undefined երբ այն հայտարարվում է, բայց սկզբնական արժեք չունի: կամ երբ մուտք ենք գործում օբյեկտի գոյություն չունեցող property: Օրինակ:

let x;
console.log(x); // Outputs: undefined

Վերոնշյալ օրինակում փոփոխականը հայտարարված է, բայց արժեք չի նշվում, ինչի արդյունքում այն ավտոմատ կերպով սահմանվում է undefined.

Null:

Մյուս կողմից, null-ը արժեք է, որը պետք է հստակորեն նշանակվի: Այն հաճախ օգտագործվում է օբյեկտի արժեքի միտումնավոր բացակայությունը ցույց տալու համար: Ի տարբերություն undefined-ի, որը default արժեք է փոփոխականների համար, null-ը ծրագրավորողի կողմից կանխամտածված ընտրություն է: Օրինակ:

let y = null;
console.log(y); // Outputs: null

Կարևոր տարբերություններից մեկy null-ի և undefined-ի այն է, թե ինչպես են նրանք վարվում համեմատության ժամանկա: null-ի տիպը օբյեկտ է, մինչդեռ undefined-ի տիպը հենց undefined է: Դրանք համեմատելիս դրանք արժեքով հավասար են, բայց ոչ տեսակով.

console.log(null == undefined); // Outputs: true
console.log(null === undefined); // Outputs: false

Առաջին համեմատությունը ( ==) ստուգում է արժեքների հավասարությունը, իսկ երկրորդը ( ===) ստուգում է և՛ արժեքը, և՛ տեսակը: Ընդհանուր առմամբ խորհուրդ է տրվում օգտագործել խիստ հավասարություն ( ===)՝ անսպասելի տիպի տարբերություններից խուսափելու համար:

Ամփոփելով, JavaScript-ում null-ի և undefined-ի միջև տարբերությունը հասկանալը կարևոր է մաքուր և առանց սխալների կոդ գրելու համար: Թեև երկուսն էլ ներկայացնում են արժեքի բացակայություն, undefined-ը սովորաբար default վիճակ է, որը ավտոմատ կերպով նշանակվում է լեզվի կողմից, մինչդեռ null-ը ծրագրավորողի կողմից արված ընտրություն է: