JavaScript Closure-ები: “ჯადოსნური” ძალა, რომელიც ყველა დეველოპერმა უნდა იცოდეს

🚀 ყველაფერი, რაც უნდა იცოდე Closure-ის შესახებ JavaScript-ში

Closure არის ერთ-ერთი ყველაზე ძლიერი და მნიშვნელოვანი კონცეფცია JavaScript-ში, რომელიც ხშირად გვხვდება ყოველდღიურ კოდში, თუმცა ზოგჯერ მისი მუშაობის პრინციპი გაუგებარია.

მაგრამ რას ნიშნავს Closure? მოდი, მარტივი მაგალითით გავიგოთ:

function outerFunction() {
  let count = 0;

  return function innerFunction() {
    count++;
    console.log(count);
  };
}

const counter = outerFunction();
counter(); // 1
counter(); // 2
counter(); // 3

💡 რა ხდება აქ?

• innerFunction ინახავს count ცვლადს, მიუხედავად იმისა, რომ outerFunction უკვე შესრულდა.
• ეს იმიტომ, რომ innerFunction იხსენებს outerFunction-ში არსებულ ცვლადებს, რაც Closure-ის არსია.

🔍 Closure და Lexical Scope

Closure-ის მექანიზმი ეფუძნება Lexical Scope-ს, რომელიც განსაზღვრავს, თუ რომელი ცვლადები იქნება ხელმისაწვდომი ფუნქციის შიგნით.

✅ Lexical Scope ძირითადი წესები:

• შიდა ფუნქცია ხედავს გარე ფუნქციის ცვლადებს.
• გარე ფუნქცია ვერ ხედავს შიდა ფუნქციის ცვლადებს.
• Closure ინახავს გარე ფუნქციის ცვლადებს მეხსიერებაში.

Lexical Scope 👇

function outer() {

  let x = 10;

  function inner () {

     console.log(x)
  }

  return inner
}

🚀 Lexical Scope და Closure ერთად ქმნიან ძლიერ მექანიზმს, რომელიც JS-ის ერთ-ერთი ფუნდამენტური კონცეფციაა!

Closure არის ფუნქცია, რომელსაც აქვს წვდომა გარე ფუნქციის ცვლადებზე, თუნდაც ეს გარე ფუნქცია უკვე შესრულებულია. Closure ავტომატურად იქმნება, როდესაც შიდა ფუნქცია იყენებს გარე Scope-ის ცვლადებს.

მარტივად რომ ვთქვათ, თუ ფუნქცია სხვა ფუნქციის შიგნით არის შექმნილი და იყენებს მისი გარე ფუნქციის ცვლადებს, ის Closure-ია. 🎯

function createGreeting(greeting) {
  // შიდა ფუნქცია, რომელიც იყენებს გარე ცვლადს `greeting`-ს
  return function(name) {
    console.log(`${greeting}, ${name}!`);
  };
}

// ვქმნით ფუნქციებს სხვადასხვა მისალმებით
const sayHello = createGreeting("გამარჯობა");
const sayHi = createGreeting("ჰაი");

// გამოვიძახოთ
sayHello("ნიკა"); // "გამარჯობა, ნიკა!"
sayHi("ანა");    // "ჰაი, ანა!"🔥 Closure-ის გამოყენება პრაქტიკაში

🔥 Closure-ის გამოყენების პრაქტიკული სცენარები

📌 1️⃣ მონაცემთა ინკაფსულაცია და Private ცვლადები

Closure-ის ერთ-ერთი ყველაზე გავრცელებული გამოყენება ცვლადების დამალვაა.

function createCounter() {
  let count = 0;
  return {
    increment: function () {
      count++;
      console.log(count);
    },
    reset: function () {
      count = 0;
      console.log("Counter reset");
    }
  };
}

const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
counter.reset(); // "Counter reset"

✅ count ცვლადი გარედან მიუწვდომელია, მაგრამ increment() და reset() ფუნქციებს მისი მართვა შეუძლიათ.

⚙ 2️⃣ ფუნქციების დინამიური გენერაცია (Function Factory)

Closure-ს შეუძლია შექმნას ფუნქციები, რომლებიც კონკრეტულ მნიშვნელობებს ინახავენ და სხვადასხვა პარამეტრებით მუშაობენ.

function createMultiplier(factor) {
  return function (number) {
    return number * factor;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5));  // 10
console.log(triple(5));  // 15

✅ double და triple ინახავენ factor-ს და შემდეგ იყენებენ მას გამრავლებისთვის.

⚛ 3️⃣ Closure React-ის Hooks-ებში (useEffect & setTimeout)

React-ში Closure ხშირად გვხვდება useEffect-სა და setTimeout-ში.

import { useState, useEffect } from "react";

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <p>Timer: {count}</p>;
}

✅ რა ხდება აქ?

• setInterval ფუნქცია ინახავს prevCount ცვლადს Closure-ის დახმარებით.
• prevCount მუდამ ინახავს ბოლო განახლებულ მნიშვნელობას, რაც React-ის რეკომენდებული პრაქტიკაა.

🛠️Closure დამატებითი მაგალითი, გაანალიზე კოდი, როგორ მოქმდებს Closure მოცემულ კოდზე: 👇

function createAdder(x) {
  return function(y) {
    return x + y;
  };
}

const addFive = createAdder(5);
console.log(addFive(10)); // 15
console.log(addFive(20)); // 25

👆განმარტება:

• createAdder(5) ქმნის Closure-ს, რომელიც "იხსენებს" x = 5-ს.
• ნებისმიერ ახალ y-ზე მას შეუძლია დამატოს 5.

🏁 შეჯამება

✅ Closure არის: ✔️ ფუნქცია, რომელიც ინარჩუნებს წვდომას გარე ფუნქციის ცვლადებზე, მიუხედავად იმისა, რომ ის ფუნქცია უკვე შესრულებულია. ✔️ გამოყენებული ინკაფსულაციისთვის, ფუნქციების გენერაციისთვის და React-ის Hooks-ებში. ✔️ მძლავრი მექანიზმი, რომელიც მეხსიერებაში ინახავს მონაცემებს და მოქნილ კოდს ქმნის.

💡 Closure-ის სწორად გამოყენება კოდის ორგანიზებულობას, უსაფრთხოებას და ეფექტიანობას ზრდის! 🚀