JavaScript kártyák mintái az alkalmazásunkból

Töltse le alkalmazásunkat az App Store-ból vagy a Google Play-ből, hogy több ingyenes tanulókártyához jusson, vagy iratkozzon fel az összes tanulókártya eléréséhez.

Mi a lexikális hatókör a JavaScriptben?

A JavaScriptban a lexiális hatókör elve azt jelenti, hogy egy változó láthatósági tartományát annak helye határozza meg a kódban. Ez azt jelenti, hogy a változók elérhetők a blokkon belül, ahol definiálták őket, valamint minden beágyazott blokkban. Ez lehetővé teszi zárványok létrehozását és a változókhoz való hozzáférés szabályozását. A lexiális hatókör alkalmazásának példája a JavaScript kódban:

function külsőFunkció() {
  let külsőVáltozó = `Kint vagyok!`;

  function belsőFunkció() {
    console.log(külsőVáltozó); // Hozzáférhet a 'külsőVáltozó'-hoz
  }

  belsőFunkció();
}
külsőFunkció(); // Megjeleníti, hogy `Kint vagyok!`

A lexiális hatókör lehetővé teszi egy belső függvény számára, hogy hozzáférjen a külső függvényben definiált változókhoz, még a külső függvény befejezése után is. Ez kulcsfontosságú elem a JavaScriptben a zárványok létrehozásában, lehetővé téve a rugalmasabb állapotkezelést az alkalmazásokban.

Mi az emelés (hoisting)?

A hoisting egy olyan mechanizmus a JavaScript nyelvekben, ahol a változók és függvények a hatáskörük tetejére kerülnek a kód végrehajtása előtt. Gyakorlatban ez azt jelenti, hogy a függvényeket vagy változókat használhatjuk, mielőtt ténylegesen deklarálásra kerülnek.

Azonban fel kell hívni a figyelmet arra, hogy a hoisting kissé eltérően működik a változók és függvények esetében.

A var kulcsszóval deklarált változók esetében csak a deklarálás kerül hoistingálásra, nem az inicializáció. A deklaráció előtt inicializált változókat undefined -ként adja vissza.

A változók hoisting kódjának példája:

console.log(myVar); // undefined
var myVar = 5;
console.log(myVar); // 5

A függvények esetében a hoisting a függvény deklarálását és definícióját is a tetejére viszi, ami lehetővé teszi a függvény használatát még a deklarálása előtt.

A függvények hoisting kódjának példája:

console.log(myFunction()); // "Hello World"

function myFunction() {
  return "Hello World";
}

A hoisting nem fordul elő az let és const kulcsszóval deklarált változóknál.

Mi az arrow function és mik az előnyei?

A nyíl függvény, más néven nyíl függvény, egy olyan függvénytípus, amelyet az ECMAScript 6-ban (ES6) vezettek be. Nyíl függvényeknek nevezik őket, mert egy speciális szintaxist használnak egy nyíllal ( => ) a függvény definiálására.

Összehasonlításképpen, egy hagyományos függvény így nézhet ki:

function sum(a, b) {
  return a + b;
}

Egyenértékű nyíl függvényként pedig így:

const sum = (a, b) => a + b;

A nyíl függvény előnye, hogy nem hoz létre saját végrehajtási kontextust (bindelés a this-hez), ami gyakran hibaforrás a JavaScriptben. A nyíl függvényekben a this a környező kontextusból öröklődik. További előnye a szintaxis tömörsége, különösen akkor hasznos, amikor a függvényeket más függvények argumentumaként használják, például magasabb rendű függvényekben.

Másrészről, mivel nincs saját this-ük, a nyíl függvények nem alkalmasak konstruktori (kreatív) objektumok definiálására vagy módszerek létrehozására prototípus objektumokban.

Mi az a Promise objektum és hogyan használható?

A JavaScriptban a Promise objektumot aszinkron műveletek kezelésére használják. A Promise egy értéket képvisel, amely nem biztos, hogy rendelkezésre áll amikor a Promise létrejön, de a jövőben rendelkezésre állhat vagy soha.

Egy Promise objektum az alábbi három állapot közül az egyikben lehet:
1. Folyamatban - a művelet még folyamatban van, nincs befejezve sem sikeresen, sem hiba nélkül.
2. Teljesült - a művelet sikeresen befejeződött, a Promise visszaad egy értéket.
3. Elutasítva - a művelet hibával fejeződött be, a Promise visszaadja az hiba okát.

Egy teljesült vagy elutasított Promise-ot "lezárt"-nak tekintünk, és állapota soha nem változik.

Promise objektum létrehozása:

const promise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve('A művelet sikeres.');
  } else {
    reject('A művelet sikertelen.');
  }
});

Promise objektum használata:

promise
  .then(result => {
    console.log(result); // Kiírja: 'A művelet sikeres.'
  })
  .catch(error => {
    console.log(error);
  });

A .then() metódus akkor hajtódik végre, ha a Promise teljesült, és .catch() ha elutasították. Mindkét esetben a művelet eredménye vagy a Promise elutasításának oka kerül átadásra argumentumként.

Mi az a callback?

Egy visszahívás, amelyet visszahívó funkcióként is ismerünk, olyan funkció, amelyet argumentumként adunk át egy másik funkciónak, majd annak befejezése után végrehajtjuk (visszahívunk). A visszahívó funkciókat gyakran használják JavaScriptben, különösen aszinkron műveletekben, mint az AJAX kérések vagy az eseménykezelés.

A visszahívó funkciók általában megkapják egy adott művelet eredményeit argumentumként, így azok feldolgozására vagy elemzésére használhatók.

