DEV Community: King Elisha

Correct way to handle API requests in a useEffect hook

King Elisha — Thu, 15 Sep 2022 18:48:29 +0000

It is common to issue an asynchronous request to an API in a useEffect hook. Perhaps to fetch some data which is eventually used to update component state. Something like this:

const [data, setData] = useState([]);

useEffect(() => {
  axios.get('get/some/data').then(({ data }) => {
    setData(data);
  });
}, []);

It is also common to encounter a situation where the component unmounts before the request is complete. The callback will still be executed if the component unmounts because the request was not cancelled. Consequently, when setData is called, this interesting warning pops up in the browser console:

Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

How to fix this

To fix this, the request needs to be cancelled when the component unmounts (in the useEffect cleanup function). This can be easily achieved with axios as follows:

const [data, setData] = useState([]);

useEffect(() => {
  const cancelToken = axios.CancelToken.source();

  axios
    .get('get/some/data', { cancelToken: cancelToken.token })
    .then(({ data }) => {
      setData(data);
    })
    .catch((err) => {
      if (axios.isCancel(err)) {
        // TODO
      }
    });

  return () => {
    cancelToken.cancel();
  };
}, []);

This can also be accomplished with fetch using AbortController as follows:

const [data, setData] = useState([]);

useEffect(() => {
  const controller = new AbortController();

  fetch('get/some/data', { signal: controller.signal })
    .then((res) => res.json())
    .then((data) => {
      setData(data);
    })
    .catch((err) => {
      if (err.name === 'AbortError') {
        // TODO
      }
    });

  return () => {
    controller.abort();
  };
}, []);

How to implement Facebook Login with NestJS

King Elisha — Thu, 20 Aug 2020 16:55:56 +0000

NestJS is a relatively new framework that has been growing in popularity for many good reasons. It has full support for TypeScript and it combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming) to enable developers build scalable and coherent server-side applications.

Requirements

Below is a list of software required to follow along as we setup facebook login with NestJS:

Facebook account
NodeJS
Yarn

Project Setup

NestJS comes with a convenient CLI that can be used to scaffold a new NestJS project.

Install the CLI globally using the following command:



npm i -g @nestjs/cli

Scaffold a new project using the command:



nest new <project-name>

For this project,you use a descriptive name as shown below:



nest new nest-facebook-auth

The CLI will prompt you to choose a package manager between yarn or npm.you be using yarn for this project.

After the setup is complete, you can open the project in your favorite editor and you should have a folder structure like this:

Dependencies

To implement facebook login, we need to add a few dependencies to the project:

dotenv
passport
passport-facebook
@nestjs/passport

The dotenv package will be used to load environment variables and passport will be used to manage authentication. Add the packages using the following command:



yarn add dotenv @nestjs/passport passport passport-facebook

To add static typing for passport-facebook, we need to install one more dependency:



yarn add @types/passport-facebook

Create Facebook App

Visit https://developers.facebook.com to create a Facebook app. If you don't have a developer account, click on Get Started at the top right of the screen. After setting up your account, you should see the dialog below:

Click on Create First App and fill in the details for your desired app name and contact info. You can give yours a different name than the one below:

Once your app is created, you should see a dashboard that looks similar to the one below. Click on Set Up Facebook Login.

Select Web and fill in your website's URL (without any paths). Since this is just for testing, our request will be coming from localhost, so enter http://localhost:3000 and click Save.

Just like this:

Get and Save Credentials

To get your app credentials, click on Settings on the left side menu and click on Basic. Copy your App ID and App Secret.

Create a new .env file in the NestJs project's root directory. Store your app credentials as environment variables for security reasons:



APP_ID=<your_app_id>
APP_SECRET=<your_app_secret>

NOTE: make sure you add .env to your .gitignore to prevent it from being added to git. At the bottom of your .gitignore, add the following:



# Environment
.env

Implement Facebook Login

To import the saved environment variables, add the following code to the top (and below other imports) of your main.ts file in the src folder



import * as dotenv from "dotenv";

dotenv.config();

Since we're using passport to implement Facebook Login, we need to create a passport strategy. To do that, create a facebook.strategy.ts file in the src folder and add the code below:



import { Injectable } from "@nestjs/common";
import { PassportStrategy } from "@nestjs/passport";
import { Profile, Strategy } from "passport-facebook";

@Injectable()
export class FacebookStrategy extends PassportStrategy(Strategy, "facebook") {
  constructor() {
    super({
      clientID: process.env.APP_ID,
      clientSecret: process.env.APP_SECRET,
      callbackURL: "http://localhost:3000/facebook/redirect",
      scope: "email",
      profileFields: ["emails", "name"],
    });
  }

