Forem: Eray Kaya

Leveraging Pre-commit Hooks with Husky and Lint-Staged

Eray Kaya — Wed, 12 Jul 2023 07:33:26 +0000

There exists a debate over the necessity of pre-push or pre-commit hooks. Critics argue that developers shouldn't be limited in their ability to push code to the codebase and that code checks should instead be executed during the PR review process. However, pre-commit hooks, such as those with lint-staged, can provide substantial benefits, particularly for new teams starting on a project. Before diving into the of Github actions or anything like that, these hooks offer a straightforward way to ensure consistent code quality.

To illustrate this, let's begin by installing Husky in our project:

yarn add husky -D

Next, we need to add a prepare script to our package.json file. This script allows every team member to run it once, setting up the necessary hooks for their local development environment. The prepare script should look like this:

"prepare": "husky install"

After adding the script, run yarn prepare to set up Husky. Subsequently, create a pre-commit hook with the command npx husky add .husky/pre-commit "yarn lint". This command creates a hook that runs every time a commit is made, although we'll modify it shortly to run only on modified files.

Once the above steps are completed, you should see a .husky directory in your project root.

Next, let's introduce lint-staged:

yarn add lint-staged -D

Lint-staged is a tool that allows you to run scripts on files staged in git. We use it here to run our linter only on files that have been changed in the commit.

To configure lint-staged, we add the following to our package.json file:

"lint-staged": {
  "*.{js,jsx,ts,tsx}": [
    "eslint",
    "prettier --write"
  ]
},

Then, add a script to the package.json file that will call lint-staged:

"pre-commit": "lint-staged"

Finally, modify the .husky/pre-commit file to use yarn pre-commit instead of yarn lint. With this change, the linter will only run on files modified in the commit.

In conclusion, pre-commit hooks using Husky and lint-staged offer an efficient way to maintain code quality across a team. These tools ensure that only consistent, well-formatted code is committed to the codebase, thereby simplifying the PR review process.

How to check if a tab is active in React

Eray Kaya — Thu, 06 Jul 2023 17:07:10 +0000

Before diving into the specifics of how to detect active tab engagement, I'd like to share a real-world web3 scenario where this was a use case. Imagine a user toggling between two different tabs, each operating on the same wallet but different networks. For instance, one decentralized finance (DeFi) application could be running on Arbitrum while the other functions on Ethereum. In such cases, a casual alert indicating a network mismatch from MetaMask could lead to users prematurely closing your website. Therefore, it's crucial to discern whether the user is actively viewing your tab before deploying any alert regarding network discrepancies.

To address this challenge, we turn our attention to one particularly handy DOM event: visibilitychange. This event allows us to detect changes in the visibility state of the tab, i.e., whether it's in focus or in the background.

So, how do we implement this in a React application?

It is as straightforward as it gets. To ensure the user is actively viewing the tab when an alert is initiated, you can listen to the visibilitychange event and check the document.visibilityState property.

The following demonstrates a simplified example:

import { useCallback, useEffect, useState } from 'react';

