While I was going through the official spec of EcmaScript to understand how the Polyfills should be written and have been written so far according to standards, I came across this word called, 'Enumerable' many times and I would be lying if I say that I understood everything in the first glance. This word itself was so confusing for me, so I did some more research about this and will share my findings, understanding so far that further made me understand other concepts better.

Objects in JavaScript

JavaScript is full of objects and every object has a key-value pair otherwise it's just an empty object. I'll be using the below-mentioned code snippet throughout the article to discuss.

var obj = {
    first_name: 'Prateek',
    last_name: 'Gogia',
    profession: 'Code Gambler',
    age: 25,
    location: 'Internet',
    known_as: 'reeversedev',
    prints_name: function() {
        console.log("My name is: " + this.first_name + " " + this.last_name)
    }
};

There are various methods associated with objects. For example, Object.keys(obj) and Object.values(obj) will return array of keys and values by iterating over every key and value. The below snippet explains what will be returned while we use these methods.

console.log(Object.keys(obj)); // ["first_name", "last_name", "profession", "age", "location", "known_as", "prints_name"]
console.log(Object.values(obj)); // ["Prateek", "Gogia", "Code Gambler", 25, "Internet", "reeversedev", ƒ]

Every object in JavaScript has three attributes for its properties, writability, enumerability, and configurability. We are going to talk about Enumerability here.

What the heck is Enumerability?

In simple words, Enumerability allows your object to have properties to exist in the object but it provides a provision to be and not be a part of the iteration. Let's say my object has to be used by some other library that provides the functionality of printing name just like my object but with extra features, at the same time, I don't want the other developer whoever is using my object to change the prints_name() function to change. Any idea how can we do that? Yes, Enumeration is the answer. Let's see how we can do this for our object.

Object.defineProperty(obj, 'prints_name', {
    value: function() {
        console.log("My name is: " + this.first_name + " " + this.last_name)
    },
    enumerable: false
});

// Notice that, prints_name is not printed in console.
console.log(Object.keys(obj)); // ["first_name", "last_name", "profession", "age", "location", "known_as"]

// But you can still access the proper
console.log(obj.prints_name()); // My name is: Prateek Gogia

By default, the inbuilt properties of Objects are non-enumerable i.e., they won't be a part of the iteration, this becomes very important while you are dealing with bigger objects that include information and some methods/factory functions because while iterating, you all need access to information and not the utilities.

Utility functions of Array-like .pop() and .push() are non-enumerable and therefore you can access these properties but when you will console the whole array they won't be visible. To understand better, let's take a look at the example below.

// declaring the array
var arr = [1, 2, 3];

// expected behaviour
console.log(arr); // [1, 2, 3]

// Notice that JS won't throw an error when you use array as an Object, thanks to protype chain in JS
console.log(Object.keys(arr)); // ["0", "1", "2"]

console.log(arr.hasOwnProperty('push')) // false

In the above example, notice that when we check for our declared array, i.e., arr has a property such as 'push' or not, it return false. But you can still write arr.push(4) and it will work. This means, that the utility function of the Array class has push and pop but they are non-enumerable and will not appear in iteration.

When do we need Enumeration though?

Usually, enumeration is being used when a developer tries to write polyfills of some functionality that doesn't work in incompatible browsers. As a result, he/she will try to modify the prototype object that makes the property enumerable and hence makes it risky because it will be returned in the iteration process.

So, instead of writing

Object.prototype.prints_name = function () {
    alert("The name is bond, James Bond");
};

Using, Object.defineProperty by defining enumerable as false makes more sense.

Object.defineProperty(Object.prototype, 'prints_name', {
    value: function () {
        alert("The name is bond, James Bond");
    },
    enumerable: false
});

Here's a Problem

For instance, let's take an example of managing a state of a person.

const [name, setName] = useState('')
const [age, setAge] = useState('')
const [gender, setGender] = useState('')
const [profession, setProfession] = useState('')

