I have decided to start back with **how it works series** of articles. Here is the first of many to come. I am pretty sure you are using/used the promise in Javascript many times, either knowingly or not. Let us see what is a Promise and how it works under the hood by writing a custom Promise function.

In Javascript, a Promise is an **Object** which is used to represent the **eventual completion/failure** of an **asynchronous operation**.

## How does promise works?

- A Promise has three states `pending`, `fulfilled`, and `rejected`.
- A Promise can either `resolve` or `reject` only once.
- A Promise constructor returns a Promise object which is `thenable` and `catchable`.
- A Promise constructor accepts a callback as a parameter.
- A Promise constructor callback has two parameter callbacks called `resolve()` and `reject()`.
- And there is a `finally()` method which is called when the promise is `settled`.

#### Promise example code:

We will start with a simple example of a promise.

#### Example:

```js showLineNumbers
const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 5000);
});

myPromise
  .then((result) => {
    console.log(result); // "1" after 5 seconds
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log('Finally'); // Logs when promise is settled
  });
```

The above code snippet is a simple example that is self-explanatory if not let me explain.

After 5 seconds, the above code will **resolve** the myPromise constructor. and it will log **1** in the console and also it will log **Finally**.

Simple right, I can resolve a promise with resolve callback and reject a promise with reject callback and finally is called when the promise is settled.

We are going to understand and write CustomPromise function in 4 steps.

### Step 1:

1. We are going to create a file and name it as **customPromise.js**.
2. let us name the function as **CustomPromise** which takes a callback as a parameter.
3. To call **.then()**, **.catch()** and **.finally()** methods, we need to add then, catch and finally methods in this keyword of function and each method should return **this** to make it chainable.
4. And invoke CustomPromise with **new** keyword so that it makes it chainable.

#### Example: customPromise.js file

```js {2-4,8,11-13} showLineNumbers
function CustomPromise(callback) {
  this.then = () => this;
  this.catch = () => this;
  this.finally = () => this;
}

const callbackFn = () => {};
const myPromise = new CustomPromise(callbackFn);

myPromise
  .then(() => console.log)
  .catch(() => console.log)
  .finally(() => console.log);
```

Wow, we just learned how to create a CustomPromise function and how to make it chainable like an actual **Promise** object in Javascript.

### Step 2:

1. Promise allows us to attach as many **.then()** as possible. So we will create a internal array to store the **callbacks** passed to **then()** method called **thenCallbacksArr**.
2. Also I should be able to attach **.catch()** method. So we will also store the callback in a internal variable called **catchCallback**.
3. Lets create a **resolve** and **reject** callback function and pass it to the **callback** parameter of CustomPromise function.

```js {2,4,7-8,12-13,17,20,22,24} showLineNumbers
function CustomPromise(callback) {
  let thenCallbacksArr = []; // To hold as many then as possible

  let catchCallback = null; // To hold catch callback

  this.then = (myThenCallback) => {
    thenCallbacksArr.push(myThenCallback); // Stores all then callbacks
    return this;
  };

  this.catch = (myCatchCallback) => {
    catchCallback = myCatchCallback;
    return this;
  };

  this.finally = () => {
    return this;
  };

  function resolve() {}

  function reject() {}

  callback(resolve, reject);
}
```

> <b>Note:</b>
>
> 1. Promise only calls the first `catch()` method and discards the other catch methods.
> 1. `finally()` method doesn't accept any parameters.

### Step 3:

1. Create a variable called **promiseState** with the initial value as **pending**.
1. Create another **Boolean** variable as **called** to track whether a **resolve** or **reject** callback is called or not.
1. When **resolve** or **reject** callback is called, pass the **then** or **catch error** argument accordingly.
1. Once the promise is settled, Check **promiseState** and **called** variables before calling **finally()** method.

```js {6,8,33-39,45-53} showLineNumbers
function CustomPromise(callback) {
  let thenCallbacksArr = []; // To hold as many then as possible

  let catchCallback = null; // To hold catch callback

  let promiseState = 'pending'; // To keep track of promise state (resolved/rejected)

  let called = false; // To know if resolve/reject is called or not

  this.then = (myThenCallback) => {
    thenCallbacksArr.push(myThenCallback); // Stores all then callbacks
    return this;
  };

  this.catch = (myCatchCallback) => {
    catchCallback = myCatchCallback;
    return this;
  };

  this.finally = (myFinallyCallback) => {
    // Post resolve or reject, we will call the finally method
    if (called && promiseState !== 'pending') {
      myFinallyCallback();
    }

    return this;
  };

  function resolve(arg) {
    promiseState = 'resolved';

    // If resolve/reject not called
    if (!called) {
      called = true;

      // We need to iterate thenCallbackArr and pass prev result to then callback
      thenCallbacksArr.reduce((result, cb) => cb(result), arg);
    }
  }

  function reject(error) {
    promiseState = 'rejected';

    // If reject/resolve not called
    if (!called) {
      called = true;

      // Catch is optionally so check if its present
      if (typeof catchCallback === 'function') {
        catchCallback(error);
      }
    }
  }

  callback(resolve, reject);
}
```

Above CustomPromise function will work just fine but when a promise is resolved/rejected before we can assign a then or catch or finally method, there is no code to handle that. That's what we will do in step 4.

### Step 4:

1. We need to check **promiseState**, **called** variable, and call the thenCallbacksArr which contains all the **then callbacks**.
2. Also we need to push the **finally callback** to **thenCallbackArr** variable, for it to call when a promise is settled before attaching the finally method.

```js {10,12,18-23,32-34,40} showLineNumbers
function CustomPromise(callback) {
  let thenCallbacksArr = []; // To hold as many then as possible

  let catchCallback = null; // To hold catch callback

  let promiseState = 'pending'; // To keep track of promise state (resolved/rejected)

  let called = false; // To know if resolve/reject is called or not

  let resolveArguments = null; // To hold resolve arguments

  let rejectArguments = null; // To hold reject error

  this.then = (myThenCallback) => {
    thenCallbacksArr.push(myThenCallback); // Stores all then callbacks

    //  If resolve callback method is already called, but then was not atached
    if (called && promiseState === 'resolved') {
      // Since there can ba many then's, call the first and store the returned result
      // and pass resolveArguments to it
      var firstThenFunzInArr = thenCallbacksArr.shift();
      resolveArguments = firstThenFunzInArr(resolveArguments);
    }

    return this;
  };

  this.catch = (myCatchCallback) => {
    catchCallback = myCatchCallback;

    //  If reject callback method is already called, but catch was not atached
    if (called && promiseState === 'rejected') {
      catchCallback(rejectArguments);
    }

    return this;
  };

  this.finally = (myFinallyCallback) => {
    thenCallbacksArr.push(myFinallyCallback);

    // Post resolve or reject, we will call the finally method
    if (called && promiseState !== 'pending') {
      myFinallyCallback();
    }

    return this;
  };

  function resolve(arg) {
    promiseState = 'resolved';

    // If resolve/reject not called
    if (!called) {
      called = true;
      resolveArguments = arg;

      // We need to iterate thenCallbackArr and pass prev result to then callback
      thenCallbacksArr.reduce((result, cb) => cb(result), arg);
    }
  }

  function reject(error) {
    promiseState = 'rejected';

    // If reject/resolve not called
    if (!called) {
      called = true;
      rejectArguments = error;

      // Catch is optionally so check if its present
      if (typeof catchCallback === 'function') {
        catchCallback(error);
      }
    }
  }

  callback(resolve, reject);
}
```

### Demo:

<iframe src="https://codesandbox.io/embed/thirsty-wilson-jb6udb?autoresize=1&expanddevtools=1&fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="thirsty-wilson-jb6udb"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

### Final thoughts

If you followed through with the code, you would have understood now how a promise works internally. Also, this is purely for educational purposes only, and dont ask questions like "Write a polyfill for the promise" in interviews.

I would have also missed a few edge cases. But you get it right? How it works. Hope you liked this post. If you did, do share it with your friends and colleagues.

## Workstation

- M1 Macbook Pro.
- Magic Keyboard & Trackpad.
- 4k Samsung Monitor 32<sup>inch</sup>.
- AmazonBasics Monitor Stand.
- Airpods Pro 2.

### Development Tools:

- [Oh My Zsh](https://github.com/ohmyzsh/ohmyzsh) for default shell.
- [Iterm 2](https://iterm2.com/) - terminal application.
- [Iterm Theme](https://github.com/gokulkrishh/dotfiles/blob/master/Dracula.terminal) of theme [dracula](https://draculatheme.com/) for the iterm app.

### Code Editor:

- [Visual Studio Code](https://code.visualstudio.com/Download) editor.
- [Extensions](https://gist.github.com/gokulkrishh/6a8b841f594ff451d66bbcc77307a779) I use.
- Current [settings](https://github.com/gokulkrishh/dotfiles/blob/master/vscode/settings.json) for vscode editor.

<center><img src="/posts/vscode-editor.png" alt="Visual Studio Code Editor" width="600" /></center>

Run to get the list of extensions from the Visual Studio Code.

```bash
npx https://gist.github.com/gokulkrishh/9dd54a34ed93701a37811f0eb2e37822
```

### Fonts:

- [FiraCode](https://github.com/tonsky/FiraCode) - Free.
- [MonoLisa](https://www.monolisa.dev/) - Paid.
- [Iterm Profile](https://github.com/gokulkrishh/dotfiles/blob/main/Default.iterm2.json)

### MacOS Apps:

- [Itsycal](https://www.mowglii.com/itsycal/) a minimalist calendar app.
- [Sketch](https://www.sketch.com) for designing logos, wireframes, and visual designs.
- [Spotify](https://www.spotify.com/us/download/other/) for music and sometimes I hear Tamil podcasts too.
- [Moom](https://manytricks.com/moom/) - To Move and zoom windows.
- [EasyRes](https://easyresapp.com/) - Fast screen resolution switcher for Mac OS X.

> Fun fact: Sometime I design too, check out my [dribbble account](https://dribbble.com/gokulkrishh).

### Dotfiles:

If you want the same setup as mine in your MacBook, go ahead and install [my dotfiles](https://github.com/gokulkrishh/dotfiles).

#### 💅 Features:

- [Oh My Zsh](https://github.com/robbyrussell/oh-my-zsh) as default terminal shell.
- [Shortcuts & Aliases](./docs/Aliases.md) - All the good stuffs are here.
- [Homebrew](http://brew.sh/) for installing mac apps and others via command line.
- [NVM](https://github.com/lukechilds/zsh-nvm) for managing node versions.
- [Yarn](https://yarnpkg.com/) for doing fast node modules install, as npm sucks.
- [Z - Jump Around](https://github.com/robbyrussell/oh-my-zsh/tree/master/plugins/z) to jump to the frequent folders without a full path.

### Writing:

- I use [Grammarly](https://app.grammarly.com/) to catch common and grammatical errors.
- Apple notes application.

### Youtube Channel:

- [iMovie](https://www.apple.com/in/imovie/) for editing videos.
- [Canva](https://canva.com) for creating and editing thumbnail.
- [Maono AU-A04](https://amzn.to/2YIB0lM) condenser microphone kit.
- [Logitech c922 WebCam](https://amzn.to/3atGuGm) for recording live coding.

Thanks for reading my post so far, that's all for now. Share your setup and applications you use in your day to day develpoment. If you have any suggestions or a question, [tweet or dm](https://twitter.com/gokul_i) me.

`stringify()` is a method in **JSON** object which converts a value (Eg: Object, Number, Array etc) to a **string** in **UTF-16** encoded **JSON format**. Few use cases are converting data to string when sending to the server via **fetch** or storing the data in **localStorage** by converting it to string etc,.

#### JSON.stringify() accepts 3 parameters:

- **Value** - Could be a Object, Array, Boolean, Null, Undefined, String, Symbol etc,
- **Replacer** or **Inclusion** function (optional) - To alter or include a value.
- **Space** (optional) - To insert space to make it readable (Eg: 2 or "4").

#### Points to remember:

- If the object passed to **JSON.stringify()** contains `toJSON` key with value as a function (a method), then value **returned by the method** will be used for serializing instead of the object itself.
- Also JSON.stringify() **cannot serialize** an object which has **circular reference**. A **type error** will be thrown by the javascript engine.

Let's see an example of how JSON.stringify() method works.

#### Example:

```js {30-32,38,41,44} showLineNumbers
var myObj = {
  random: 73,
  'random float': 93.655,
  isAlive: true,
  date: '1987-03-11',
  firstname: 'Myrtice',
  lastname: 'Rosalba',
  city: 'Amritsar',
  countryCode: 'MP',
  nullValue: null,
  array: ['Georgina', 'Lolita', 'Shandie', 'Deirdre', 'Lynea'],
  'array of objects': [
    {
      index: 0,
      'index start at 5': 5,
    },
    {
      index: 1,
      'index start at 5': 6,
    },
    {
      index: 2,
      'index start at 5': 7,
    },
  ],
};

// String replacer function
function stringReplacer(key, value) {
  if (typeof value === 'string') {
    return undefined;
  }

  return value;
}

// Logs formatted json object
console.log(JSON.stringify(myObj));

// Logs only formatted number, boolean, null value in json object
console.log(JSON.stringify(myObj, stringReplacer));

// Logs formatted 2 spaced json object
console.log(JSON.stringify(myObj, undefined, 2));
```

Now that we have seen what is the output of **JSON.stringify()** method and how it works, lets implement it by starting with serializing values.

### Serializing values

For starters, we will start with the following **data types**.

1. undefined
1. number
1. boolean
1. string

```js {3,6,10,14} showLineNumbers
function stringify(value) {
  // Type of the value argument
  var type = typeof value;

  function getValues(value) {
    if (type === 'undefined') {
      return undefined;
    }

    if (type === 'number' || type === 'boolean') {
      return '' + value + '';
    }

    if (type === 'string') {
      return '"' + value + '"';
    }
  }

  return getValues(value);
}

console.log(stringify(1)); // "1"

console.log(stringify('abc')); // ""abc""

console.log(stringify(true)); // "true"

// Just undefined instead of "undefined"
console.log(stringify(undefined) === JSON.stringify(undefined)); // true
```

The above function so far is self-explanatory. All it does is wrap the values with quotes and return it expect for the `undefined` data type.

Now we will add support for more data types like

- array
- object
- null
- date
- functions (methods)

To support **arrays** and **objects**, we should be able to parse the value up to `n level`. We have to **recursively** go up the children and serialize the values.

For **arrays** its pretty simple, iterate the array with an opening and closing bracket and call the `stringify()` function which in turn calls the `getValues()` function and repeat until all the values are accounted for.

But for **objects**, we need to serialize the **value** as well as the **property** (key) with the opening and closing bracket of an object literals.

Also one interesting thing is for **date** objects, **JSON.stringify()** method returns the value in `ISO format`.

```js {20,22,27-29,32-33,37-43} showLineNumbers
function stringify(value) {
  var type = typeof value;

  function getValues(value) {
    if (type === 'undefined' || type === 'function') {
      return undefined;
    }

    if (type === 'number' || type === 'boolean') {
      return '' + value + '';
    }

    if (type === 'string') {
      return '"' + value + '"';
    }
  }

  // For object datatype
  // In javascript both array and object are objects (FYI if you didn't know already)
  if (type === 'object') {
    // To check if the value is null
    if (!value) {
      return '' + value + '';
    }

    // To check if the value is date object
    if (value instanceof Date) {
      return '"' + new Date(value).toISOString() + '"'; // return ISO format
    }

    // To check if the value is Array
    if (value instanceof Array) {
      return '[' + value.map(stringify) + ']'; // Call stringify recursively to return its value
    } else {
      // Else it is just an object
      // Call stringify recursively to map key and its value
      return '{' + Object.keys(value).map((key) => '"' + key + '"' + ':' + stringify(value[key])) + '}';
    }
  }

  return getValues(value);
}

console.log(stringify([1, 2, 3])); // "[1,2,3]"

console.log(stringify(new Date())); // prints date in ISO format

console.log(stringify({ a: 1 })); // ""{a:1}""

console.log(stringify(myObj) === JSON.stringify(myObj)); // true

console.log(JSON.parse(stringify(myObj))); // Same as JSON.parse(JSON.stringify(myObj))
```

The above function now works for all data types and also the output is same as the JSON.stringify() method.

Now lets add support for `toJSON()` method. Just to re-iterate, if an object contains **toJSON** method and whatever it is returning will be used by JSON.stringify().

```js {6-8} showLineNumbers
var myObj = { toJSON: () => 'a' };

function stringify(value) {
  function getValues(value) {
    // To check if object has `toJSON` method or not
    if (typeof value.toJSON === 'function') {
      return '"' + value.toJSON() + '"';
    }
  }

  return getValues(value);
}

console.log(stringify(myObj)); // ""a""
console.log(stringify(myObj) === JSON.stringify(myObj)); // true
```

> <b>Note:</b>
> For the sake of this post we will ignore adding support of `Symbol` datatype, the `replacer` function, and `space` argument.

### Final thoughts

JSON.stringify() method is powerful feature in javascript. Most of us would have used it on regular basis. I have learned more about JSON.stringify() method now than before.

Post your comments below if you have any questions. If you liked the post share it.

[Follow me](https://twitter.com/gokul_i) on twitter for more web related things. See ya in next post ;)

#### References

- [JSON.stringify](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)
- [JSON.stringify specification](https://tc39.es/ecma262/#sec-json.stringify)

Hello, I'm Gokul

Web Developer & GDE from India.

Recent posts

Promise - under the hood

Uses

JSON.stringify()

Side projects

Expense.fyi

QR Code Scanner

Dotfiles

Subscribe to my newsletter