  async validate(
    accessToken: string,
    refreshToken: string,
    profile: Profile,
    done: (err: any, user: any, info?: any) => void
  ): Promise<any> {
    const { name, emails } = profile;
    const user = {
      email: emails[0].value,
      firstName: name.givenName,
      lastName: name.familyName,
    };
    const payload = {
      user,
      accessToken,
    };

    done(null, payload);
  }
}

The first argument to PassportStrategy is Strategy which comes from passport-facebook. The second argument tells passport the name of the strategy which in our case is facebook.

To be able to use the newly created strategy, we need to include it as a provider in our app module. Open app.module.ts in the src folder and replace it with:



import { Module } from "@nestjs/common";

import { AppController } from "./app.controller";
import { AppService } from "./app.service";
import { FacebookStrategy } from "./facebook.strategy";

@Module({
  imports: [],
  controllers: [AppController],
  providers: [AppService, FacebookStrategy],
})
export class AppModule {}

Add login route

Finally, we need to add the API endpoint/route for facebook login. In NestJS, routes are handled by controllers.you implement facebook login in app.controller.ts as follows:



import { Controller, Get, UseGuards, HttpStatus, Req } from "@nestjs/common";
import { AuthGuard } from "@nestjs/passport";
import { Request } from "express";

import { AppService } from "./app.service";

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }

  @Get("/facebook")
  @UseGuards(AuthGuard("facebook"))
  async facebookLogin(): Promise<any> {
    return HttpStatus.OK;
  }

  @Get("/facebook/redirect")
  @UseGuards(AuthGuard("facebook"))
  async facebookLoginRedirect(@Req() req: Request): Promise<any> {
    return {
      statusCode: HttpStatus.OK,
      data: req.user,
    };
  }
}

The last two routes are responsible for the entire login flow. The first one initiates facebook login. The second route is where facebook will redirect the user to after a successful login.

Test App

Run in development mode using the following command:



yarn start:dev

Navigate to the facebook endpoint in your browser: http://localhost:3000/facebook. You'll be prompted to log in with facebook as shown below:

After a successful login, you'll be redirected to http://localhost:3000/facebook/redirect and you'll get the response as defined in the facebookLoginRedirect controller. See an example response below:

🎉🎉🎉, you have successfully implemented facebook login. The code for this project can be found on GitHub: https://github.com/elishaking/nestjs-facebook-login

If you encountered any issues, feel free to leave a comment below or reach me @ElishaChibueze.

I love making these articles, so please I'd love to know your suggestion on topics you'll like me to explore.

❤️ the article ?****?**?** I loved making it.

JS Titbits | Sync vs Async

King Elisha — Tue, 07 Jul 2020 13:02:24 +0000

In Javascript, all synchronous code in a given script is executed before any asynchronous code.

For example, take a look at the code below

setTimeout(() => {
  console.log("async");
}, 0);

for (let i = 0; i < 5; i++) {
  console.log("sync...", i);
}

The result of running the above block of code is

sync... 0
sync... 1
sync... 2
sync... 3
sync... 4
async

The delay on the setTimeout function is set to 0, but the handler function is executed last after all synchronous code has been executed.

Binary Tree (Recursive) traversal methods

King Elisha — Fri, 19 Jun 2020 17:57:23 +0000

There are three ways to traverse or visit all the nodes in a tree. They are:

In-order Traversal

This form of traversal works by visiting the left branch of the tree, then the current node, and then the right branch.

Below is an implementation of in-order traversal:

function inOrder(treeNode) {
  if (treeNode) {
    // explore left branch
    inOrder(treeNode.left);

    // visit/print current node
    console.log(treeNode.value);

    // explore right branch
    inOrder(treeNode.right);
  }
}

If we had a simple tree like the one above, with in-order traversal, the node values will be printed in this order:

[40, 20, 50, 10, 60, 30, 70]

Pre-order Traversal

This form of traversal works by first visiting the current node, then the left branch, and finally, the right branch.

Below is an implementation of pre-order traversal:

function preOrder(treeNode) {
  if (treeNode) {
    // visit/print current node
    console.log(treeNode.value);

    // explore left branch
    preOrder(treeNode.left);

    // explore right branch
    preOrder(treeNode.right);
  }
}

If we had a simple tree like the one above, with pre-order traversal, the node values will be printed in this order:

[10, 20, 40, 50, 30, 60, 70]

Post-order Traversal

This form of traversal works by exploring child nodes before the current node.

Below is an implementation of post-order traversal:

function postOrder(treeNode) {
  if (treeNode) {
    // explore left branch
    postOrder(treeNode.left);

    // explore right branch
    postOrder(treeNode.right);

    // visit/print current node
    console.log(treeNode.value);
  }
}