In the above code, there are 4 different handlers for setting different instances of the local state. What if there are more than 20 instances of state and what if we have multiple nested instances like address fields? Have a look at this example.

const [name, setName] = useState('')
const [age, setAge] = useState('')
const [gender, setGender] = useState('')
const [profession, setProfession] = useState('')
const [address, setAddress] = useState({apartment: '', lines: {line1: '', line2:''}})

That will make things cumbersome for us to handle.

Introducing useReducer()

useReducer() is a React Hook that is specifically being used to handle complex state changes. It takes three arguments, reducer, initalState and intialFunction. It returns two entities, state and dispatch.

const [state, dispatch] = useReducer(reducer, intialState, initialFunction)

Brief overview of things involved in useReducer()

reducer: A reducer is a pure function that takes two arguments, previous state, and action, and returns the next state. In more simple words, the reducer takes action and a state and returns a new version of that state.

(previousState, action) => newState

intialState: An initial state is a state that you want to use across that component. Preferably, for a complex structure, an ideal choice would be to use a JSON object but it's not a mandatory condition, you can use any datatype for initial state.

const initialState = {
    name: "",
    age: "",
    gender: "",
    profession:""
    address: {
      apartment: "",
      line1: "",
      line2: ""
    }
}

initialFunction: The initial function is used to load the initial state lazily which also means resetting the state to its initial value.

function init(initialState) {
  return initialState;
}

Let's build something

Learning a programming concept is incomplete without actually building a to-do app. (Pun intended). The final Application will look like this.

In this application, we have mainly 5 main components, heading, button, input, ordered list and form so let's code a basic react component layout quickly.

I won't be explaining the CSS code since this post is particularly aimed to understand the hooks and not the design and it's a very basic CSS anyway.

styles.css

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap');

body {
  font-family: 'Nunito', sans-serif;
  background: rgb(8, 38, 53);
}

