Dev Ugur Coskun

Higher Order Functions

High Order Functions ile alakalı çektiğim videoya buradan ulaşabilirsiniz.

Kullanım nedenimiz: aynı logic'i birden fazla yerde kullanacaksak her birini tekrar tekrar yazmak yerine bir higher order function yazabiliriz. Bir fonksiyonun higher order function olabilmesi için aşağıdaki durumlardan en az birini içermesi gerekir

Parametre olarak bir fonksiyon alması
Return ettiği değerin bir fonksiyon olması

Parametre olarak bir fonksiyon alması durumu

Parametre olarak alınan fonksiyonları callback function olarak adlandırıyoruz. Javascripte bir değişken olarak fonksiyonları başka bir fonksiyona parametre olarak gönderebiliriz.

function greeting(callbackFn) {
  console.log("Merhabalar");
  callbackFn();
}

function studentsGreeting() {
  console.log("Iyi dersler arkadaslar");
}

function teacherGreeting() {
  console.log("Iyi dersler hocalar");
}

greeting(studentGreeting);

// Merhabalar
// Iyi dersler arkadaslar

greeting(studentGreeting);
// Merhabalar
// Iyi dersler hocalar

Bu harika örnekten sonra diğer kısma geçelim : )

Return ettigi degerin bir fonksiyon olmasi

const multiplierWithX = (x) => {
  return (y) => {
    return x * y;
  };
};

// Bu bize bir fonksiyon return eder
const multiplierWith4 = multiplierWithX(4);

// Daha sonra bu fonksiyona gereken yeni parametreyi vererek birkez daha execute ederiz.

const multiplier6With4 = multiplierWith4(6);
// console.log(multiplier6With4) 24

const multiplier8With4 = multiplierWith4(8);
// console.log(multiplier8With4) 32

2 case'de de görüldüğü gibi aslında kodda tekrar tekrar yazmak yerine higher order function yazarak daha minimalize edilmiş bir şekilde aynı logic'i gerçekleştiriyoruz. Şimdi array methodlarımıza gelelim.

map, filter, reducer

Neden bu array methodlarına geldik? Çünkü bunlar en çok kullanılan higher order functionlar. Gelin bunların nasıl çalıştığına yakından bakalım.

map

map bir array methodudur. Map bir callback function alır. Bu callback function bize parametre olarak her bir elemanını, indexini ve tüm arrayi verir. callback function'ın return ettiği değer yeni array'imize eleman olarak eklenir. Hadi bir ,örnek verelim.

const arr = [0, 1, 2, 3, 4, 5, 6];
const newArr = arr.map((element, index, array) => {
  return element * 2;
});

//daha kisa yazmak istersek
const newArr = arr.map((element) => element * 2);

console.log(newArr); // 0,2,4,6,8,10,12

filter

filter bir array metodudur. Filter bir callback function alir. Bu callback function bize parametre olarak her bir elemani, indexini ve tum arrayi verir. return ettigimiz deger true/false'tur. true ise eleman yeni array'e eklenir. false ise eklenmez yani array'den cikartilmis olur.

const arr = [0, 1, 2, 3, 4, 5, 6];
const newArr = arr.filter((element, index, array) => {
  return element > 2;
});

//daha kisa yazmak istersek
const newArr = arr.map((element) => element > 2);

console.log(newArr); // 3,4,5,6

reduce

reduce bir array metodudur. Digerleri gibi bu da parametre olarak callback function alir. Bu callback function bize previousValue, currentValue, index ve array'i parametre olarak alir. Reduce bize tek bir deger dondurur. Kullanimi icin asagida bir ornek vereyim.

const arr = [0, 1, 2, 3, 4, 5, 6];

const sumOfElements = arr.reduce((acc, element, index, array) => {
  return acc + element;
}, 0);

Şu şekilde bir datamız olsun.

const users = [
  {
    name: "ugur",
    surname: "coskun",
  },
  {
    name: "emre",
    surname: "coskun",
  },
  {
    name: "Joe",
    surname: "Doe",
  },
];

Gordugunuz gibi bu bir array object. Ben tum name'leri cekmek istiyorum. Hadi gelin birlikte Array.map kullanmadan bunun icin bir fonksiyon yazalim.

function addAgeAllElements(array) {
  let passed = [];

  for (let element of array) {
    const result = element.name;
    passed.push(result);
  }

  return passed;
}

Şimdide bütün surname'leri çekmek istiyorum.

function addFromAllElements(array) {
  let passed = [];

  for (let element of array) {
    const result = element.surname;
    passed.push(result);
  }

  return passed;
}

yukaridaki ufak bir kısım hariç geri kalan herşey aynı. Peki biz bu kod kalabalıklığını nasıl düşürebiliriz. Evet bildiniz. Higher Order Function kullanarak.

function customMap(array, mapFn) {
  let passed = [];

  for (let element of array) {
    const result = mapFn(element);
    passed.push(result);
  }

  return passed;
}

function getName(element) {
  return element.name;
}

function getSurname(element) {
  return element.surname;
}

const names = customMap(array, getName);
const surnames = customMap(array, getSurname);

Hatta arrow functionları kullanarak tanımlarsak

const customMap = (array, mapFn) => {
  let passed = [];

  for (let element of array) {
    const result = mapFn(element);
    passed.push(result);
  }

  return passed;
};

const getName = (element) => element.name;
const getSurname = (element) => element.surname;

const names = customMap(array, getName);
const surnames = customMap(array, getSurname);

Kendi map functionımızı yazdık. Peki bunu Array'in bir metodu olarak nasıl tanımlayabilirim?

Array.prototype.customMap = function (mapFn) {
  let passed = [];

  for (let element of this) {
    const result = mapFn(element);
    passed.push(result);
  }

  return passed;
};

// Example
users.customMap((element) => element.name);

Aynı durumu filter methodu icin yapalim.

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

// 5'ten büyük sayıları döndürelim

function customFilter(array) {
  let passed = [];
  for (let i = 0; i < array.length; i++) {
    if (array[i] > 5) {
      passed.push(element);
    }
  }
  return passed;
}

// 6 dan küçük sayıları döndürelim

function customFilter(array) {
  let passed = [];
  for (let i = 0; i < array.length; i++) {
    if (array[i] < 6) {
      passed.push(element);
    }
  }
  return passed;
}

Peki ben bu iki condition icin tekrar tekrar aynı kodu yazmak zorunda mıyım? Hayır. Hadi birlikte higher order function tanimlayalim.

function customFilter(array, callbackFn) {
  let passed = [];
  for (let i = 0; i < array.length; i++) {
    if (calbackFn(array[i])) {
      passed.push(element);
    }
  }
  return passed;
}

const checkMoreThan5 = (element) => element > 5;
const checkLessThan6 = (element) => element < 6;
const arrayofMoreThan5 = customFilter(arr, checkMoreThan5);
const arrayofLessThan6 = customFilter(arr, checkLessThan6);

Bildiğimiz filter metodu da bu şekilde tanımlanıyor. Map'te yaptığımız gibi bunu da array'ın bir methöduna dönüştürebiliriz.

Array.prototype.customFilter = function (filterFn) {
  let passed = [];
  for (let element of this) {
    if (filterFn(element)) {
      passed.push(element);
    }
  }
  return passed;
};

Note: callback fonksiyonlarimiza istedimiz degerleri parametre olarak gonderebiliriz

SON

Bu yazımızda high order function'lara değindik. Umarım yararlı olmuştur. Kendinize iyi bakın o7

Give me feedback: