"JavaScript"də destructuring

JavaScriptdə destructuring konseptini həm obyekt həm də array data strukturları ilə istifadə edə bilərik. Aşağıdakı nümunələrdə biz "destructuring" mövzusunun hər 2 data strukturlarundakı tətbiqi ilə tanış olacağıq.

Aşağıdakı kod bloku ilə tanış olaq.

const person = {
  firstName: "Həsən",
  surname: "Həsənli",
  age: 46,
  profession: "doctor",
};

const firstName = person.firstName;

Verilmiş kod blokunda biz "firstName" adlı bir dəyişən yaradırıq və bu dəyişənə "person" obyektinin "firstName" propertisinin içindəki dəyəri əlavə edirik.

Destructuring bizə eyni nəticəyə fərqli (əksər halda səliqəli, az kodla və daha başa düşülən) formada nail olmağımıza imkan verir. Bəli, burdan o nəticə çıxır ki, destructuring sadəcə bir alternativdir və biz onu istifadə etmədən də öz applikasıyalarımızı kodlaya bilərik.

const person = {
  firstName: "Həsən",
  surname: "Həsənli",
  age: 46,
  profession: "doctor",
};

const { firstName } = person;

Yuxarıda verilmiş kod bloku ilə də eyni nəticəni almış olduq. Yəni firstName adlı bir dəyişən yaratdıq və dəyişənə "Həsən" string dəyərinə mənimsətdik.

Burda vacib olan bir neçə məsələni qeyd etmək istəyirəm.

• "destructure" edərkən yaratmaq istədiyimiz dəyişən adı (yuxarıdakı kod nümunəsində "firstName" obyektin götürmək istədiyimiz dəyərini özündə saxlayan property adı ilə eynilik təşkil etməlidir. ) Şəkil 1
• Sol tərəfdə "destructure" etmək istədimiz dəyişənin saxladığı dəyərdən aslı olaraq müvafiq işarəni qoyuruq, yuxarıdakı kod nümunəsində biz obyekt "destructure" etmək istədiyimiz üçün dalğalı mötərizə işarəsini istifadə etmişik.

Aşağıdakı kod nümunəsi bir neçə dəyişənin sadəcə 1 sətirdə yazılması göstərilmişdir. Yaranmış dəyişənlərin hansı dəyərin mənimsədilmiş olması kod blokunun sonunda olan "console.log" fünkisyalarının qarşısında verilib.

const person = {
  firstName: "Həsən",
  surname: "Həsənli",
  age: 46,
  profession: "doctor",
};

const { firstName, surname, age, profession } = person;

console.log(firstName); // "Həsən"
console.log(surname); // "Həsənli"
console.log(age); // 46
console.log(profession); // "doctor"

Fərqli dəyişən adlı ilə "destructuring"

Bəzən "destructure" etmək istədiyimiz blokda, "destructure" edən zaman istifadə etməli olduğunuz obyekt property adı artıq istifadə olunmuş olur. Bu zaman biz sintaksis xətası alacağıq.

const firstName = "Murad";

const person = {
  firstName: "Həsən",
  surname: "Həsənli",
  age: 46,
  profession: "doctor",
};

const { firstName } = person; // Cannot redeclare block-scoped variable 'firstName'!!!
// 2 eyni adlı dəyişlən bir kod blokunda (daha sonra bunun detalları ilə tanış olacağıq) ola bilməz.

Xoşbəxtlikdən bir yolumuz var. Biz fərqli adla "destructure" etmək üçün olan müvafiq sintaksisi istifadə edə bilərik. "firstName: personFirstName" bizim "person" obyektinin "firstName" propertisindəki dəyərini "personFirstName" adlanan dəyişən yaradıb, dəyəri o dəyişənə mənimsətmək istədiyimizi bildirir. Başqa sözlə "firstName" dəyişəni yaranmır, biz onu sadəcə "person" obyektindən müvafiq dəyəri götürmək istədiyimizi bildirmək üçün istifadə edirik.

const firstName = "Murad";

const person = {
  firstName: "Həsən",
  surname: "Həsənli",
  age: 46,
  profession: "doctor",
};

const { firstName: personFirstName } = person;
console.log(personFirstName); // "Həsən"
console.log(firstName); // "Murad"

"destructuring" zamanı default dəyəri müəyyən etmək

"Destructuring" etdiyimiz zaman bəzən "destructuring" etdiyimiz obyektdə bizim əldə etdiyimiz propety-nin olub olmamasını bilmirik. Bu tip hallarda əgər "destructuring" etdiyimiz obyektdə götürmək istədiyimiz property-nin dəyəri yoxdursa, bu zaman yeni yaranan dəyişən "undefined" dəyərinə mənimsədilmiş olacaq.

const person = {
  firstName: "Həsən",
  surname: "Həsənli",
  age: 46,
};

const { firstName, profession } = person;
console.log(firstName); // "Həsən"
console.log(profession); // undefined

Bu tip hallarda biz "undefined" dəyərinin əvəzinə özümüzün olmama halına qarşı "default" dəyər qeyd edə bilərik. Hansı ki, əgər "destructuring" etdiyimiz obyektdə müvafiq property olarsa, bu zaman o property-inin dəyişənə dəyəri mənimsədiləcək, olmasa isə bizim "default" olaraq müəyyən etdiyimiz dəyər. Başqa sözlə bizim qeyd etdiyimiz "default" dəyər sadəcə property tapılmayan hallarda dəyişənə mənimsədilir. Aşağıdakı nümunələrə baxaq.

const person = {
  firstName: "Həsən",
  surname: "Həsənli",
  age: 46,
};

const { firstName, profession = "no data" } = person;
console.log(profession); // "no data"

Bu nümunədə "profession" propertisi "person" obyektində qeyd olmadığı üçün, profession dəyişəninə "no data" dəyəri mənimsədilib.

const person = {
  firstName: "Həsən",
  surname: "Həsənli",
  age: 46,
  profession: "doctor",
};

const { firstName, profession = "no data" } = person;
console.log(profession); // "doctor"

Burda isə "no data" "default" dəyəri bir dəyişikliyə səbəb olmayıb. Çünki "person" obyektində "profession" propertisinin müvafiq dəyəri var.

Yuxarıda tanış olduğumuz "default" dəyər əlavə etmək və dəyişən adını dəyişmək üçün olan sintaksis birlikdə də istifadə oluna bilər. Aşağıdakı nümunədə bununla tanış olaq.

const person = {
  firstName: "Həsən",
  surname: "Həsənli",
  age: 46,
};

const {
  firstName: firstNameOfPerson = "no data",
  profession: professionOfPerson = "no data",
} = person;

console.log(firstNameOfPerson); // "Həsən"
console.log(professionOfPerson); // "no data"

Parametr "destructuring"

JavaScript-də fünksiyalarda müxtəlif səbəblərdən biz obyekt və ya array dəyərlərini də arqument kimi ötürmək istəyə bilərik. Bu zaman fünksiyanın paramert-lərini bəyan etdiyimiz bölməsində məqalədə danışdığımız "destructuring" qaydalarının hər birinini tətbiq edə bilərik.

const person = {
  firstName: "Həsən",
  surname: "Həsənli",
  age: 46,
};

function logFullname({ firstName, surname = "no surname" }) {
  console.log(firstName + surname);
}

logFullname(person)

Əvvələ qayıt:

Hoisting nədir?

Növbəti:

Javascriptdə let, const, var dəyişənlərinin arasındakı fərq nədir?