form {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

input[type='text'] {
  outline: none;
  border: 0;
  border-radius: 25px;
  padding: 10px 20px;
  width: 350px;
}

button {
  padding: 10px;
  background: blue;
  color: white;
  border: 2px solid blue;
  cursor: pointer;
  border-radius: 5px;
}

.app {
  padding: 0px 20px;
}

h1 {
  color: white;
  padding: 5px 10px;
}

.number {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  font-size: 20px;
  color: white;
}

.list {
  background: rgb(245, 235, 98);
  border-radius: 10px;
  height: 310px;
  overflow: auto;
  color: brown;
}

ol li {
  margin: 20px 0px;
}

.banner {
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

App.tsx

import * as React from 'react';
import './styles.css';

const App = () => {
  const [itemName, setItemName] = React.useState('');
  const onSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setItemName('');
  };
  return (
    <div className="app">
      <h1>Todo List</h1>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          placeholder="Add a item name"
          value={itemName}
          onChange={(e) => setItemName(e.target.value)}
        />
        <button type="submit">Add item</button>
      </form>

      <div className="number">
        <button>
          Reset
        </button>
        Total Todos:
      </div>

      <ol className="list">
        <li></li>
      </ol>
    </div>
  );
};

export default App;

If you are familiar with hooks, then the above code is quite easy to understand. I am making use of the useState hook to capture the value of input field and name that state as itemName.

Let's add some more complexity to this application and try to do the basic operations like adding a new todo item and marking those items as either complete or incomplete. Since this will involve multiple states and their handlers, so good it's a time for adding useReducer hook.

 const [{ todos, totalTodos }, dispatch] = React.useReducer(
    reducer,
    intialState,
    init
  );

Let's write the reducer, initialState and init function and then try to understand what these entities really convey. But before even writing all these entities, let's first write the type definitions so that we can structure our application data well.

Type Definitions

type TodoType = {
  idx?: number;
  text?: string;
  completed?: boolean;
};

type StateType = {
  todos: Array<any>;
  totalTodos: number;
};

type ActionType = {
  type: string;
  payload: any;
};

Action Types

const AddTodo = 'add-todo';
const MarkCompleted = 'mark-completed';
const MarkIncompleted = 'mark-incompleted';
const Reset = 'reset';

Initial State and Init function

const intialState = {
  todos: [],
  totalTodos: 0,
};

const init = (initialState: StateType) => initialState;

Reducer

const reducer = (state: StateType, action: ActionType): StateType => {
  const { payload } = action;
  switch (action.type) {
    case AddTodo:
      return {
        todos: [...state.todos, { text: payload.text, completed: false }],
        totalTodos: state.totalTodos + 1,
      };
    case MarkCompleted:
      return {
        todos: state.todos.map((todo, idx) => {
          return idx === payload.idx ? { ...todo, completed: true } : todo;
        }),
        totalTodos:
          [...state.todos.filter((todo) => !todo.completed)].length - 1,
      };
    case MarkIncompleted:
      return {
        todos: state.todos.map((todo, idx) => {
          return idx === payload.idx ? { ...todo, completed: false } : todo;
        }),
        totalTodos:
          [...state.todos.filter((todo) => !todo.completed)].length + 1,
      };
    case Reset:
      return init(action.payload);

    default:
      throw new Error('Not compatible action');
  }
};

As we know, a reducer function accepts state and action and returns a new version of state. Our application has 4 different scenarios that affects our state which I am handling using switch case inside reducer.

1. AddToDo: In this case, I am simply adding a new item inside todos array of state and iterating the totalTodos inside state.
2. MarkCompleted: This a bit tricky because this involves the update operation of marking an item as done, basically making the boolean value of completed inside todo state as true. Also, need to calculate the totalTodos pending here so need to filter the whole todos array where the completed value is false which states that the number of pending items.
3. MarkIncompleted: It's similar to MarkCompleted operation except that instead marking the value as true we are marking it as true. This comes handy when you wanna do an undo operation after marking the item as done.
4. Reset: Reset/Clear the items operation come handy when you want to either delete everything or basically go to your app's initial state.

Putting all these together and we have..

import * as React from 'react';
import './styles.css';

// type definitions
type TodoType = {
  idx?: number;
  text?: string;
  completed?: boolean;
};

type StateType = {
  todos: Array<any>;
  totalTodos: number;
};

type ActionType = {
  type: string;
  payload: any;
};

// action types
const AddTodo = 'add-todo';
const MarkCompleted = 'mark-completed';
const MarkIncompleted = 'mark-incompleted';
const Reset = 'reset';

// reducer
const reducer = (state: StateType, action: ActionType): StateType => {
  const { payload } = action;
  switch (action.type) {
    case AddTodo:
      return {
        todos: [...state.todos, { text: payload.text, completed: false }],
        totalTodos: state.totalTodos + 1,
      };
    case MarkCompleted:
      return {
        todos: state.todos.map((todo, idx) => {
          return idx === payload.idx ? { ...todo, completed: true } : todo;
        }),
        totalTodos:
          [...state.todos.filter((todo) => !todo.completed)].length - 1,
      };
    case MarkIncompleted:
      return {
        todos: state.todos.map((todo, idx) => {
          return idx === payload.idx ? { ...todo, completed: false } : todo;
        }),
        totalTodos:
          [...state.todos.filter((todo) => !todo.completed)].length + 1,
      };
    case Reset:
      return init(action.payload);

    default:
      throw new Error('Not compatible action');
  }
};

// initial state
const intialState = {
  todos: [],
  totalTodos: 0,
};

// init function
const init = (initialState: StateType) => initialState;

const App = () => {
  const [{ todos, totalTodos }, dispatch] = React.useReducer(
    reducer,
    intialState,
    init
  );
  const [itemName, setItemName] = React.useState('');
  const onSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    dispatch({
      type: AddTodo,
      payload: {
        text: itemName,
      },
    });
    setItemName('');
  };
  return (
    <div className="app">
      <h1>Todo List</h1>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          placeholder="Add a item name"
          value={itemName}
          onChange={(e) => setItemName(e.target.value)}
        />
        <button type="submit">Add item</button>
      </form>

      <div className="number">
        <button onClick={() => dispatch({ type: Reset, payload: intialState })}>
          Reset
        </button>
        Total Todos: {totalTodos}
      </div>

      <ol className="list">
        {todos.map((todo, idx) => {
          return (
            <li
              key={idx}
              style={{
                textDecoration: todo.completed ? 'line-through' : 'none',
              }}
              onClick={() =>
                todo.completed
                  ? dispatch({
                      type: MarkIncompleted,
                      payload: { ...todo, idx: idx },
                    })
                  : dispatch({
                      type: MarkCompleted,
                      payload: { ...todo, idx: idx },
                    })
              }
            >
              {todo.text}
            </li>
          );
        })}
      </ol>
    </div>
  );
};