Az ilyen funkció gyakorlati használata a következőképpen nézhet ki:

function executeAfterTimeout(callback, timeout) {
  setTimeout(() => {
    console.log('Time passed!');
    callback();
  }, timeout);
}

executeAfterTimeout(() => {
  console.log('This is a callback!');
}, 2000);

Ebben az esetben az `executeAfterTimeout` funkció egy `callback` funkciót kap paraméterként, amelyet egy meghatározott idő elteltével hajtanak végre. A visszahívó funkciók rendkívül hasznosak az aszinkron vezérlési folyamat kezelésében a JavaScriptben.

Mi az a nullish coalescing operátor és hogyan működik?

A Nullish Coalescing Operátor (??) egy logikai operátor, amely az operáció jobb oldalát adja vissza, amikor a bal oldal null vagy undefined. Más szavakkal, ha egy változó üres, a nullish coalescing operátor a definiált értéket adja vissza eredményül.

Az alapjelölés:

let érték = null ?? 'alapértelmezett érték';

Ebben az esetben, mivel a bal oldal (érték) értéke null, az eredmény az 'alapértelmezett érték'. Továbbá, ez az operátor különbözik az OR operátortól (||), mivel az OR függvény az operáció jobb oldalát adja vissza, amikor a bal oldal hamis (hamis, 0, '', null, undefined, NaN), míg a nullish coalescing operátor csak akkor adja vissza a jobb oldalt, ha a bal oldal null vagy undefined.

Példa az OR-ra:

let érték1 = 0 || 'alapértelmezett';
console.log(érték1); // kimenet: 'alapértelmezett', mert 0 hamis érték

Példa a nullish coalescing-re:

let érték2 = 0 ?? 'alapértelmezett';
console.log(érték2); // kimenet: 0, mert 0 nem null vagy undefined

Tehát, ellentétben az OR-rel, a nullish coalescing operátor nem tekinti az 0, '' és NaN értékeket "üres" értékeknek.

Mi az a Symbol és mikor kell használni?

A JavaScript-ban a Symbol egy egyedi és változatlan adattípus, amelyet gyakran az objektumok egyedi tulajdonságainak azonosítására használnak.

Symbol-t úgy hozhatunk létre, hogy meghívjuk a Symbol() konstruktort, amely minden meghíváskor egyedi szimbólumot hoz létre. Akkor is, ha ugyanazzal az argumentummal hívjuk meg a Symbol() konstruktort, minden létrehozott szimbólum más lesz.

const symbol1 = Symbol('mySymbol');
const symbol2 = Symbol('mySymbol');
console.log(symbol1 === symbol2); // false-t ad vissza

A Symbol-t gyakran használják objektumok (egyedi) tulajdonságainak meghatározására, különösen akkor, amikor ezt a tulajdonságot el szeretnénk rejteni vagy priváttá tenni. Ez a tulajdonságokra is vonatkozik, amelyeket a for...in vagy for...of használatával iterálunk az objektumokon, és amelyeket az Object.keys() metódus nem ad vissza. Ráadásul a szimbólumok lehetővé teszik a "pszichó" privát tulajdonságok létrehozását.

let obj = {};
let privateProperty = Symbol('private');

obj[privateProperty] = 'Ez privát';

console.log(obj[privateProperty]); // 'Ez privát'
console.log(Object.keys(obj)); // []

Nincs konkrét szabály arra vonatkozóan, hogy mikor kell használni a Symbol-t. Tipikusan akkor használják, amikor egy egyedi tulajdonságot szeretnénk létrehozni egy objektumon, amelyet nem lehet könnyen látni vagy megváltoztatni, vagy olyan módszereket szeretnénk meghatározni, amelyek alacsony szinten befolyásolják az objektumok viselkedését.

Mik azok a WeakMap és WeakSet?

A WeakMap és a WeakSet speciális verziói a JavaScript Map és Set objektumoknak, amelyek nem akadályozzák meg az automatikus memóriafelszabadítást a Garbage Collector által.

A WeakMap egy kulcs-érték párokat tartalmazó gyűjtemény, ahol a kulcsoknak objektumoknak kell lenniük, és az értékek bármi lehetnek. A Map és a WeakMap közötti fő különbség, hogy a WeakMap kulcsai "gyengén", vagyis, ha nincsenek más hivatkozások a kulcsobjektumra, akkor azt a Garbage Collector elszállítja, és a bejegyzése automatikusan eltávolításra kerül a WeakMap-ból.

Itt van egy példa a WeakMap használatára:

let john = { name: "John" };

let weakMap = new WeakMap();
weakMap.set(john, "...");

john = null; // felülírjuk a hivatkozást

// john eltávolításra kerül a memóriából!

A WeakSet hasonló ahhoz, amit a WeakMap a Maphez képest. Ez egy objektumkészlet, de nem akadályozza meg a garbage collection-t, ha az objektum sehol máshol nem látható. Hiányoznak a tipikus Set metódusok, mint a `size` és a `clear`, és az `add` metódus csak objektumokat vesz.

A WeakSet használatának példája:

let john = { name: "John" };

let weakSet = new WeakSet();
weakSet.add(john);

john = null; // felülírjuk a hivatkozást

// john eltávolításra kerül a memóriából!

Mind a WeakMap, mind a WeakSet főként olyan helyzetekben használatos, amikor további információkat szeretnénk tárolni az objektumokról, amelyeket akkor kell eltávolítani, amikor magát az objektumot is eltávolítják.

JavaScript kártyák