If we had a simple tree like the one above, with post-order traversal, the node values will be printed in this order:

[40, 50, 20, 60, 70, 30, 10]

In the example above, the values of the left and right sub-trees are printed before the root node

Thanks 👍 for making it to the end 👨‍💻 and I really hope you found the content useful.

Leave a comment below or tweet me @ElishaChibueze if you have any questions or suggestions

Sieve of Eratosthenes: Find Prime numbers in a given range

King Elisha — Sun, 14 Jun 2020 15:49:23 +0000

What is it?

The Sieve of Eratosthenes is a simple algorithm for finding all the prime numbers of [2, n]. It works by removing multiples of consecutive numbers.

Implementation

const sieveOfEratosthenes = n => {
  // initially label every number from [0, n] as a prime number
  const primeNumbersSieve = new Array(n + 1).fill(true);

  // since 0 and 1 are not prime numbers, label them as false
  primeNumbersSieve[0] = primeNumbersSieve[1] = false;

  /**
   * we stop the loop when i > sqrt(n) which is equivalent
   * to i * i <= n. this is because the maximum divisor of n
   * is sqrt(n), therefore if we allow values of i > sqrt(n)
   * in the loop, we will end up with a value for i where i * i > n
   */
  for (let i = 2; i * i <= n; i++) {
    if (primeNumbersSieve[i]) {
      /**
       * skip all multiples of i < i * i because they have
       * already been checked
       */
      let k = i * i;
      while (k <= n) {
        // remove all multiples of i starting from i * i
        primeNumbersSieve[k] = false;
        k += i;
      }
    }
  }

  return primeNumbersSieve;
};

The time complexity of the sieve is O(nlog(log(n)))

Migrate React App To TypeScript

King Elisha — Wed, 10 Jun 2020 08:06:53 +0000

For react projects created with create-react-app, it is very easy to migrate to Typescript. This will guarantee type checking and proper linting of the codebase.

Steps

1. Install necessary dependencies

# yarn
yarn add -D typescript @types/node @types/react-dom @types/jest @types/react-router-dom

# npm
npm install --save-dev typescript @types/node @types/react-dom @types/jest @types/react-router-dom

Note: most react/npm packages will require an @types/<package-name> dependency to work with typescript. So add them accordingly

2. Change file extensions

Change component files from .js or .jsx to .tsx
Change other javascript files from .js to .ts
Fix import statements
Fix any other issues that may arise

Since react works with es6 syntax, switching to typescript should raise minimal to no issues

3. Start project

# yarn
yarn start

# npm
npm start

Starting the project will automatically create a tsconfig.json file with all the necessary settings

4. Add Type to variables and functions

Append the type for each variable, parameter and return type for each function or method.

For example, change the following javascript function:

function add(a, b) {
  return a + b;
}

to the following typescript function:

function add(a: number, b: number): number {
  return a + b;
}

Both parameters in the function have a type of number and the function also has a return type of number

5. Define Classes/Interfaces for Complex Data

This includes data from API's and redux state

Thanks 👍 for making it to the end 👨‍💻 and I really hope you found the content useful.

Leave a comment below or tweet me @ElishaChibueze if you have any questions or suggestions

Sorting Algorithms

King Elisha — Sun, 24 May 2020 13:07:09 +0000

As more data gets handled by computers, sorting is one of the biggest problems to solve efficiently.

Now, there are several great languages and frameworks that have sorting algorithms already implemented, so you may never need to write them from scratch. However, to be an effective software engineer, you need to know they work underneath and the trade-offs between each of them for a given problem.

Sorting Algorithms

When choosing a sorting algorithm, one key thing to consider is the scalability in terms of time and space complexities.

The time complexity is the number of operations required to perform a certain computation task.

The space complexity is the amount of memory required to perform a computation task.

Both are denoted by the Big-O notation.

Bubble Sort

This may not be the most performant choice but its implementation is simple and clear enough to understand and replicate. It provides a clear picture of how sorting works.

function bubbleSort(arr) {
  const N = arr.length;

  for (let i = 0; i < N; i++) {
    for (let j = 1; j < N - i; j++) {
      if (arr[j] < arr[j - 1]) [arr[j], arr[j - 1]] = [arr[j - 1], arr[j]];
    }
  }

  return arr;
}

Time Complexity: O(N^2)
Space Complexity: O(1)

For an array of length N, the bubble sort requires N^2 operations to completely sort the array and this is evident in the nested for loop.

By looking at the implementation, it's relatively easy to understand how it sorts the array. For every ith iteration, several comparisons and swapping are done in the second [j] for loop to move the larger numbers to the right.