export default App;

In order to make our button even handlers work, we can't just go ahead and simply call the function in this scenario where we are using the useReducer() hook. If you are familiar with Flux pattern, then you must know that we have to dispatch an action that further involves a type and a payload, and based on certain scenarios, our reducer returns the next state. Hence, to make our buttons work properly, I am dispatching the actions which involve the type and the payload and our reducer takes care of these actions and returns us the new version of the state.

Codesandbox

useState() hook can be implemented using useReducer() because inside React, they both share the common code.

When to use useReducer and useState()?

This itself is a long topic to understand but in short if you wanna have some ground rules for application (which I highly recommend because those will make your life easier), then here they are:

1. If only 1 instance of state is involved, then definitely go with useState() hook. Why make things complicated anyway?.

2. If your instance of state is dependent on the other one, like in our example above, number of todos were depended on todos array then we should use useReducer() hook.

Since, this post is particularly targetted to understand useReducer() hook, I don't wanna go in details about implementing useState() with useReducer() or explanation of the above rules in detail because if you are new to useReducer then you might get confuse a bit.

However, Kent C. Dodds has written awesome stuff and he has explained all this in even more detail. So definitely check that out if you are interested to dig even more.

Polyfill is a piece of code, that developer expects from a browser to provide natively. If it's not available in the browser, you being a developer, use your logics and implement the solution.

I'll be using Logic's albums as examples throughout my entire post just to show extra love for Hip Hop Music and easiness.

.forEach()

.forEach() function comes quite handy when we just need to iterate an array.

This function is quite useful because we don't need to implement for loop from scratch, hence saving our time and a lot of crap on the developer screen.

But what if we wanna implement our own polyfill for .forEach()?

We have an array of Logic's albums and want to iterate through this array and print out the album one by one.

var logicAlbums = [
  'Bobby Tarantino',
  'The Incredible True Story',
  'Supermarket',
  'Under Pressure',
]

First, let's just check how it works natively as provided by JavaScript.

logicAlbums.forEach(function(word) {
  console.log(word)
  // Bobby Tarantino,
  // The Incredible True Story,
  // Supermarket,
  // Under Pressure;
})

Since it's an array, it makes sense to add a prototype to Array.

Array.prototype.eachAlbum = function(callback) {
  // callback here is the callback function
  // which actual .forEach() function accepts
  for (var i = 0; i < this.length; i++) {
    callback(this[i], i, this) // currentValue, index, array
  }
}

Let's try to use our own polyfill

logicAlbums.eachAlbum(function(word) {
  console.log(word)
  // Bobby Tarantino,
  // The Incredible True Story,
  // Supermarket,
  // Under Pressure;
})

.map()

.map() is very much similar to .forEach() method, except for the fact, that instead of returning items out of the array, it returns the array itself.

But what sense does it make if it returns the array itself?

.map() is used to iterate over the array, and do some manipulation in it with the items and then after doing that so, returns the manipulated array.

In Action

Let's use the collection of Logic's Albums again

var logicAlbums = [
  'Bobby Tarantino',
  'The Incredible True Story',
  'Supermarket',
  'Under Pressure',
]

Mapping these albums now using .map()

const mapThoseAlbums = logicAlbums.map(function(album) {
  return album
})

console.log(mapThoseAlbums)

// [
//   'Bobby Tarantino',
//   'The Incredible True Story',
//   'Supermarket',
//   'Under Pressure'
// ];

As we can see that, mapThoseAlbums returns an array.

So we are clear that we have to return an array in our own polyfill function. So let's create it then.

Array.prototype.ourMap = function(callback) {
  var arr = [] // since, we need to return an array
  for (var i = 0; i < this.length; i++) {
    arr.push(callback(this[i], i, this)) // pushing currentValue, index, array
  }
  return arr // finally returning the array
}

In Action

const mapThoseAlbums = logicAlbums.ourMap(function(album) {
  return album
})

console.log(mapThoseAlbums)
// [
// 'Bobby Tarantino',
// 'The Incredible True Story',
// 'Supermarket',
// 'Under Pressure'
// ];

.filter()

.filter() is very much similar to the map() function except for the fact, it is used based on the context, where we decide what kind of items do we want in the resulting array.

Let's filter out Logic's greatest albums according to ratings

var logicAlbums = [
  {
    name: 'Bobby Tarantino',
    rating: 5,
  },
  { name: 'The Incredible True Story', rating: 4.5 },
  {
    name: 'Supermarket',
    rating: 4.9,
  },
  { name: 'Under Pressure', rating: 5 },
]

logicAlbums.filter(album => {
  return album.rating > 4.9
})
console.log(logicAlbums)

// [
//   { name: 'Bobby Tarantino', rating: 5 },
//   { name: 'Under Pressure', rating: 5 }
// ];

Now let's create our own polyfill for filter.

Array.prototype.filterAlbums = function(callback, context) {
  arr = []
  for (var i = 0; i < this.length; i++) {
    if (callback.call(context, this[i], i, this)) {
      arr.push(this[i])
    }
  }
  return arr
}
logicAlbums.filterAlbums(function(album) {
  return album.rating > 4.9 // providing the context here
})
console.log(logicAlbums)

// [
//   { name: 'Bobby Tarantino', rating: 5 },
//   { name: 'The Incredible True Story', rating: 4.5 },
//   { name: 'Supermarket', rating: 4.9 },
//   { name: 'Under Pressure', rating: 5 }
// ];