const useIsTabActive = () => {
  const [isTabVisible, setIsTabVisible] = useState(true);

  const handleVisibilityChange = useCallback(() => {
    setIsTabVisible(document.visibilityState === 'visible');
  }, []);

  useEffect(() => {
    document.addEventListener('visibilitychange', handleVisibilityChange);
    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, []);

  return isTabVisible;
};

export default useIsTabActive;

By incorporating this simple check into your web3 applications, you can significantly improve your user experience. Not only does it prevent unnecessary alerts when a user is not actively engaging with your application, but it also respects their attention and focus, leading to a more professional and user-centric application.

Stay tuned for further discussions on improving user experience in web3 applications in upcoming posts.

Type-Safe Querying of Ethereum Contract Data with React-Query and TypeChain

Eray Kaya — Tue, 04 Jul 2023 10:01:42 +0000

Indeed, moving forward from our previous discussion on how to generate types from smart contract abi, we can now dive deeper into transforming these type-safe functions into type-safe queries and mutations using react-query. In this segment, I'll be focusing on the process of reading contract data with react-query queries.

First and foremost, let's understand that to interact with a smart contract, a provider is necessary. This could be a public provider, a private provider utilizing API keys from Alchemy or Infura, or simply a user's wallet provider. For the purpose of this post, we will use a public RPC provider. However, for live projects, I would strongly recommend opting for Alchemy or Infura providers.

Moreover, it's essential to consider that depending solely on a user's wallet provider for reading data is not an ideal strategy. The primary reason being that users need to be connected to view the data. Secondly, the provider they're using remains uncertain. Hence, we aim to implement a type-safe data fetching method from the contract as smoothly as an ordinary API.

Let's take an example to better understand this process - Fetching Ethereum USD price from Chainlink's Price Converter Contract. After we generate our types with typechain, let's start to write our read hook.

First we start with getting the contract instance, for the sake of focusing using react-query for reading smart contract I am writing all these functions not generic so you can convert it to generic if you need.

const getContractInstance = () => {

// address of chainlink contract: https://etherscan.io/address/0x5f4eC3Df9cbd43714FE2740f5E3616155c5b8419#readContract

  const address = "0x5f4eC3Df9cbd43714FE2740f5E3616155c5b8419";
// public provider to read data, I recomment to use either Alchemy or Infura provider for production: 
  const provider = new JsonRpcProvider("https://eth.llamarpc.com");
  const contract = EthUsdFeedContract__factory.connect(address, provider);
  return contract;
};

Now let's write our fetch(read) function:

export const getPriceConversion = async () => {
  const contract = getContractInstance();
  const price = await contract.latestAnswer();
  const decimals = await contract.decimals();
  const priceInEtherUnit = formatUnits(price, decimals);
  return priceInEtherUnit;
};

Finally we can create our typesafe hook:

type EthToUsd = string;

export const useEthUsdFeed = <TData = EthToUsd, TError = unknown>(
  options?: UseQueryOptions<EthToUsd, TError, TData>
) => {
  return useQuery<EthToUsd, TError, TData>(
    ["cryptoToUsd"],
    async () => await getPriceConversion(),
    options
  );
};

Coding Smart: Using TypeChain for Type Generation from Smart Contract ABI

Eray Kaya — Thu, 29 Jun 2023 11:39:20 +0000

Utilizing the right tools is crucial to establishing a typesafe development environment when navigating blockchain data. One such instrument is TypeChain, which streamlines this process by converting ABI (Application Binary Interface) files into TypeScript types. This straightforward conversion allows developers to construct fully typesafe queries or mutations with react-query, leading to an enhanced development experience.

Let's delve into how this process works.

First, we need to install the necessary packages: typechain and @typechain/ethers-v5.

Installation is straightforward and can be executed by running the following commands:

yarn add typechain @typechain/ethers-v5 -D

Next, it's recommended to house your ABIs in a dedicated folder for better organization. For example, you could place them in src/abis. Let's also assume that the output directory is types/abis.

To facilitate this process, an npm script should be written as follows to package.json:

"typechain": "typechain --target ethers-v5 --out-dir ./types/config/abis './src/config/abis/*.json'"

The script will utilize TypeChain to generate TypeScript typings for Ethereum smart contracts. It targets ethers-v5 and specifies an output directory for the typings.

Running this script is as simple as executing yarn typechain in your terminal.

In conclusion, by adopting TypeChain and integrating it into your development environment, you can easily interact with your contract and elevate the overall developer experience. The ability to create type-safe queries or mutations, combined with an organized, dedicated location for your ABIs, paves the way for a more streamlined and efficient coding experience.

Optimizing Zustand: How to Prevent Unnecessary Re-renders in Your React App

Eray Kaya — Wed, 05 Apr 2023 17:22:50 +0000

The problem: When you create a store in Zustand and use it across components, any change in the store's state will cause the component to rerender, even if the component is not related to that particular state. For example, if you have a store like the one below and call useBearStore in your component, whenever the cats state is updated, your bear component will also rerender.

import create, { SetState } from "zustand";

interface BearStore {
  bears: number;
  cats: number;
  incrementCats: () => void;
  increase: (by: number) => void;
  increment: () => void;
}

export const bearStore = (set: SetState<BearStore>) => ({
  bears: 0,
  cats: 0,
  increase: (by: number) => {
    set((state) => ({ bears: state.bears + by }));
  },
  increment: () => {
    set((state) => ({ bears: state.bears += 1 }));
  },
  incrementCats: () => {
    set((state) => ({ cats: state.cats += 1 }));
  }
});

export const useBearStore = create<BearStore>(bearStore);

For example if you have a store like this and call useBearStore in your component whenever cats state updated your bear component will rerender also.

The Solution: To prevent this issue, we can create a simple utility function using shallow in Zustand.

import { StoreApi, UseBoundStore } from "zustand";
import shallow from "zustand/shallow";

type GenericState = Record<string, any>;

export const createStoreWithSelectors = <T extends GenericState>(
  store: UseBoundStore<StoreApi<T>>,
): (<K extends keyof T>(keys: K[]) => Pick<T, K>) => {
  const useStore: <K extends keyof T>(keys: K[]) => Pick<T, K> = <K extends keyof T>(keys: K[]) => {

    return store((state) => {
      const x = keys.reduce((acc, cur) => {
        acc[cur] = state[cur];
        return acc;
      }, {} as T);

      return x as Pick<T, K>;
    }, shallow);
  };

  return useStore;
};

Then we can update our initial store to use this utility function:

const bearStore = create<BearStore>(bearStore);

export const useBearStore= createStoreWithSelectors(bearStore);

Now we can use it in components like this:

const { bears, increment } = useBearStore(["bears", "increment"]);

With this change, the component won't rerender even if the cats state is updated.

How to use your github ssh keys for different accounts

Eray Kaya — Sun, 12 Mar 2023 10:40:09 +0000

When you have couple different github accounts and different permissions for each of them it can get tricky to manage your projects. I found the best way is to use ssh and create a ssh config file to manage which key is for which github account.

Create a ssh key from your terminal:

ssh-keygen -t rsa -b 4096 -C "foo@bar.com"

Copy and paste the outcome to :
github -> settings -> SSH and GPG keys -> New SSH key

Now you should have .ssh folder, in there manage your keys like for example if you have 2 different keys you should have 4 folders like: work-ssh, work-ssh.pub, personal-ssh, personal-ssh.pub

Create a file called config without any extension to name and add this config:

Host *
IgnoreUnknown UseKeychain

// Personal GitHub account

Host github.com
HostName github.com
User git
AddKeysToAgent yes
UseKeychain yes
IdentityFile ~/.ssh/personal-ssh

// Work GitHub account

Host github.com-work
HostName github.com
User git
AddKeysToAgent yes
UseKeychain yes
IdentityFile ~/.ssh/work-ssh

To use work ssh above you need to clone the repo like this:

git@github.com-work:[Project Group]/[Project Name].git

To use personal ssh above you need to clone the repo like a regular repo:

git@github.com:[Project Group]/[Project Name].git

Also keep in your mind that author will be the current global user if you don't change your global git user you can commit with wrong account even though you don't have access on github. So, to make it simple here is how I created my alias to change global git config in powershell:

Function GitCurrentUser { 
git config user.name; 
git config user.email 
}
Set-Alias -Name gcur -Value GitCurrentUser

Function SwitchToPersonal { 
git config --global user.name "[Your Gh user name"; 
git config --global user.email "[Your Gh Email]"; 
git config user.name; 
git config user.email 
}
Set-Alias -Name gpersonal -Value SwitchToPersonal

Feel free to comment if you have questions!

Asynchronous or not?

Eray Kaya — Wed, 10 Mar 2021 20:19:57 +0000

We know that javascript is single threaded and synchronous language so, how is it possible to make asynchronous calls in javascript?

Before we get into details let's clarify some definitions:

Single Threaded: One command at a time.

Synchronous: One at a time in order.

Asynchronous means, more than one at a time. Not in javascript but in some other programming languages like GO, with goroutine, you can execute a function which executes another function and another function which all of them executes at the same time but, javascript is synchronous and it executes code, "one line at a time, in order".

In javascript we have click events or fetch api where you can define a callback function which will execute right after a certain event.

Here is the thing: Even though javascript is synchronous and single threaded, browsers are not. Browsers are not just javascript interpreters. They have rendering engine, networking component and many more. Javascript engine itself is synchronous but for example when we add an event listener to a button other parts of the browser are looking for, if the condition to fire that event is fulfilled.

Let's take a look at this example:

function waitThreeSeconds() {
  var ms = 3000 + new Date().getTime();
  while(new Date() < ms) {}
  //1st
  console.log('I am side effect of this function');
}
function clickHandler() {
  //3rd
  console.log('click event!');
}

document.addEventListener('click', clickHandler);

waitThreeSeconds();

//2nd
console.log('interpreter read all the code');

In this example we can understand that javascript interpreter reads the code one line at a time. The reason why browser will log 'I am side effect of this function' first is simply because waitThreeSeconds function executed before console.log('interpreter read all the code');. If we would execute waitThreeSeconds after console.log('interpreter read all the code'); We would immediatly see 'interpreter read all the code' in the browser console.

But here is one thing, no matter when you click to the screen,'click event!' will be always final log because browser checks event queue only after execution stack is empty.

Effective CapsLock

Eray Kaya — Wed, 03 Mar 2021 17:51:19 +0000

When I first start to think about how to get more efficient in using my text editor, I realized that when I both navigate and edit files at the same time I have to move between keys which are far from each other. For example; arrow keys and any other letter key.

Then I thought that, the least useful key for me was caps lock. So I come up with a solution by using autohotkeys. I wrote this script to separate navigate mode and editing mode, like in VIM but much simpler. Here is the script:

#Persistent
SetCapsLockState, AlwaysOff
; Caps Lock Disable

#If GetKeyState("CapsLock", "T") = 0
;;; [CapsLock] + [i] - move up
Capslock & i::Up
; ...
;;; [CapsLock] + [l] - move right
Capslock & l::Right
; ...
;;; [CapsLock] + [k] - move down
Capslock & k::Down
; ...
;;; [CapsLock] + [j] - move left
Capslock & j::Left
; ...
;;; [CapsLock] + [;] - move far right
Capslock & `;::End
;;; ...
;;; [CapsLock] + [h] - move far left
CapsLock & h::Home
;;; ...
;;; [CapsLock] + [n] - enter
CapsLock & n::Enter
;;; ...
;;; [CapsLock] + [d] - delete
CapsLock & d::BackSpace
;;; ...
;;; [CapsLock] + [w] - pageup
CapsLock & w::PgUp
;;; ...
;;; [CapsLock] + [x] - pagedown
CapsLock & x::PgDn
;;; ...

Basically what this script does is that; when capslock is pressed you can use:

j as left arrow
i as up arrow
l as right arrow
k as down arrow
n as enter button
d as backspace
w as pageup
d as pagedown
h as home // to go to the beginning of the line
; as end // to go to the end of the line

Now it feels more intuitive and effective to navigate and edit files. Let me now in comments if it worked for you or not or maybe you have better approach.

How we can use Reduce?

Eray Kaya — Sat, 31 Oct 2020 14:50:52 +0000

In first part of this series we talked about how does reduce work. Now let's see some examples.

Let's start with a simple one. How we can sum up elements of an array with reduce.

As we can remember from first part callback function takes 4 parameters: accumulator, current value, index and array. In this example as we did not define an initial value accumulator starts as the first element of the array, which is 1.

We can think like this:

first value(initialValue): 1
accumulator = initialValue

first iteration: accumulator = accumulator + 2
accumulator = 3

second iteration: accumulator = accumulator + 3
accumulator = 6

As our function returns accumulator; result is 6.

const sum = [1, 2, 3].reduce((acc, cur) => acc + cur);

console.log(sum);
//6

Let's check more complex ones.

First of all, i will put our data structure here so, we will use this data structure for all the other examples.

const users = [{
        id: "124124124124",
        name: "Some Person",
        username: "some123",
        insterests: ["hiking", "sports"],
        country: {
            code: "tr",
            name: "Turkey"
        }
    },
    {
        id: "456456",
        name: "John Doe",
        username: "john123",
        insterests: ["sci-fi", "coding"],
        country: {
            code: "us",
            name: "United States"
        }
    },
    {
        id: "56356456",
        name: "Foo Bar",
        username: "foo123",
        insterests: ["board games"],
        country: {
            code: "de",
            name: "Germany"
        }
    },

]

We will see how we can turn an array to an object.

Our system works like this:
initialValue = {}
accumulator = initialValue

first iteration: accumulator[124124124124] = 'Some Person'
accumulator = {124124124124: 'Some Person'}

second iteration: accumulator[456456] = 'John Doe'
accumulator = {124124124124: 'Some Person', 456456: 'John Doe'}

third iteration: accumulator[56356456] = 'Foo Bar'
accumulator = {124124124124: 'Some Person', 456456: 'John Doe', 56356456: 'Foo Bar'}

const reducedArr = users.reduce((accumulator, currentValue) => {
    accumulator[currentValue.id] = currentValue.name;
    return accumulator;
  }, {});

In our next example we will pick values from initial data and return an array with elements which we want.

In here our system works like this:

initialValue = []
accumulator = []

In this example we are using spread syntax basically we are using it like this:

const arr = []; const arr2 = [...arr, {name: 'random'}] console.log(arr2);//[{name: 'random'}]

first iteration: accumulator = [{name: 'Some Person', id: '124124124124'}]
.
.
.

 const nameById = users.reduce((accumulator, currentValue) => {
    accumulator = [...accumulator, {name: currentValue.name, id: currentValue.id}];
    return accumulator
 }, [])

With same logic from above we could use elements as key values also like this:

const nameById = users.reduce((accumulator, currentValue) => {
    accumulator = [...accumulator, {[currentValue.id]: currentValue.name}];
    return accumulator
 }, [])

In general we can use the reduce method like this.

How does reduce method works?

Eray Kaya — Sat, 31 Oct 2020 14:32:16 +0000

In this series i will try to explain how does an underrated javascript method, reduce, works and how we can use this method.

First let's take a look at how we would write this function if it wouldn't exist natively.

Reduce function follows accumulator pattern meaning that it tries to reduce the value, which we put into our function, to a single value.

It takes two parameters first one is callback function, second one is the initial value. If we define initial value, accumulator starts equal to the initial value. If not it starts as first element of the array.

function fakeReduce() {
  function reduce(callback, initialValue) {
    let accumulator;
    let start = 0;

    if(initialValue) {
      accumulator = initialValue;
   } else {
     accumulator = this[0];
     start = 1;
   }

  }

After we need to define our callback function which takes 4 parameters: accumulator, current value, index number and array. At each for iteration callback function runs again until loop is over and our return value is accumulator.


  function fakeReduce(callback, initialValue) {
    let accumulator;
    let start = 0;
   //**this** keyword in this function scope points to array which reduce method is used on 
    if(initialValue) {
      accumulator = initialValue;
   } else {
     accumulator = this[0];
     start = 1;
   }

   for (let i = start; i < this.length; i++) {
     accumulator = callback(accumulator, this[i], i, this);
   }

   return accumulator;
  }

Right now missing part of our function is error handling but we will not get into that. Our main goal here is to understand how does reduce method works.

In next post of this series i will show some examples how we can use reduce for more complex tasks rather than just summing up numbers of an array.

See you in next post...

Reduce'u nasıl kullanabiliriz?

Eray Kaya — Fri, 30 Oct 2020 14:54:13 +0000

Herkese merhaba tekrar, ilk yazımda reduce metodunun nasıl çalıştığını incelemiştik. Şimdi de örneklerle nasıl kullanabileceğimize bakalım.

Öncelikle en çok kullanıldığı alan olan; array içindeki değerleri toplama işlemini reduce'la nasıl yapabileceğimize bakalım.

Bir önceki yazmızdan hatırlayacağımız gibi callback fonksiyonumuzun aldığı değerler accumulator, anlık değer, index ve array'di. İlk değer belirtilmediği için otomatik olarak ilk eleman olan 1 ile başladık.

Burada şu mantıkla düşünebiliriz:

ilk değer(initialValue): 1

accumulator = ilk değer

ilk iterasyon: accumulator = accumulator + 2
accumulator şu an 3'e eşit

ikinci iterasyon: accumulator = accumulator + 3
accumulator şu an 6'ya eşit

Fonksiyon accumulator'ı döndürdüğü için sonuç 6'ya eşit.

const sum = [1, 2, 3].reduce((acc, cur) => acc + cur);

console.log(sum);
// 6

Gelelim biraz daha karmaşık olabilecek örneklerimize:

Öncelikle veri yapımızı buraya bırakacağım unutmayın bütün örneklerde aynı veri yapısını kullanacağınız:

const users = [{
        id: "124124124124",
        name: "Some Person",
        username: "some123",
        insterests: ["hiking", "sports"],
        country: {
            code: "tr",
            name: "Turkey"
        }
    },
    {
        id: "456456",
        name: "John Doe",
        username: "john123",
        insterests: ["sci-fi", "coding"],
        country: {
            code: "us",
            name: "United States"
        }
    },
    {
        id: "56356456",
        name: "Foo Bar",
        username: "foo123",
        insterests: ["board games"],
        country: {
            code: "de",
            name: "Germany"
        }
    },

]

İlk örneğimizde bu array yapısındaki veri yapısını nasıl istediğimiz key - value ikilisini kullanarak objeye çevirebileceğimize bakacağız:

Bu noktada sistem şu şekilde çalışacak:
ilk değerimiz: {} //boş bir obje;
accumulator = {}

ilk iterasyon: accumulator[124124124124] = 'Some Person'
accumulator = {124124124124: 'Some Person'}

ikinci iterasyon: accumulator[456456] = 'John Doe'
accumulator = {124124124124: 'Some Person', 456456: 'John Doe'}

üçüncü iterasyon: accumulator[56356456] = 'Foo Bar'
accumulator = {124124124124: 'Some Person', 456456: 'John Doe', 56356456: 'Foo Bar'}

 const reducedArr = users.reduce((accumulator, currentValue) => {
    accumulator[currentValue.id] = currentValue.name;
    return accumulator;
  }, {});

Diğer örneğimizde ise veri yapısı aynı kalacak şekilde istediğimiz key value eşlerini arrayin içine koyacağız.

Burada da sistem şu şekilde çalışır:

ilk değerimiz: []
accumulator = []

Burada spread syntax kullanılmıştır basitçe anlatmak gerekirse:

const arr = []; const arr2 = [...arr, {name: 'random'}] console.log(arr2) = [{name: 'random'}] şeklinde çalışır.

ilk iterasyon: accumulator = [{name: 'Some Person', id: '124124124124'}]
.
.
.


 const nameById = users.reduce((accumulator, currentValue) => {
    accumulator = [...accumulator, {name: currentValue.name, id: currentValue.id}];
    return accumulator
 }, [])

Yukarıda oluşturduğumuz arrayi yine aynı mantıkla fakat ilk kullandığımız array için keylerle de oluşturabilirdik:

 const nameById = users.reduce((accumulator, currentValue) => {
    accumulator = [...accumulator, {[currentValue.id]: currentValue.name}];
    return accumulator
 }, [])

Genel olarak reduce metodunu bu şekilde kullanabilirsiniz.

Daha başka hangi konularda yazı gelmesini istiyorsanız yorumlarda belirtebilirsiniz.

Javascript Reduce Metodu Nasıl Çalışır?

Eray Kaya — Fri, 30 Oct 2020 14:50:54 +0000

Herkese merhaba arkadaşlar. İlk yazımda etrafımda gördüğüm kadarıyla underrated olduğunu düşündüğüm reduce metodunu ele alacağım.

Underrated olduğunu düşünmemin sebebi, genelde herkes bu fonksiyonu array içindeki değerleri toplamak için falan kullanıyor fakat bu metod çok daha fazlasını yapabilecek bir metod.

Öncelikle eğer Array.prototype.reduce diye bir metodumuz olmasaydı bunun gibi çalışan bir metodu nasıl yazardık ile başlayalım:

Reduce fonksiyonu accumulator yapısında bir fonksiyondur yani üzerinde kullanılan veriyi biriktirerek tek bir değere indirgemeye çalışır.

2 parametre alır bunlardan biri callback fonksiyonu diğeri ilk değerdir. Eğer ilk değer varsa accumulator ona eşit başlar yoksa eğer reduce kullanılan arrayin ilk elemanına eşit başlar.

function fakeReduce() {
  function reduce(callback, initialValue) {
    let accumulator;
    let start = 0;

    if(initialValue) {
      accumulator = initialValue;
   } else {
     accumulator = this[0];
     start = 1;
   }

  }

Esas kısıma gelecek olursak eğer, callback fonksiyonu 4 değer alır bunlar: accumulator, o anki değer, index
ve fonksiyonu kullandığımız array'dir. Her for iterasyonunda callback fonksiyonumuz tekrar çalışır ve return değerimiz accumulator'dır.


  function fakeReduce(callback, initialValue) {
    let accumulator;
    let start = 0;
   //this bu fonksiyonda üzerinde kullandığımız arrayi gösterir
    if(initialValue) {
      accumulator = initialValue;
   } else {
     accumulator = this[0];
     start = 1;
   }

   for (let i = start; i < this.length; i++) {
     accumulator = callback(accumulator, this[i], i, this);
   }

   return accumulator;
  }

Şu anda fonksiyonumuzun eksiği, error yönetimi. Buna girersem konu dağılabilir o yüzden önemli olan reduce metodunun nasıl çalıştığını anlamak. Bu sebeple bu yazının çok da uzun olmaması adına reduce'u basit bir toplama işleminden ziyade üzerinde kullandığımız arrayle nasıl oynayabileceğimizi gösteren örnekler sunacağım.

Javascript'le ilgili herhangi bir konuda yazı gelmesini istiyorsanız yorumlarda belirtebilirsiniz.

Bir sonraki yazıda görüşmek üzere...