Selection Sort

This is one of the simpler sorting algorithms to understand but it also has a poor time complexity.

In most cases, the selection sort is usually the slowest of the sorting algorithms available.

function selectionSort(arr) {
  const N = arr.length;

  for (let i = 0; i < N; i++) {
    let minIdx = i;
    for (let j = i + 1; j < N; j++) {
      if (arr[j] < arr[minIdx]) {
        minIdx = j;
      }
    }
    [arr[minIdx], arr[i]] = [arr[i], arr[minIdx]];
  }

  return arr;
}

Time Complexity: O(N^2)
Space Complexity: O(1)

For an array of length N, the selection sort requires N^2 operations to completely sort the array.

For every ith iteration, the index of the minimum item in the range (i, N-1) is determined in the second [j] for loop. Then the minimum item is swapped with the current ith item.

Insertion Sort

This one is a bit more complex than the first two. It can be the fastest of all the sorting algorithms if the data is nearly sorted but performs almost as badly as the two above for random data.

function insertionSort(arr) {
  const N = arr.length;

  for (let i = 1; i < N; i++) {
    if (arr[i] < arr[0]) {
      const val = arr.splice(i, 1)[0];
      arr.unshift(val);
    } else {
      for (let j = 1; j < i; j++) {
        if (arr[i] > arr[j - 1] && arr[i] < arr[j]) {
          const val = arr.splice(i, 1)[0];
          arr.splice(j, 0, val);
        }
      }
    }
  }
  return arr;
}

Time Complexity:

Nearly Sorted Data: O(N)
Random Data: O(N^2)

Space Complexity: O(1)

The three sorting algorithms mentioned above are elementary sorts with a poor average time complexity of O(N^2).

However, the sorting algorithms discussed below perform much better with a time complexity of O(NLog(N)). They take a divide and conquer approach.

Merge Sort

This is one of the most efficient sorting algorithms available and will perform better than others in most cases.

It also preserves the original order for identical items which makes it stable.

function mergeSort(arr) {
  const N = arr.length;
  if (N === 1) return arr;

  const midIdx = Math.floor(N / 2);
  const left = arr.slice(0, midIdx);
  const right = arr.slice(midIdx);

  return merge(mergeSort(left), mergeSort(right));
}

function merge(left, right) {
  const merged = [];
  let leftIdx = 0;
  let rightIdx = 0;

  while (leftIdx < left.length && rightIdx < right.length) {
    if (left[leftIdx] < right[rightIdx]) {
      merged.push(left[leftIdx]);
      leftIdx++;
    } else {
      merged.push(right[rightIdx]);
      rightIdx++;
    }
  }

  return [...merged, ...left.slice(leftIdx), ...right.slice(rightIdx)];
}

Time Complexity: O(Nlog(N))
Space Complexity: O(N)

The merge sort uses a recursive approach to achieve an impressive linearithmic time complexity.

It is clear from the base case of the recursive mergeSort function that the input array of length N is split into N separate parts. These parts are then merged together in the merge function.

Quick Sort

This is very similar to the merge sort but has a more complex implementation. Unlike the merge sort, splitting is done using something called a pivot which is chosen randomly.

It has the same time complexity as the merge sort: O(Nlog(N)). In worst case scenarios, it can have a time complexity of O(N^2)

However, it can perform better than the merge sort under some conditions:

Smaller datasets (typically)
When a good pivot is selected

function quickSort(arr) {
  const N = arr.length;

  sortQ(arr, 0, Math.floor(N / 2));
}

function sortQ(arr, left, right) {
  let pivotIdx;
  let partitionIdx;

  if (left < right) {
    pivotIdx = right;
    partitionIdx = partition(arr, pivotIdx, left, right);

    sortQ(arr, left, partitionIdx - 1);
    sortQ(arr, partitionIdx + 1, right);
  }
  return arr;
}

function partition(arr, pivotIdx, left, right) {
  let pivotValue = arr[pivotIdx];
  let partitionIdx = left;

  for (let i = left; i < right; i++) {
    if (arr[i] < pivotValue) {
      [arr[i], arr[partitionIdx]] = [arr[partitionIdx], arr[i]];
      partitionIdx++;
    }
  }

  [arr[right], arr[partitionIdx]] = [arr[partitionIdx], arr[right]];
  return partitionIdx;
}

Time Complexity:

Good Pivot: O(Nlog(N))
Bad Pivot: O(N^2)

Space Complexity: O(log(N))

The space complexity for quick sort is much better than that of the merge sort, so if memory is a constraint, quick sort is the better option