Over here, only albums with a rating more than 4.9 will be returned which are Bobby Tarantino and Under Pressure>) (By the way, these are my favorites, that's why I rated them 5).

Under Pressure (2014)

Bobby Tarantino (2016)

.reduce()

reduce() function is used to reduce the array to a single value. We'll again take the example of Logic's best work yet and combine all of them in a single line using .reduce() function.

.reduce() accepts a callback function (accumulator, currentValue, index and array) and initial value

var logicAlbums = [
  'Bobby Tarantino',
  'The Incredible True Story',
  'Supermarket',
  'Under Pressure',
]
var withReduce = logicAlbums.reduce(function(a, b) {
  return a + ' , ' + b
}, 'Young Sinatra') // Here we are initialising the array with value as 'Young Sinatra'

console.log(withReduce)
// Young Sinatra, Bobby Tarantino, The Incredible True Story, Supermarket, Under Pressure

Let's create our own polyfill which is very easy.

Array.prototype.reduceAlbums = function(callback, initialValue) {
  var accumulator = initialValue === undefined ? undefined : initialValue

  for (var i = 0; i < this.length; i++) {
    if (accumulator !== undefined) {
      accumulator = callback.call(undefined, accumulator, this[i], i, this)
    } else {
      accumulator = this[i]
    }
  }
  return accumulator
} // our polyfill for reduce

var logicAlbums = [
  'Bobby Tarantino',
  'The Incredible True Story',
  'Supermarket',
  'Under Pressure',
]

var combineAlbums = logicAlbums.reduceAlbums(function(a, b) {
  return a + ' , ' + b
}, 'Young Sinatra') // Initial Value is Young Sinatra

console.log(combineAlbums)
// Young Sinatra, Bobby Tarantino, The Incredible True Story, Supermarket, Under Pressure

This article is really special for me since I am a huge fan of Logic. I tried to portray the whole post with Logic's best work yet just to give a personal touch. If you are a Hip Hop head like me, don't forget to check his work on the Internet.

Here's a tribute to his turning point of life that is, his album Young Sinatra.

"When dealing with JavaScript, things can get really confusing specially when you have to deal with Object-Oriented JavaScript (OOP based). Although, in Object-Oriented JavaScript, everything is in a form of functions and objects which is much less complex to understand the language (Really?)".

What is this?

The keyword this in Javascript is being used exactly like the word 'this' in the English Language which means that whenever we are using this somewhere, we are talking about some context.

Let's dig even more by taking reference to (I'll go old school here), the times when there were kingdoms in the whole world and everyone wants to rule each other. A typical conversation at the time of war would be something like:

King: "We need to capture this peak of the mountain (pointing his finger on the map), before 05:00 hrs in order to control our situation better".

Army Chief: " I'm sorry to be so dumb, my king but which peak exactly?"

King: "This peak. (again pointing his finger on the map)"

Army Chief: "But boss, without even knowing any proper context for the peak which you are you talking about, how am I supposed to command my army to take action?"

King: "(After realizing about the situation that he's a literal dumb) We need to capture this peak(now taking the finger of army chief and pointing it on the point of map) of Mountain XYZ"

Army Chief: "I'll command the army right away"

In the above conversation, things got really confusing between two people because both were talking in their own individual contexts which further created confusion.

Similarly, in Javascript as well, things get really confusing when we deal with objects, functions, and this because we often make a mistake in context.

Stuff about Javascript

Here's a thing about Javascript, it's not only an object-oriented programming language but also a functional programming language that makes things much easier for a developer who is writing code in it. Higher-order functions like map(), reduce() and filter() do reduce the pain of manipulating the code with loops and finally the calculation related to the result.

As a matter of fact, Javascript as a whole is more and more about Objects and Functions. No matter whatever we wanna build with it, we need to make use of Objects and Functions.

Using this in Javascript

For Object-Oriented Programming languages, this keyword is one of the most important elements of the language, without it, the language is incomplete.

Let's understand better with some code.

let person = {
  name: 'HODOR',
  dialogue: 'HODOR!',
  talk: function() {
    console.log(this.dialogue)
  },
}

We have an object named 'person' which has a name, dialogue, and talk property. Now let's call it.

person.talk() // "HODOR!"

That's what was expected. Right? Now, let's call it in a different fashion.

let talkFunction = person.talk
talkFunction() // undefined

Yikes! This is what is happening over here.

When we are declaring variable talkFunction, it's no longer a method but rather a function. But again, why does it give undefined? It's because,

this keyword refers to the context where it is called and NOT where it is assigned.

So what do we do to use that talkFunction?

Here, bind() comes in action. A bind() is responsible for attaching an object to a function by which it has been called.

Let's take a look at the code again,

let person = {
  name: 'Jon Snow',
  dialogue: 'We the North!',
  talk: function() {
    console.log(this.dialogue)
  },
}

let talkFunction = person.talk
let bindedFunction = talkFunction.bind(person)
bindedFunction() // "We the North!"

Here, bind() attaches the 'person' object to talkFunction and therefore, the talk function is able to get this.dialogue and hence prints the dialogue, "We the North!"