Inversion Pattern - როგორ დავწეროთ კითხვადი კოდი?

დღევადელ ბლოგში ვისაუბრებ JavaScript-ში ეგრედ წოდებულ inversion pattern-ზე რომელიც გვეხმარება ჩვენი კოდი იყოს მეტად წადითხვადი და ნაკლებად ჩახლართული.

მოცემული პატერნი საშუალებას გვაძლევს თავი ავარიდოთ ე.წ. deep nesting-ს, რომელიც ბევრად რთულია წასაკითხად და გასააზრებლად, ვიდრე სწორხაზოვანი კოდი.

რა არის deep nested კოდი?

თუ ოდესმე შეგხვედრიათ კოდი, სადაც if-ის ბლოკები ერთმანეთშია ჩაშენებული და თვალის დევნება გიჭირთ, სწორედ ესაა deep nested კოდი.

ჩახლართული (nested) კოდი ჰგავს ლაბირინთს — რაც მეტი დონეა, მით უფრო რთულია მისი გაგება. მაგალითად, წარმოიდგინეთ, რომ გვაქვს ფუნქცია, რომელიც ამუშავებს შეკვეთას:

მაგალითი:

function processOrder(order) {
  if (order) {
    if (order.items) {
      if (order.items.length > 0) {
        console.log("Order contains", order.items.length, "items");
      } else {
        console.log("No items in the order");
      }
    } else {
      console.log("Order has no items property");
    }
  } else {
    console.log("No order provided");
  }
}

ეს კოდი შესანიშნავად მუშაობს, მაგრამ ნახეთ, რამდენად ღრმაა ჩაშენებული ლოგიკა. თითოეული if ამატებს ახალ ბლოკს, რაც ართულებს კითხვას.

სწორედ მსგავს პრობლემას აგვარებს inversion pattern

რა არის inversion pattern?

როგორც თავად სიტყვები გვეუბნება მოცმული მიდგომით ჯერ ვამოწმებთ იმას, თუ რა შეიძლება იყოს არასწორი, და თუ ასეა დავასრულოთ ფუნქცია return-ის დახმარებით, რაც ნიშნავს იმას, რომ return-ის შემდეგ ჩაწერილი კოდი ფუნქციაში უბრალოდ არ შესრულდება.

მსგავსი მიდგომით ჩვენი კოდი გახდება მეტად სწორხაზოვანი და წასაკითხადაც შედარებით მარტივია.

მაგალითი:

function processOrder(order) {
  if (!order) {
    console.log("No order provided");
    return;
  }
  if (!order.items) {
    console.log("Order has no items property");
    return;
  }
  if (order.items.length === 0) {
    console.log("No items in the order");
    return;
  }

  console.log("Order contains", order.items.length, "items");
}

თუ მოცემულ მაგალითს გავიაზრებთ შეგვიძლია გამოვყოთ სამი პუნქტი თუ რა უპირატესობა აქვს მსგავს მიდგომას

1. მარტივი სტრუქტურა: აღარ გვჭირდება deep nesting, ყველაფერი არის წრფივად.
2. ფუნქციის ადრეული შეწყვეტა: თუ რაიმე არასწორია ფუნქცია არ აგრძელებს მუშაობას.
3. მარტივი კითხვადობა: ერთი შეხედვით მარტივად ჩანს, თუ რა ხდება ყოველ ბიჯზე.

ასევე მეტი თვალსაჩინოებისთვის შეგვიძლია მოვიყვანოთ კიდევ ერთი inversion pattern-ის მაგალითი.

მაგალითი:

function processUser(user) {
  if (!user) {
    console.log("No user provided");
    return;
  }
  if (user.age < 18) {
    console.log("User is underage");
    return;
  }
  if (!user.accountActive) {
    console.log("Account is inactive");
    return;
  }

  console.log("User is eligible:", user.name);
}

მოცემულ მაგალითშიც ძალიან მარტივად ჩანს თუ რას აკეთებს ფუნქცია თითოეულ ბიჯზე, თუ არცერთი if ბლოკი არ შესრულდა უბრალოდ დაიბეჭდება "User is eligible:"  user.name.

როდის გამოვიყენოთ inversion pattern?

მოცემული პატერნის გამოყენების რამდენიმე წესი არსებობს.

• მონაცემების ვალიდაცია: როდესაც ვამოწმებთ null ან undefined-ს
• პირობითი ოპერატორების ჯაჭვი: if else-ის nested თანმიმდევრობები
• ასინქრონული კოდი: გამოვიყენოთ Promise-ებთან და CallBack ფუნქციებთან

დასკვნა

inversion pattern არის მარტივი, მაგრამ ძლიერი ხერხი, რომელიც თქვენს JavaScript კოდს უფრო გასაგებს ხდის. ის გვასწავლის, რომ ჯერ "არა"-ს ვუპასუხოთ და მხოლოდ შემდეგ გადავიდეთ "დიახ"-ზე. თუ გსურთ, სცადეთ ეს მიდგომა თქვენს პროექტში — გპირდებით, თქვენი კოდი გახდება უფრო სუფთა და მოწესრიგებული