There are more sorting algorithms to explore but the five discussed so far are used widely. Also, the other algorithms usually have some constraints on the type of data they can sort.

You may never encounter a situation where you need to implement a sorting algorithm from scratch but it's absolutely crucial to know when to use either of the available ones to solve a problem.

Thanks 👍 for making it to the end 👨‍💻 and I really hope you found the content useful.

Leave a comment below or tweet me @ElishaChibueze if you have any questions or suggestions

Euclidean algorithm

King Elisha — Tue, 07 Apr 2020 12:31:36 +0000

Euclidean algorithm

The Euclidean algorithm is one of the oldest numerical algorithms commonly used to solve the problem of computing the greatest common divisor (gcd) of two positive integers.

There are three main implementations of the Euclidean algorithm:

1. Euclidean algorithm by subtraction

Here, we recursively subtract the smaller number from the larger number

/**
 * Recursively subtract the smaller number from the larger number
 * until the two numbers are equal
 *
 * @param {number} a
 * @param {number} b
 */
const gcd = (a, b) => {
  if (a === b) return a;

  if (a > b) return gcd(a - b, b);

  return gcd(a, b - a);
};

The time complexity of the above algorithm is O(a+b) which is linear

2. Euclidean algorithm by division

Here, we use a form of division by to recursively compute the gcd

/**
 * Recursively compute the gcd using some form of division
 *
 * @param {number} a
 * @param {number} b
 */
const gcd = (a, b) => {
  if (a % b === 0) return b;

  return gcd(b, a % b);
};

The time complexity of the above algorithm is logarithmic with O(log(a+b))

3. Binary Euclidean algorithm

/**
 * Recursively compute the gcd using some binary operations
 *
 * @param {number} a
 * @param {number} b
 */
const gcd = (a, b, r = 1) => {
  if (a === b) return r * a;

  if (a % 2 === 0 && b % 2 === 0)
    return gcd(Math.floor(a / 2), Math.floor(b / 2), 2 * r);

  if (a % 2 === 0) return gcd(Math.floor(a / 2), b, r);

  if (b % 2 === 0) return gcd(a, Math.floor(b / 2), r);

  if (a > b) return gcd(a - b, b, r);

  return gcd(a, b - a, r);
};

This one has a time complexity of O(log(a) + log(b))

Thanks 👍 for making it to the end 👨‍💻 and I really hope you found the content useful.

Leave a comment below or tweet me @ElishaChibueze if you have any questions or suggestions

Queues and Doubly Linked Lists

King Elisha — Wed, 18 Mar 2020 12:29:49 +0000

What is a Linked List

A linked list is a data structure that stores a collection of nodes. Each node in a doubly linked list contains data and two pointers. In simple terms, a pointer is a variable that contains the address of some other object in memory.

This first pointer in the doubly linked list holds the memory address of the previous node while the second pointer holds the memory address of the next node in the list.

Time Complexity (Big O)

One great benefit of a doubly linked list is the fact that it enables the insertion of new nodes to the beginning and end of the list in constant time - O(1).

In contrast, a typical array will produce a linear time complexity - O(n) - when inserting to the beginning because the addresses of all the succeeding items in the array must be shifted by 1. This can quickly become inefficient as the array grows in size. Also, a regular linked list produces linear time complexity - O(n) - when inserting an item to the end of the list.

This dual constant time property makes doubly linked lists a good candidate for the implementation of Queues.

Doubly Linked List Implementation



class ListNode {
  constructor(data) {
    this.data = data;
    this.prev = null;
    this.next = null;
  }
}

class DoublyLinkedList {
  constructor() {
    this.size = 0;
    this.head = null;
    this.tail = null;
  }

  /**
   * Add node to the end of the list
   *
   * Time complexity: O(1)
   * @param {any} data
   */
  push(data) {
    const newNode = new ListNode(data);

    if (this.size === 0) {
      this.head = newNode;
      this.tail = newNode;
    } else {
      this.tail.next = newNode;

      newNode.prev = this.tail;

      this.tail = newNode;
    }

    this.size++;

    return newNode;
  }

  /**
   * Remove node from the beginning of the list
   *
   * Time complexity: O(1)
   */
  shift() {
    if (this.size === 0) {
      return null;
    }

    const nodeToRemove = this.head;

    if (this.size === 1) {
      this.head = null;
      this.tail = null;
    } else {
      this.head = nodeToRemove.next;

      this.head.prev = null;
      nodeToRemove.next = null;
    }

    this.size--;

    return nodeToRemove;
  }

  /**
   * Return list items
   */
  toString() {
    const list = [];
    let currentNode = this.head;

    while (currentNode !== null) {
      list.push(JSON.stringify(currentNode.data));
      currentNode = currentNode.next;
    }

    return list.toString();
  }
}

