Arrow Functions - Syntax iyo Isticmaalka

Hordhac

JavaScript waxay leedahay habab badan oo lagu qeexo hawlo (functions), mid ka mid ahna waa arrow functions. Arrow functions, oo la soo bandhigay ES6 (ECMAScript 2015), waxay bixiyaan qaab sahlan iyo nadiif ah oo lagu abuuro hawlo. Maqaalkan, waxaan ku eegi doonaa syntax-ka arrow functions, faa’iidooyinkooda, iyo isticmaalka caadiga ah.

1. Waa Maxay Arrow Functions?

 Arrow Functions - Syntax iyo Isticmaalka

Arrow functions waa hab cusub oo lagu qeexo hawlo (functions) oo ka sahlan habka caadiga ah. Waxay si fiican u hagaajiyaan fursadaha waxayna ka saaraan baahida loo qabo in la isticmaalo function keyword. Tani waxay ka dhigeysaa koodhka mid nadiif ah oo akhris fudud.

2. Syntax-ka Arrow Functions

Syntax-ka arrow function waa mid fudud:

javascript

const functionName = (parameters) => {
  // Body of the function
};

Halkan waxaa ku qoran qodobo muhiim ah oo ku saabsan syntax-ka:

• Qeexitaanka: Waxaad u isticmaali kartaa const, let, ama var si aad u qeexdo arrow function.
• Parameters: Haddii function-kaaga uu leeyahay hal parameter, waxaad ka saari kartaa foorida:

  javascript
  
  const square = x => x * x;
  

• Body: Haddii body-ga function-kaaga uu yahay hal line oo kaliya, waxaad ka saari kartaa foorida {} iyo return:

  javascript
  
  const add = (a, b) => a + b;
  

3. Tusaalooyin Arrow Functions

a. Arrow Function leh Hal Parameter

javascript

const double = x => x * 2;
console.log(double(5)); // Waxay soo saartaa 10

b. Arrow Function leh Laba Parameter

javascript

const add = (a, b) => a + b;
console.log(add(3, 7)); // Waxay soo saartaa 10

c. Arrow Function leh Body ballaaran

Haddii body-ga function-kaaga uu ka kooban yahay dhowr line, waxaad u baahan doontaa inaad isticmaasho {} iyo return:

javascript

const calculateArea = (length, width) => {
  const area = length * width;
  return area;
};
console.log(calculateArea(5, 4)); // Waxay soo saartaa 20

4. Faa'iidooyinka Arrow Functions

• Sahlan: Syntax-koodu waa mid sahlan oo nadiif ah, taas oo ka dhigaysa in la akhriyo lana qoro.
• this Binding: Arrow functions ma abuurayaan context-kooda this, taas oo ka dhigan in this ay ka timaado context-ka waalidka (parent context). Tani waxay ka caawineysaa in laga fogaado dhibaatooyinka ku saabsan this marka la isticmaalayo callbacks.

Tusaale:

javascript

function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++; // `this` halkan waa midka Person
    console.log(this.age);
  }, 1000);
}

const person = new Person(); // Waxay daabacdaa da'da qofka 1 ilbiriqsi kasta

5. Isticmaalka Arrow Functions

Arrow functions waxaa loo isticmaali karaa meelo badan oo JavaScript ah:

• Callbacks: Arrow functions waxay si fiican ugu shaqeeyaan sida callbacks.

javascript

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Waxay soo saartaa [2, 4, 6, 8]

• Promesas: Waxaad u isticmaali kartaa arrow functions si aad u maareyso promises.

javascript

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

• Methods: In kasta oo arrow functions aysan lahayn this gaar ah, haddana waxaa lagu isticmaali karaa methods qaabeynta:

javascript

const obj = {
  value: 42,
  getValue: () => this.value // `this` ma xukumo obj
};

console.log(obj.getValue()); // Waxay soo saartaa undefined

Gunaanad

Arrow functions waa hab waxtar leh oo lagu qeexo hawlo JavaScript ah, gaar ahaan markay timaado codsiyada aan kaliya xilliga barnaamijka laga baahan yahay, laakiin sidoo kale marka laga hadlayo this binding. Waxay ka dhigayaan koodhka mid nadiif ah oo sahlan in la fahmo. Fahamka saxda ah ee arrow functions iyo isticmaalka habboon ayaa kaa caawin kara inaad qorto koodh nadiif ah oo wax ku ool ah.