Coding Bootcamp Week 4: Review day, Asynchronous Callbacks, Internet & Promises

JavaScript Fundamentals

Photo by Markus Winkler on Unsplash

The week began with a monthly review which consisted of a coding sprint on previously learnt topics such as array methods, object-oriented programming, closures, and recursion.

We employed a test-driven development approach to demonstrate our understanding of the topics and of good TDD practices.

CallBack

We learnt the significance of callbacks and the distinction between blocking and non-blocking input/output operations.

We delved into the intricacies of asynchronous functions, how they work in terms of background threads, the event loop, and the task queue.

Background threads are managed by the Node API, which stores delayed or async functions. Once the data is received or the time has lapsed, the function is added to the task/callback queue (First In First Out), rather than the call stack (Last In First Out), to ensure that it is not invoked immediately.

The event loop in Node.js is tasked with checking whether the call stack is empty and then pushing the first function in the queue onto the call stack, allowing it to be invoked.

We also covered the handling of errors, multiple asynchronous requests, response ordering, and inversion of control.

Callback Hell | Pyramid of Doom

How the Internet Works

We covered how data is sent over the internet from client to server by using CRUD (Create, Read, Update, and Delete) methods to make requests.

I summarised most of this in my — Network Basics article.

Here’s a series on how the internet works.

const https = require("https");

const options = {
  hostname: "***.com",
  path: "/api/***",
  method: "GET",
};

const request = https.request(options, (response) => {
  // do something with response
});

request.end();

Promises

Promises are a layer of abstraction over callbacks and avoids you getting into callback hell. We use promises as placeholders for async process, the .then() and .catch() methods are used to handle resolved states of a promise.

const inquirer = require('inquirer')
const axios = require('axios')

function getSinglePokemon() {
   return inquirer
     .prompt([
       {
         type: "input",
         name: "number",
         message: "Enter a number",
       },
     ])
     .then(({ number }) => {
       return axios
         .get(`https://pokeapi.co/api/v2/pokemon/${number}`)
         .then((response) => {
           console.log(response.data.name);
         })
         .catch((err) => {
            if (err.response.status === 404) console.log('Pokemon does not exist')
           else console.log(err);
         });
     });
}

getSinglePokemon()

The function above uses third-party promise-based libraries — axios is used to make HTTPS requests and inquirer for interactive prompts. When invoked, the function asks the user to input a number and finds the name of the Pokemon at that number.

Links for the Week

• Codecademy Promises
• A series on How the Internet Works
• Asynchronous JS
• Inquirer
• Axios

Emotional check ✔️

As the weeks progress, the learning experience becomes increasingly intense and interesting. The different concepts are taught in rapid successions, which can mean that sometimes it is challenging to fully solidify the previous knowledge before moving on to the next.

But I guess that is the nature of a bootcamp, fast-paced. I spent some time over the weekend to revisit some topics that required a deeper understanding.

Next week, we embark on a new journey — Backend.

I enjoyed pair programming this week, mostly for its social aspect but I also appreciate gaining a unique perspective on how others approach problem-solving.

Leap through time

• Week 1: Command line, Git & GitHub, JavaScript Basics & Introduction to HTML/CSS
• Week 2: Node.js, NPM, Test Driven Development, Pair Programming & Closure
• Week 3: Recursion, Object Oriented Programming, Data Structures — Stacks & Queues
• Week 4 👀
• Week 5: HTTP, Express, Model-View-Controller (MVC) Pattern & SQL
• Week 6: Node Postgres, Supertest & Error Handling with Express
• Week 7: Backend Project, Async Await & CICD
• Week 8: DOM, React- Components, State & Hooks
• Week 9: API Calls, React — Router, Context & Optimistic Rendering
• Week 10: Frontend Project, Error Handling, Custom Hooks & Class-Based Components