There are more methods that can be added to the DoublyLinkedList class, but we only need push and shift to implement the basic queue operations as explained below.

What is a Queue

A queue is a collection of items that supports only two operations: the add or enqueue operation and the remove or dequeue operation.

A typical implementation for a queue will involve the storage of the queue items in an array. This is not a great solution because the dequeue operation requires the removal of the first element in the array which is a linear time - O(n) - operation.

Consequently, a doubly linked list is a great alternative for storing queue items because it enables both the enqueue and dequeue operations to be performed in constant time - O(1).

Queue Implementation



class Queue {
  constructor() {
    this._items = new DoublyLinkedList();
  }

  /**
   * Add an item to the queue
   *
   * Time complexity: O(1)
   * @param {any} newItem
   */
  enqueue(newItem) {
    return this._items.push(newItem);
  }

  /**
   * Remove an item from the queue
   *
   * Time complexity: O(1)
   */
  dequeue() {
    return this._items.shift();
  }

  /**
   * Return number of items in the queue
   */
  size() {
    return this._items.size;
  }

  /**
   * Return Queue items
   */
  toString() {
    return `Queue {
      size: ${this.size()}
      items: [${this._items.toString()}]
    }`;
  }
}

In the above Queue class, the dequeue and enqueue methods both have constant time complexity. This meets the requirement for a good queue implementation.

Queue Test



const queue = new Queue();
console.log(queue.toString());
/*
  Queue {
    size: 0
    _items: []
  }
*/

queue.enqueue(10);
queue.enqueue(-19);
queue.enqueue(1000);
console.log(queue.toString());
/*
  Queue {
    size: 3
    _items: [10,-19,1000]
  }
*/

queue.dequeue();
console.log(queue.toString());
/*
  Queue {
    size: 2
    _items: [-19,1000]
  }
*/

Find out more about the applications of queues in this article:

Stacks and Queues

King Elisha ・ Feb 28 '20

#javascript #oop

Thanks 👍 for making it to the end 👨‍💻 and I really hope you found the content useful.

Leave a comment below or tweet me @ElishaChibueze if you have any questions or suggestions

Stacks and Queues

King Elisha — Fri, 28 Feb 2020 08:50:45 +0000

Stacks and Queues are two basic data structures that have many practical applications in software development

What is a Stack

A stack is a collection of items that supports only two operations: the push operation and the pop operation. A stack is a LIFO (Last In First Out) data structure which means that the last item pushed into a stack must be the first item popped from the stack.

Usually, the push and pop operations of a typical stack data structure are constant time operations denoted by O(1) irrespective of the size of the stack.

There is no Stack object available in JavaScript out of the box but a stack can easily be represented by an Array object that only allows push and pop operations.

The push and pop operations of a JavaScript Array are both constant time operations [O(1)] which meets the requirement for a good stack implementation

class Stack {
  constructor(items) {
    this._items = items;
  }

  push(newItem) {
    this._items.push(newItem);
  }

  pop() {
    return this._items.pop();
  }

  size() {
    return this._items.length;
  }
}

const x = new Stack([1, 2, 3]); // stack: [1, 2, 3]
x.pop(); // stack: [1, 2]
x.push(100); // stack: [1, 2, 100]

There are many good use cases for the stack data structure. A simple example is reversing a string

const firstName = "King";
const nameStack = new Stack(firstName.split(""));
let reversedName = "";

for (let i = 0; i < firstName.length; i++) {
  reversedName += nameStack.pop();
}
console.log(reversedName); // gniK

JavaScript also uses something called a call stack while executing scripts

More Applications of the Stack data structure

Browser navigation
Parsing and Processing Mathematical expressions

What is a Queue

A queue is a collection of items that supports only two operations: the add or enqueue operation and the remove or dequeue operation. Unlike a stack, a queue is a FIFO (First In First Out) data structure which means that the first item added to a queue must be the first item removed from the queue.

Similar to the stack, the add and remove operations of a queue are constant time operations.

There also no Queue object available in JavaScript out of the box but a stack can easily by represented by an Array object that only allows enqueue and dequeue operations

As mentioned earlier, the push operation on a JavaScript Array is a constant time operation which makes it ideal for implementing the enqueue operation for the queue. The shift operation on a JavaScript Array can be used to implement dequeue, however, the shift operation has a linear time complexity [O(n)] and can get slow if the queue grows big enough. A clever work-around is shown below

class Queue {
  startPos = 0;

  constructor(items) {
    this._items = items;
  }

  enqueue(newItem) {
    this._items.push(newItem);
  }

  dequeue() {
    if (this.startPos < this._items.length) 
      return this._items[this.startPos++];
  }

  size() {
    return this._items.length - this.startPos;
  }
}

const x = new Queue([1, 2, 3]); // queue: [1, 2, 3]
x.enqueue(10); // queue: [1, 2, 3, 10]
x.dequeue(); // queue: [2, 3, 10]
x.size(); // 3
x.enqueue(1000); // queue: [2, 3, 10, 1000]

In the above Queue class, the dequeue implementation has a constant time complexity which meets the queue data structure requirement

The queue is widely applied in tackling several programming problems. A simple example for queues is checking for a palindrome

function palindrome(word) {
  const wordQueue = new Queue(word.split(""));

  for (let i = word.length - 1; i > 0; i--) {
    if (word[i] !== wordQueue.dequeue()) return false;
  }

  return true;
}

palindrome("deed") // true
palindrome("King") // false
palindrome("level") // true

More Applications of the Queue data structure

Storing a number of computer processes to be executed in order
SMS messaging

Thanks 👍 for making it to the end 👨‍💻 and I really hope you found the content useful.

GitFlow Workflow in a Nutshell

King Elisha — Tue, 18 Feb 2020 08:18:28 +0000

What is it?

The Gitflow workflow is a strict branching model that provides a robust framework for managing large projects and teams. This workflow assigns specific responsibilities to named branches in the repository and defines how and when they should interact.

How it works

The five main branches used in this workflow include

master branch
develop branch
feature branch
release branch
hotfix branch

Master Branch

The sole responsibily of this branch is to contain the release and hotfix history of the project. Only the release and hotfix branches can be merged into this branch.

Develop Branch

This branch is derived from the master branch at the beginning of the project.

git init
git checkout -b develop
git push -u origin develop

It serves as the integration branch for all features contained in respective feature branches.

Feature Branch

When a new feature is to be developed, a feature branch is created from develop.

git checkout develop
git checkout -b feature-branch
git push -u origin feature-branch

When development is complete, it is merged back into the develop branch.

git checkout develop
git merge feature-branch

feature branches are never allowed to interact directly with the master branch

Release Branch

When it's time for a new release, a release branch is created from develop. This branch is used to integrate all the features - since the last release - and fix any bugs that may arise

git checkout develop
git checkout -b release/2.2.3

A version number is usually appended to each release branch upon creation. When the release is ready, it is merged into the master branch.

git checkout master
git merge release/2.2.3

The release branch must be merged back into develop because it will contain relevant changes from the last release that should be integrated back into develop

git checkout develop
git merge release/2.2.3

Hotfix Branch

When a bug is detected in the master branch, a hotfix or maintenance branch is created from the master branch to resolve the issues.

git checkout master
git checkout -b hotfix-branch

Afterwards, it is merged into both master and develop branches

git checkout master
git merge hotfix-branch

git checkout develop
git merge hotfix-branch

Summary

A good demonstration of the Gitflow workflow can be seen below

git init
git checkout -b develop
git checkout -b feature_branch
# work happens on the feature branch - multiple feature branches can be created
git checkout develop
git merge feature_branch
git checkout -b release/0.1.0
# work happens on the release branch
git checkout master
git merge release/0.1.0
git checkout develop
git merge release/0.1.0

# if issues arise in master
git checkout master
git branch -d hotfix_branch
# work happens on the hotfix branch
git checkout master
git merge hotfix_branch
git checkout develop
git merge hotfix_branch

Array Operations and Methods in JavaScript

King Elisha — Mon, 17 Feb 2020 19:48:03 +0000

Arrays are indispensable data-structures in javascript and understanding how to effectively use them to solve problems is a crucial skill to master.

Arrays are represented by a robust object in JavaScript that provides several useful methods and operations to work with. I'll be going over most of them in this article

Creating arrays

Arrays can be initialized directly like so

const arr = [1, 4, 8, 2, 2, 4, 5];

or by the Array constructor

// create an array of 3 undefined items
const arr = new Array(3);

// assign the value of 10 to all items
arr.fill(10); // [10, 10, 10]

// in one line
const newArr = new Array(3).fill(10); // [10, 10, 10]

JavaScript also provides some useful methods for creating arrays.

Array.from

Creates an array from another array

const arr = Array.from([1, 4, 5]); // [1, 4, 5]

Array.of

Creates an array from every argument it receives

const arr = Array.of(1, 4, 5); // [1, 4, 5]

Iterating over arrays

There are several methods available for array iteration in JavaScript

forEach

You can iterate over the array to apply an operation to each item using forEach

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

arr.forEach(item => item + 100); // [101, 102, 103, 104, 105]

map

map allows you to create a new array by applying an operation/function to each item

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

const newArr = arr.map(item => item + 100); // [101, 102, 103, 104, 105]

// arr remains the same

Unlike forEach, it does not modify the original array

filter

Loops through the array and return only the items that satisfy a given condition

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

// get all items greater than 2
const greaterThanTwoArr = arr.filter(item => item > 2); // [3, 4, 5]

reduce

The reduce function loops through the array, applying an operation/function to each element and an accumulator from left to right and returns the accumulated value

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

const sum = arr.reduce((total, item) => total + item, 0); // 8

reduceRight

Identical to reduce but works from right to left

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

const sum = arr.reduceRight((total, item) => total + item, 0); // 8

Modifying arrays

JavaScript provides several useful methods and operations for modifying arrays

push

Adds an item to the end of the array

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

arr.push(100); // [1, 2, 3, 4, 5, 100]

pop

Removes an item from the end of the array

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

arr.pop(); // [1, 2, 3, 4]

unshift

Adds an item to the beginning of the array

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

arr.unshift(100); // [100, 1, 2, 3, 4, 5]

shift

Removes an item from the beginning of the array

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

arr.shift(); // [2, 3, 4, 5]

splice

Removes an item from a specified index in the array.

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

// remove item at index 1
arr.splice(1, 1); // [1, 3, 4, 5]

splice can also remove multiple items from a start index.

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

// remove 2 items starting from index 1
arr.splice(1, 2);

slice

This method does not modify the array. It creates a subset of the array from a given startIndex to endIndex - 1.

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

// remove item at index 1
arr.slice(1, 1); // []
arr.slice(1, 3); // [2, 3]

// without endIndex
arr.slice(2); // [ 3, 4, 5 ]
arr.slice(1); // [ 2, 3, 4, 5 ]

reverse

Reverses the items in the array

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

arr.reverse(); // [5, 4, 3, 2, 1]

concat

Adds the items of another array to the end of the original array

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

const newArr = arr.concat([100, 200, 300]); // [1, 2, 3, 4, 5, 100, 200, 300]

spread operator

This operator is similar in function to the concat method but offers more flexibility

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

const newArr = [...arr, ...[100, 200, 300]]; // [1, 2, 3, 4, 5, 100, 200, 300]

Add to the beginning

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

const newArr = [...[100, 200, 300], ...arr]; // [100, 200, 300, 1, 2, 3, 4, 5]

Complex combinations

const arr = [1, 2, 3, 4, 5];
const arr2 = [100, 200, 300];

const newArr = [...arr2, ...arr, 10, 9, ...arr, -10]; // [ 100, 200, 300, 1, 2, 3, 4, 5, 10, 9, 1, 2, 3, 4, 5, -10 ]

sort

Sorts the items in the array according to a given comparison function

const arr = [100, -2, 30, 4, 5];

// sort in ascending order
arr.sort((a, b) => (a > b ? 1 : -1)); // [ -2, 4, 5, 30, 100 ]

// sort in descending order
arr.sort((a, b) => (a < b ? 1 : -1)); // [ 100, 30, 5, 4, -2 ]

Searching arrays

There are several convenience methods for finding items in arrays or verifying a condition

indexOf

Finds the index of the first occurrence of a given item within an array

const arr = [1, 2, 3, 2, 2, 4, 5];
arr.indexOf(2); // 1
arr.indexOf(5); // 4
arr.indexOf(100); // -1
arr.indexOf(10); // -1

includes

Checks if the array contains the specified item

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

arr.includes(10); // false
arr.includes(2); // true

find

This method returns the first item in the array that satisfies a given condition

const arr = [1, 4, 8, 2, 2, 4, 5];
arr.find(item => item % 2 === 0); // 4
arr.find(item => item / 2 === 4); // 8
arr.find(item => (item * item) / 2 === 2); // 2

findIndex

Similar to find except that it returns the index

const arr = [1, 4, 8, 2, 2, 4, 5];
arr.findIndex(item => item % 2 === 0); // 1
arr.findIndex(item => item / 2 === 4); // 2
arr.findIndex(item => (item * item) / 2 === 2); // 3

some

Checks if one or more items in the array satisfy a given condition

const arr = [1, 4, 8, 2, 2, 4, 5];
arr.some(item => item > 2); // true
arr.some(item => item % 8 === 0); // true
arr.some(item => item < 0); // false

every

Checks if all items in the array satisfy a given condition

const arr = [1, 4, 8, 2, 2, 4, 5];
arr.every(item => item > 0); // true
arr.every(item => item % 1 === 0); // true
arr.every(item => item < 0); // false