DEV Community: Mark Abeto

Notification system for a grocery app with React and NodeJS

Mark Abeto — Wed, 15 Mar 2023 12:23:10 +0000

TL;DR

In this guide, we’ll make a simple shoping list webapp with Node and Express. Then, we’ll be using Novu as an open source notification system to send email reminders about our groceries on the day we need to get them.

Getting Some Groceries

I’ll admit I’m not the best when it comes to keeping track of things. Half the time, when I go to get groceries, I end up missing a chunk of stuff that totally slipped my mind. While I could easily just write things down, I’m also a dev and like to make things difficult for myself. So let’s throw something together!

In this article, we’ll be going over a simple shopping list that we’ll create with Node.js, as well as some pointers on how we can use the Novu platform to send emails from our API.

Setting Up Our Project

If you’d like to see the full project Github, you can check it out here.

Naturally, we’ll need to start our project somehow. The first step we need to do is to create a project folder and then add in a basic webpage.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./styles.css">
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
  <script src="https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.0/dist/index.umd.min.js"></script>
  <title>Grocery Notification</title>
</head>
<body>
    <div class="container">
      <div class="input">
        <input name="Enter new item" id="grocery-input"  placeholder="Enter new grocery item"></inp>
        <i class="uil uil-notes notes-icon"></i>
      </div>

      <div class="datepicker-container">
        <input id="datepicker" placeholder="Schedule Grocery Date" type="text"/>
      </div>

      <h1 class="title">Grocery Items</h1>
      <ul class="grocery-list">
        <li class="grocery-list-item" >
          <span class="grocery-item">Eggs</span>
          <i class="uil uil-trash delete-icon"></i>
        </li>
      </ul>

      <button class="submit" type="button">Schedule</button>
    </div>
    <div class="error notification"></div>
    <div class="success notification"></div>
    <script src="./script.js"></script>
</body>
</html>

Our markup is pretty simple actually. We have our input where we specify the grocery item we need to add and the list of items. Lastly, we have an input date where we specify the date we want to be reminded.

We’re going to use a third-party date picker library called easepick. It’s a pretty simple library to drop into our app, and we’ll use it alongside icons from Unicons.

We’ll use some styling for our site too, which you can find here:

styles.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;1,300&family=Roboto&display=swap');

* {
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #eee;
  height: 100vh;
  padding: 0;

}

.container {
  position: relative;
  max-width: 500px;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 3px 5px rgba(0,0,0,0.1);
  padding: 30px;
  margin: 85px auto;
  border-radius: 6px;
}

.container .input {
  position: relative;
  height: 70px;
  width: 100%
}

.container .datepicker-container {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}

.container input#datepicker {
  padding: 8px;
  outline: none;
  border-radius: 6px;
  border: 1px solid #cecece;
}

input#grocery-input {
  height: 100%;
  width: 100%;
  outline: none;
  border-radius: 6px;
  padding: 25px 18px 18px 18px;
  font-size: 16px;
  font-weight: 400;
  resize: none;
}

.notes-icon {
  position: absolute;
  top: 50%;
  font-size: 15px;
  right: 20px;
  transform: translateY(-50%);
  font-size: 18px;
  color: #828282;
}

.title {
  text-align: center;
  margin-top: 25px;
  margin-bottom: 0px;
}

.grocery-list {
  margin-top: 30px;
}

.grocery-list .grocery-list-item {
  list-style: none;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #eee;
  padding: 15px;
  border-radius: 6px;
  position: relative;
  margin-top: 15px;
}

.grocery-list .grocery-item {
  margin-left: 15px;
}

.grocery-list .delete-icon {
  position: absolute;
  right: 15px;
  cursor: pointer;
}

button.submit {
  margin-top: 40px;
  padding: 12px;
  border-radius: 6px;
  outline: none;
  border: none;
  width: 100%;
  background-color: #0081C9;
  color: white;
  cursor: pointer;
}

.notification {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 250px;
  height: auto;
  padding: 5px;
  margin-top: 5px;
  border-radius: 6px;
  color: white;
  text-align: center;
  display: flex;  
  justify-content: center;
  align-items: center;
  opacity: 0;
}

.error {
  background-color: #FF5733;
}

.success {
  background-color: #0BDA51;
}

.notification.show {
  opacity: 1;
  -webkit-animation: fadein 0.5s, fadeout .5s 1.5s;
  animation: fadein 0.5s, fadeout .5s 1.5s;
}

@keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 5%; opacity: 1; }
}

@keyframes fadeout {
  from {top: 5%; opacity: 1;}
  to {top: 0; opacity: 0;}
}

Now that we have the looks, we need the functionality. So let’s add some JavaScript too:

script.js

window.addEventListener('DOMContentLoaded', () => {
  const ulElement = document.querySelector('.grocery-list');
  const submitElement = document.querySelector('.submit');
  const inputElement = document.querySelector('#grocery-input');
  const errorElement = document.querySelector('.error');
  const successElement = document.querySelector('.success');
  let dateSelected = null;

  const showNotificationMessage = (element, errorMessage) => {
    if (element.classList.contains('show')) {
      return;
    }
    element.textContent = errorMessage;
    element.classList.add('show');

    setTimeout(() => {
      element.classList.remove('show');
    }, 2000)
  }

  const datePicker = new easepick.create({
    element: '#datepicker',
    css: [
      "https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.0/dist/index.css"
    ],

    zIndex: 10,
    setup(picker) {
      picker.on('select', (e) => {
        dateSelected = e.detail.date;
      })
    }
  });

  ulElement.addEventListener('click', (e) => {
    if (e.target.tagName === 'I') {
      ulElement.removeChild(e.target.closest('li'));
    }
  })

  inputElement.addEventListener('keyup', (e) => {
    const value = e.target.value;

    if (e.keyCode === 13 && value.trim()) {
      const li = document.createElement('li');
      li.classList.add('grocery-list-item');

      const span = document.createElement('span');
      span.classList.add('grocery-item');
      span.textContent = value;

      const icon = document.createElement('i');
      icon.classList.add('uil', 'uil-trash', 'delete-icon');

      li.appendChild(span);
      li.appendChild(icon);

      ulElement.appendChild(li);

      inputElement.value = '';
    }
  });

  submitElement.addEventListener('click', (e) => {
    const groceryItems = [...document.querySelectorAll('span.grocery-item')].map(element => ({
      item: element.textContent
    }));

    if (!dateSelected) {
      return showNotificationMessage(errorElement, 'Please select the grocery date.');
    }

    const date2DaysBefore = new Date(dateSelected.setDate(dateSelected.getDate() - 1));

    if (new Date() > date2DaysBefore) {
      return showNotificationMessage(errorElement, 'Please select a date two days or more after this day.');
    }

    if (!groceryItems.length) {
      return showNotificationMessage(errorElement, 'Please add grocery items.');
    }

    fetch('http://localhost:3000/grocery-schedule', {
      method: 'POST',
      body: JSON.stringify({
        scheduledGroceryDate: dateSelected.toISOString(),
        groceryItems
      }),
      headers: {
        'content-type': 'application/json'
      },
      mode: 'cors'
    })
      .then(resp => resp.json())
      .then((resp) => {

        while (ulElement.lastChild) {
          ulElement.removeChild(ulElement.lastChild);
        }
        showNotificationMessage(successElement, resp.message);
      })
      .catch(e => console.log(e))
  })
})

In our script.js file, we:

Initialize our easepick instance, and in the setup method, we are listening to the select event so we can get the date value.
For ulElement we’re listening for the click event, and in the callback, we’re checking for the I element because that is the delete button for our unordered list.
In inputElement we’re listening for keyup event so that we can add a new item in the unordered list element.
And lastly, submitElement is listening for the click event for this element and will send the request to our API will trigger scheduling.

We will be triggering the email the day before the scheduled date to remind us earlier.

This is what the web app looks like in the front end with one grocery item.

Creating Our API

Now we’ll be needing to create our backend with Node and Express. Specifically, we need Node version 18.12.0. There’s a command line utility that we can use to switch to the version we need.

mkdir api && cd api && npm init -y && npm install express cors @novu/node

What we did here is that we created the API folder and after that, initialize our node project with the npm init -y command using the default configuration. After that, we installed the libraries that we will be using. We’re not saving our data in the database, but we’ll get to that later. We also installed the Novu @novu/node package so that we can notify from our API.

package.json

{
  "name": "grocery-notify-app",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@novu/node": "^0.11.0",
    "cors": "^2.8.5",
    "express": "^4.18.2"
  },
  "type": "module"
}

config.js

const API_KEY = 'API_KEY'; // Novu Dashboard -> Settings -> Api Keys Tab
const SUBSCRIBER_ID = 'SUBSCRIBER_ID'; // subscriber id created by the sdk or from the workflow
const EMAIL = 'TO_EMAIL'; // your EMAIL to receive the notification
const PORT = 3000;

export {
  API_KEY,
  EMAIL,
  SUBSCRIBER_ID,
  PORT
}

We will be getting API_KEY and the SUBSCRIBER_ID from the Novu Dashboard later.

app.js

import express from "express";
import cors from "cors";
import { API_KEY, SUBSCRIBER_ID, EMAIL, PORT } from "./config.js";
import { Novu } from "@novu/node";

const novu = new Novu(API_KEY);
const app = express();

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.post('/grocery-schedule', async (req, res) => {
  const { scheduledGroceryDate, groceryItems } = req.body;

  try {
    res.status(200).send({ message: "Grocery Reminder Scheduled." })
  } catch (e) {
    console.log(e);
    res.status(500).send({
      message: 'Something went wrong, when scheduling the grocery reminder.'
    })
  }
});

app.listen(PORT, () => {
  console.log(`server listening at port ${PORT}`);
})

In our app.js we have one endpoint: /grocery-schedule. This is where we will handle the notification that we receive in our email. Using Novu is really easy, getting the Novu constructor from the module and creating a new Novu instance. Grab your API_KEY from your Novu account dashboard.

What is Novu?

Basically, Novu is a platform for implementing, configuring and managing notifications in our application. It can manage:

Email
SMS
Chat
Push Notifications

All on one platform! Novu makes it easier when building real-time applications, all we need to do is to configure and trigger the notification in our code. You can read more about Novu here. You can easily create an account with Novu with your GitHub account, which is probably the fastest for this tutorial.

When you first see the Novu dashboard, you will be seeing the dashboard.

As I said earlier, we can get the API key here in the dashboard, specifically in Settings → Api Keys.

After that, we need to make a notification template that we will trigger in our API. Click **Notifications* and click the New button on the far right.

Put the necessary details about the notification template like the Notification Name, Notification Identifier, and Notification Description. Before we create the workflow, let’s take a look at the Integrations Store tab.

As I said earlier, Novu has a list of notification integration options that you can work with like email, sms, chat and push notifications. This is where you integrate the Notification Template that we made earlier into a specific provider. We’ll use Mailjet as the email provider to send the grocery reminder to a specific email.

First, your email must have a valid domain to make this work. I’ll be using my work email for this.

You can get your Mailjet API key and secret key in your Account Settings → Rest API → API Key Management (Primary and Sub-account).

Copy the API key and secret key and go to Novu Dashboard → Integrations* Store → Mailjet Provider and paste it. Make sure to include the email that you used for Mailjet.

After this, we need to edit our workflow editor for our notification. In your Novu dashboard go to Notifications and click the notification that you created earlier. For me it’s grocery-notification.

Once we’ve done that, click the Workflow Editor tab and in that in the editor click the circle with the plus sign below the Trigger component and select Delay on the right side.

There are two types of Delay, Regular and Scheduled. For this, we’ll use the Scheduled type. We also need to specify the name of the field that Novu will be using for email. In my example, I will be using the sendAt field.

And below the Delay component click the circle with the plus sign again and select Email.

Our workflow should look like this:

Lastly, we also need to configure our email template. Click the Edit Template button on the right below Email Properties. After the redirection to the Edit Email Template UI, the email you’re seeing here is the email that you used in the Mailjet configuration earlier. Update the email subject to Grocery Reminder and click the Custom Code and copy this Handlebars code below:

<div>
  <h1>Hi, It's time for you to buy your grocery items.</h1>
  <h2>{{dateFormat date 'MM/dd/yyyy'}}</h2>
  {{#each groceryItems}} 
    <li>{{item}}</li>
  {{/each}}
</div>

This code is pretty simple. In the h2 we’re formatting the date value to Month/Day/Year format, and in the part where we use the #each we’re just iterating in our groceryItems array. We’re also using the item property that we get from each item iteration in the list item element, and we need to specify the /each after the iteration.

After that, click the Update button on the top right side.

Finishing Our API

With all of that out of the way, it’s time to complete the API of our app. Update the config.js file with the API key you got earlier from the Novu Dashboard, the SUBSCRIBER_ID, and email from Notifications in the dashboard. The EMAIL is optional here to use since the SUBSCRIBER_ID will use that same value, but for example purposes, we will provide it.

And our updated config.js file:

const API_KEY = 'YOUR_API_KEY_FROM_THE_SETTINGS_TAB'; // Novu Dashboard -> Settings -> Api Keys Tab
const SUBSCRIBER_ID = '63dd93575fd0df47313ee933';
const EMAIL = 'mac21macky@gmail.com';
const PORT = 3000;

export {
  API_KEY,
  EMAIL,
  SUBSCRIBER_ID,
  PORT
}

Lastly, we need to update our app.js file to trigger Novu for scheduling our notification:

import express from "express";
import cors from "cors";
import { API_KEY, SUBSCRIBER_ID, EMAIL, PORT } from "./config.js";
import { Novu } from "@novu/node";

const novu = new Novu(API_KEY);
const app = express();

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.post('/grocery-schedule', async (req, res) => {
  const { scheduledGroceryDate, groceryItems } = req.body;
  try {
    // sendAt - 9 am on the `scheduledGroceryDate`
    const sendAt = new Date(new Date(scheduledGroceryDate).setHours(9, 0, 0, 0)).toISOString();

    await novu.trigger('grocery-notification', {
      to: {
        subscriberId: SUBSCRIBER_ID,
        email: EMAIL
      },
      payload: {
        sendAt,
        date: new Date(scheduledGroceryDate).toISOString(),
        groceryItems
      }
    });
    res.status(200).send({ message: "Grocery Reminder Scheduled." })
  } catch (e) {
    console.log(e);
    res.status(500).send({
      message: 'Something went wrong, when scheduling the grocery reminder.'
    })
  }
});

app.listen(PORT, () => {
  console.log(`server listening at port ${PORT}`);
});

Basically, what we’re doing here is creating the scheduled date value sendAt. This will have the value of 9 am of scheduledGroceryDate. For example, if we provide the value of March 12, 2023, then the sendAt value will be March 12, 2023 9:00 am. The trigger method from the novu instance from the name itself will trigger our notification. It accepts the Trigger ID as the first parameter, which you can get from Novu.

In the to object we provide the SUBSCRIBER_ID and EMAIL from our config.js and in the payload object we provide sendAt, date and groceryItems. Remember that sendAt and date fields must be in ISO string format.

Okay! Let’s test our application. I’m gonna add 5 new items to our grocery list: Milk, Bread, Water, Butter, and Grapes.

Press the Schedule button, and if went successfully, it will pop up a message that tells us it’s been scheduled.

Going back to Novu, in the Activity Feed, you can see if that particular reminder is scheduled.

And when you click the first one you can know the details of that notification.

The execution for this notification is delayed because we specified it as a Delay type earlier and you can also see the time when this notification will be executed.

This is a sample email that you will get if it all goes as planned.

If you want to expand this project, you can add a database to our project for saving grocery items. Then, show the list of grocery dates that are scheduled on another page in our web app.

Closing the Shopping List

So far, we’ve created an app that uses some simple Node.js and Express to make a simple grocery list. Then, we use the power of Novu to schedule notifications and send emails to remind ourselves. On the surface, it’s pretty simple, but a lot of room for added functionality. You can set up user accounts and share it with your family, or maybe add SMS notifications too!

Novu is a great open source notification system that you can use for notifications to integrate with your applications. It’s free to get started, and a very powerful tool in the right hands.

If you’d like to see the full project Github, you can check it out here.

Get Better with TypeScript using Express

Mark Abeto — Sat, 30 Oct 2021 07:48:17 +0000

Hi Guys Good Day!

Today, we will make a Rest API using these two technologies. You may think that this is another Rest API like all the others but in this example, we will be using a lot of TypeScript advanced features that will be really helpful for this demo. But we will be more focused on using TypeScript instead of the business logic implementation. I suggest using VSCode in this example because it provides a lot of features with TypeScript.

The API we will be making will focus on Dogs. Our endpoints will look like this.

GET /api/v1/dogs
GET /api/v1/dogs/:id
POST /api/v1/dogs
PUT /api/v1/dogs/:id
DELETE /api/v1/dogs/:id

First, make a folder, you can name it whatever you want. I will name mine express-ts-api.

  mkdir express-ts-api

After that initialize a node project.

 npm init --y

We also need to install TypeScript.

 npm i -D typescript

We also need to install type definitions for these Express and Node.

 npm i -D @types/express @types/node

And also, we will install Express

 npm i express

Lastly, configure this project to be a TypeScript project.
Using this command

  tsc -init

Our tsconfig.json will look like this.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./build",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  }
}

Put simply, this config tells us that our code will be outputted on es5 syntax ("target": "es5") and also that code will be using the CommonJS module system ("module": "commonjs") in the directory build ("outDir": "./build") base on the contents in the src directory ("rootDir": "./src") and the typescript language service should enforce strong type checking ("strict": "true") and lastly we want to import modules in different Module Systems like commonjs follow the specifications of the ES6 module ("esModuleInterop": true) without this option our imports will look like this

import * as express from 'express';
// instead of this
// import express from 'express';

Our package.json will look like this.

{
  "name": "express-ts-api",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.17.13",
    "@types/node": "^16.11.4",
    "typescript": "^4.4.4"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

I will assume that you already know nodejs, so I will not explain the contents of this file.

Ok, let's get started. Make the src directory

 mkdir src

Inside the src folder make the app.ts file.

import express from 'express'

const app = express()

interface Dog {
  name: string
  breed: 'labrador' | 'german shepherd' | 'golden retriever'
  adopted_at: Date | null
  birth_date: Date | null
}

Btw, every HTTP method that we use in the app object has five generic types that we can provide our custom types. The arrangement of the types are Params, ResBody, ReqBody, ReqQuery and Locals. More in Generics here. Basically, Generics helps us reuse code but in our case, we can reusable types.

app.get<Params,ResBody,ReqBody,ReqQuery,Locals>('/api/v1/dogs',
(req,res) => { 

})

We will only be using the first four generic types in this example. By default the Params generic type have a value of a type of an empty object. ResBody and ReqBody has a type of any, and lastly the ReqQuery has a type of ParsedQs.

We will be providing our own types instead of the default types provided by express.

GET /api/v1/dogs

app.get<
{},
{ data: Dog[], message: string },
{},
{ page: number, limit: number, breed: 'labrador' | 'german shepherd' | 'golden retriever' }>
('/api/v1/dogs', (req,res) => { 
  // your implementation
})

In this endpoint, we will be getting a list of dogs so we will not pass a type in the Params generic because we are not getting a specific dog. We are getting a list of dogs in this endpoint, so we will leave it as an empty object. Second, the ResBody is the type that we will send in res.send method, in this case, we will send an object that has two properties data whose type is an array of Dogs that we provided earlier and message whose type is a string an additional information for the response. Third, the ReqBody is an empty object type because we won't be receiving any data in this endpoint. And lastly, in the ReqQuery we will be passing an object type that accepts the pagination properties page and limit and also can the breed property so we can use it to filter dogs base on a specific breed.

GET /api/v1/dogs/:id

app.get<
{ id: number },
{ data: Dog | null, message: string },
{}>
('/api/v1/dogs/:id', (req,res) => { 
  // your implementation
})

In this endpoint, we will be getting a specific dog so we will pass an object type in the Params whose property is an id which has the type of number because we will be getting a specific dog. We are getting a list of dogs in this endpoint, so we will leave it as an empty object. Second, the ResBody in this case, we will send an object that has two properties data whose type are a union type of the Dog type and null this tells us that if the dog exists it will return the shape of the Dog and if does not exist it will return null and the property message whose type is a string. Third, the ReqBody is also an empty object type because we won't be receiving any data in this endpoint. And lastly, we will be passing an empty object type for the ReqQuery because this endpoint does not need it.

POST /api/v1/dogs

app.post<
{},
{ data: Dog & { id: number }, message: string },
Dog,
{}>
('/api/v1/dogs', (req,res) => { 
  // your implementation
})

In this endpoint, we will be creating a new dog so we will pass an empty object type in the Params. Second, the ResBody, in this case, we will send an object that has two properties data whose type is a union type of the Dog type and an object type which has a property of id which is type number because the DB will generate this id instead of the client and the property message whose type is a string. Third, the ReqBody has a type of Dog because we will be receiving data from the client which has the shape of Dog. And lastly, we will be passing an empty object type for the ReqQuery because this endpoint does not need it.

PUT /api/v1/dogs/:id

app.put<
{ id: number },
{ data: Dog & { id: number }, message: string },
Partial<Dog>,
{}>
('/api/v1/dogs', (req,res) => { 
  // your implementation
})

In this endpoint, we will be update an existing dog so we will pass an object type in the Params whose property is an id which has the type of number. Second, the ResBody, in this case, we will send an object that has two properties data whose type is a union type of the Dog type and an object type which has a property of id which is type number because we will return the updated value of the resource and also the property message whose type is a string. Third, the ReqBody has a type of Dog because we will be receiving data from the client which has the shape of Dog but every property should be optional because this is an update so we are using a Utility Type Partial that makes every property in the Dog interface optional. And lastly, we will be passing an empty object type for the ReqQuery because this endpoint does not need it.

DELETE /api/v1/dogs/:id

app.delete<
{ id: number },
{ data: Dog & { id: number }, message: string },
{},
{}>
('/api/v1/dogs', (req,res) => { 
  // your implementation
})

In this endpoint, we will be deleting a dog so we will pass an object type in the Params whose property is an id which has the type of number. Second, the ResBody, in this case, we will send an object that has two properties data whose type is a union type of the Dog type and an object type which has a property of id which is type number because we will return the deleted dog resource and also the property message whose type is a string. Third, the ReqBody is an empty object type because we won't be receiving any data in this endpoint. And lastly, we will be passing an empty object type for the ReqQuery because this endpoint does not need it.

I think we're done.

I think we're not done yet. We've been passing our own custom types directly and some of those types were repeating in some of our methods and this makes our code not clean. Let's change that.

interface BaseParams<IDType = number> {
  id: IDType
}

interface DogDetails {
  name: string
  breed: DogBreed
  adopted_at: Date | null
  birth_date: Date | null
}

interface APIResponse<Data> {
  data: Data
  message: string
}

interface Pagination {
  page: number
  limit: number
  breed: DogBreed
}

interface Empty {

}

type DogBreed = 'labrador' | 'german shepherd' | 'golden retriever'

type Dog = BaseParams & DogDetails

Ok, I will explain all these new types that you see. First, the interface BaseParams is the type we will provide to the Params position, the BaseParams has Generic type IDType which has a default value of type number you can also provide a different type for the id by passing another type here BaseParams<string> . The interface DogDetails is the type we will use for the ReqBody position. The interface APIResponse is the type that we will use for the ResBody position, this type also has a generic just like the type BaseParams, the generic ResultType type will be the type of the data property. The interface Pagination is the type we will use for the position ReqQuery, this type has a property breed the references another custom type that we will be talking about soon. The interface Empty is a helper interface type that we will use for empty objects. The DogBreed type alias is also a helper type that referenced in the Pagination interface and also the DogDetails interface. And, lastly, the Dog type alias is the combination of two interfaces BaseParams and DogDetails we achieved this by using the & intersection type.

If we apply all these new types in our code, our code should look like this.

import express from 'express'

const app = express()

interface BaseParams<IDType = number> {
  id: IDType
}

interface DogDetails {
  name: string
  breed: DogBreed
  adopted_at: Date | null
  birth_date: Date | null
}

interface APIResponse<Data> {
  data: Data
  message: string
}

interface Pagination {
  page: number
  limit: number
  breed: DogBreed
}

interface Empty {

}

type DogBreed = 'labrador' | 'german shepherd' | 'golden retriever'

type Dog = BaseParams & DogDetails

app.get<Empty, APIResponse<Dog[]>, Empty, Pagination>('/api/v1/dogs', (req, res) => {
  // your implementation
})

app.get<BaseParams, APIResponse<Dog | null>, Empty, Empty>('/api/v1/dogs/:id', (req, res) => {
  // your implementation
})

app.post<Empty, APIResponse<Dog>, DogDetails, Empty>('/api/v1/dogs', (req, res) => {
  // your implementation
})

app.put<BaseParams, APIResponse<Dog>, Partial<DogDetails>, Empty>('/api/v1/dogs', (req, res) => {
  // your implementation
})

app.delete<BaseParams, APIResponse<Dog>, Empty, Empty>('/api/v1/dogs', (req, res) => {
  // your implementation
})

This new code is more readable and more maintainable than the old one because of the new types that we made.
I think we're really done here.

Thank you guys for reading this post.

Have a Nice Day 😃!.

Working with Bitbucket Pipelines

Mark Abeto — Sun, 17 Oct 2021 12:25:28 +0000

Hi Guys Good Day!

It's been a long time since I posted here there were a lot of changes in my life for over almost 2 years now, mostly because of the pandemic. But anyways, let's learn about Pipelines in Bitbucket.

Before that let's understand few concepts that you may have heard but dont understand.

CI - Continuous Integration

is a software development practice where developers regularly merge their code changes into a central repository.

CD - Continuous Delivery or Continuous Deployment

Continuous Delivery - is a software development practice where code changes are automatically prepared for a release to production

Continuous Deployment - every change that passes all stages of your production environment.

Basically, the difference between Continuous Delivery and Continuous Deployment is that the former releases our project in a non-production environment like testing or staging but also can be released in the production environment with a manual approval in the pipeline while the latter releases our project in the production environment automatically without a manual approval.

These two combined makes CI/CD (CD can be interchangeable between Continuous Delivery and Continuous Deployment) CI/CD automate steps in your software delivery process, such as testing or building our application when someone pushes in the repository and also automates the release process in the specific environments after the test or build steps depending the configuration in your pipeline.

That's where Bitbucket Pipelines comes into play.

A Pipeline in Bitbucket helps as achieve building a CI/CD in our application. All we need is a configuration file bitbucket-pipelines.yml. The Free Plan gives us 50 build minutes which is enough for us. We will be deploying our project in AWS ElasticBeanstalk.

Before making the bitbucket-pipelines.yml config file. We will install the packages that we will need in this demo. We will be using Node.js in our project.

Run this command in your command line. We will be initializing the node project and install the express framework to build our api.

 npm init -y && npm i express

app.js

const express = require('express')
const app = express()

app.use(express.json())

app.get('/', (req, res) => {
  return res.send({ message: 'Hello World' })
})

app.all('*', (req, res) => {
  return res.status(404).send({ message: 'Not Found' })
})

module.exports = app

server.js

const app = require('./app')
const port = process.env.PORT || 3000

app.listen(port, () => {
  console.log(`Server listening at port: ${port}`)
})

We also need to make some sample tests for our api. Install these packages to use for our testing.

 npm i -D jest supertest

Make a directory for our testing.

 mkdir test

Inside the test folder make this file.

app.test.js

const app = require("../app")
const request = require("supertest")

describe('request server', () => {
  it('should return with a status of 200 for the root path', (done) => {
    request(app)
      .get('/')
      .expect(200)
      .end(done)
  })

  it('should return with a status of 200 and the correct response', (done) => {
    request(app)
      .get('/')
      .expect(200)
      .expect((res) => {
        expect(res.body.message).toBe('Hello World')
      })
      .end(done)
  })

  it('should return with a status of 404 for an invalid path', (done) => {
    request(app)
      .get('/ddd')
      .expect(404)
      .end(done)
  })
})

package.json

{
  "name": "api",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "jest",
    "start": "node server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "jest": "^27.2.5",
    "supertest": "^6.1.6"
  }
}

bitbucket-pipelines.yml

image: atlassian/default-image:2

pipelines:
  default:
    - step:
        name: "Install"
        image: node:12.13.0
        caches:
          - node
        script:
          - npm install
    - parallel:
        - step:
            name: "Test"
            image: node:12.13.0
            caches:
              - node
            script:
              - npm test
        - step:
            name: "Build zip"
            script:
              - apt-get update && apt-get install -y zip
              - zip -r application.zip . -x "node_modules/**"
            artifacts:
              - application.zip
    - step:
        name: "Deployment to Production"
        deployment: production
        script:
          - pipe: atlassian/aws-elasticbeanstalk-deploy:1.0.2
            variables:
              AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
              AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
              AWS_DEFAULT_REGION: $AWS_REGION
              APPLICATION_NAME: $APPLICATION_NAME
              ENVIRONMENT_NAME: $ENVIRONMENT_NAME
              ZIP_FILE: "application.zip"

Ok, I will explain our pipeline config. If you want to know more about yaml files here's a link that will help you to get started.

image: atlassian/default-image:2

This field specifies the docker image that we will be running our build environment. You can see the list of valid values here.

pipelines:
  default:

This pipelines field speaks for itself. The default pipeline field run on every change on the repository or push. We can also use the branches pipeline field to configure our pipeline to run in specific branch changes but in our case we will be using the default.

 - step:
        name: "Install"
        image: node:12.13.0
        caches:
          - node
        script:
          - npm install

This specifies a build step in our pipeline. The name field specifies the Name of the step. The image field specifies a different docker image that we can use in this step. I am specifying a new image because this atlassian/default-image:2 has an older version of node installed. The caches field specifies the list of dependencies that we need to cache every build so we can save time for future builds, it will only download the dependencies when the pipeline first runs and it will cached it after a successful build. The script field specifies the list of scripts we need to run in this step.

Note: Steps are executed in the order that they appear in the config file.

  - parallel:
      - step:
          name: "Test"
          image: node:12.13.0
          caches:
            - node
          script:
              - npm test
      - step:
          name: "Build zip"
          script:
            - apt-get update && apt-get install -y zip
            - zip -r application.zip . -x "node_modules/**"
          artifacts:
            - application.zip

The parallel field is really useful if you want to run a couple or a lot of steps at the same time. This will save you a lot of time and of course makes your build faster if the steps you run here don't rely on other steps. As you can see above we are running the Test step and Build zip that will make zip file that we can use to our last step. The artifacts field specifies the output file or files of the step which in the Build zip is the application.zip.

- step:
    name: "Deployment to Production"
    deployment: production
    script:
      - pipe: atlassian/aws-elasticbeanstalk-deploy:1.0.2
        variables:
          AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
          AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
          AWS_DEFAULT_REGION: $AWS_REGION
          APPLICATION_NAME: $APPLICATION_NAME
          ENVIRONMENT_NAME: $ENVIRONMENT_NAME
          ZIP_FILE: "application.zip"

Ok, we are in our last step. The deployment field indicates the environment of this deployment, the only valid values are production, staging and test. In our script, you can see that we have a pipe field, we need the pipe field to integrate to ElasticBeanstalk. Pipes are an amazing feature to work with third party services. If you see this syntax $VARIABLE this is Repository Variables, we can add dynamic configuration using Repository Variables, you can see this in Repository Setting > Pipelines > Repository variables, but first you need enable Pipelines which we will be talking a little bit later.

After this, you need to make repository in Bitbucket, you can name it whatever you want or make. Here's a gif on how to make a repo in BitBucket.

Also we need to enable the pipeline. Here's a gif on how to enable the pipeline in Bitbucket.

Adding Repository Variables.

And also we need to make a Application in ElasticBeanstalk. Here's a gif on how to make a Application in ElasticBeanstalk.

And lastly, bear with me. We need to make a AWS S3 Bucket to store our zip files. The name of the bucket must be in this format
(APPLICATION_NAME)-elasticbeanstalk-deployment. The refers to the ElasticBeanstalk Application that we created earlier. The name of your bucket must be globally unique, this is a S3 constraint that we must follow, so you must application name must be really different because it's a part of the name our bucket.

You need to initialize git in your project and also add the remote repository in Bitbucket as the origin.

  git init 
  git remote add origin <your-repo-link>
  git add .
  git commit -m "Initial commit"
  git pull origin master 
  git push origin master

This is my finished pipeline. Sorry I can't post another gif file because of the maximum frames.

By the way, if you notice the #2 this is the second time that my pipeline ran, the first time I encountered the S3 bucket PutObject error, basically the bucket didn't exist because it had a different name, the bucket that existed in my S3 had the name demo-api-312-elasticbeanstalk-deployment, it should have the name demo-api-321-elasticbeanstalk-deployment.

So let's access our ElasticBeanstalk Environment.

Yey, it works. Even though we learned a lot, this still is basically simple, you might change the pipeline configuration base on your application needs. But anyways, One step at a time guys.

Thank you guys for reading this post.

Have a Nice Day 😃!.

Implement a Stack with TypeScript

Mark Abeto — Sun, 12 Jul 2020 06:04:00 +0000

Hi Guys Good Day!

TypeScript is still booming, take a look at this survey StackOverflow. A lot of people are using it right now and will so for the next couple of years because of the rise of Deno, a secure runtime for JavaScript and TypeScript.

But, first let's make a Stack with TypeScript. Stack is a LIFO (Last In First Out) data structure. Our stack will have two methods push and pop. When we use the push method
that item will be a new item at the top of the stack and when we use the pop method that newly push item in the stack will be removed. We could easily make a Stack with TypeScript by using arrays but we're not gonna do that. I highly recommend using VSCode as your code editor because it has great support for TypeScript out of the box.

First, install Nodejs.

After installing Nodejs install TypeScript and Nodemon using this command.

 npm i -g typescript nodemon

Then, make a folder called typescript_practice

  mkdir typescript_practice && cd typescript_practice

After that, in our main.js inside the typescript_practice folder. I'm gonna explain this code later.

main.js

interface StackNode<T> {
  value: T | null
  next: StackNode<T> | null
}

class StackNode<T> implements StackNode<T> {
  constructor(val: T) {
    this.value = val
    this.next = null
  }
}

interface Stack<T> {
  size: number
  top: StackNode<T> | null
  bottom: StackNode<T> | null
  push(val: T): number
  pop(): StackNode<T> | null
}



class Stack<T = string> implements Stack<T> {
  constructor() {
    this.size = 0
    this.top = null
    this.bottom = null
  }

  push(val: T) {
    const node = new StackNode(val)
    if (this.size === 0) {
      this.top = node
      this.bottom = node
    } else {
      const currentTop = this.top
      this.top = node
      this.top.next = currentTop
    }

    this.size += 1
    return this.size
  }


  pop(): StackNode<T> | null {
    if (this.size > 0) {
      const nodeToBeRemove = this.top as StackNode<T>
      this.top = nodeToBeRemove.next
      this.size -= 1
      nodeToBeRemove.next = null
      return nodeToBeRemove
    }
    return null
  }
}

So, I'm gonna explain this part first and I believe you will understand most of our code eventually.

interface StackNode<T> {
  value: T | null
  next: StackNode<T> | null
}

class StackNode<T> implements StackNode<T> {
  constructor(val: T) {
    this.value = val;
    this.next = null;
  }
}

In this part, obviously we're making an interface and a class. The class implements the interface so our class StackNode must have these two properties value and next. Basically an interface is a contract between the class and the interface saying that our class should have the shape of our interface unless if you make a property optional in the interface using the ? operator. Also, we're using a Generic here <T> to make this class reusable and can work with multiple types. The T holds the type information, not the value but the type of that value we're gonna use in this class.

 const node = new StackNode(1)

For example, in the code above, we're passing a value of 1 when creating an instance of the class. Since 1 is type of number then all of those T above in the interface and class will hold a value of number. What I mean about value here is the type. and lastly in our interface if you're wondering what does this | mean in the T | null.It means a Union Type,so the property value can either have a type of T or it can have a type of null.

Ok, I believe you understand most of our code now, so I'm not gonna explain the class Stack and interface implementation, but I'm gonna explain these two parts.

class Stack<T = string>

const nodeToBeRemove = this.top as StackNode<T>

In the first part, what we are doing is that we're giving a default value for the Generic type and that value is string, We can give a default value for a Generic as long it is valid.

In the second part, what we are doing is Type Assertion. Basically, what Type Assertion is that we're telling the TypeScript compiler that we know the type of this value and we set that value's type to that type. In this example, the this.top property can have two types a null or a StackNode but inside the condition we know that the stack is not empty and the top has still value, so this.top is not null. This is why we use the as operator to tell the TypeScript compiler that the type of this.top is a
StackNode. If you remove this part as StackNode<T> some of you will get this error Object is possibly 'null'.

Add this code below.

const stack = new Stack<string>()

stack.push("a")
stack.push("b")
stack.push("c")

const popData = stack.pop()

console.log(popData)

console.log(stack)

Then, run this command to see the output of the console.log's

nodemon main.ts

You can also add the peek and isEmpty methods in our stack.

Thanks guys for reading this post.

Have a Nice Day and Stay Safe 😃!.

How to configure Webpack with React Testing Library from the ground up

Mark Abeto — Sun, 17 May 2020 06:33:30 +0000

Hi Guys Good Day!

React testing Library is an alternative library for testing our components in
React. It is more lightweight compared to Airbnb's Enzyme and it is much easier to learn.

Yeah, I know you can directly use this library in create-react-app write away after installing two modules but I wanna show you how to configure this using webpack and friends from the ground up. So Let's go.

Do this in the command line on your desktop.

  mkdir webpack-react-testing && cd webpack-react-testing

What we do here is we are making a folder webpack-react-testing and
changing our current directory to webpack-react-testing in the command line.

and write this again in the command line.

npm init --y

What we do here is making a package.json with the default values.

and we are gonna install the development modules that we need in the project.

npm i -D webpack webpack-cli webpack-dev-server @babel/cli 
@babel/core @babel/preset-env @babel/preset-react babel-jest 
babel-loader jest html-webpack-plugin @testing-library/react @testing-library/jest-dom

If you wanna know what these modules do you can read it in one of my previous post link. But the important part is we installed
the @testing-library/react testing library and also this library depends
on the @testing-library/jest-dom so we installed it too.

and lastly these modules.

 npm i -P react react-dom

Our webpack.config.js file.

const HTMLWebpackPlugin = require('html-webpack-plugin');
const { join } = require('path');
const { HotModuleReplacementPlugin } = require('webpack');

const mode = process.env.ENV || 'development';

module.exports = {
  mode,
  entry: join(__dirname, 'index.js'),
  output: {
    path: join(__dirname, 'build'),
    filename: 'index.bundled.js'
  },
  devServer: {
    port: 1000,
    hot: true,
    open: true,
    historyApiFallback: true
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react']
        }
      }
    ]
  },
  plugins: [
    new HotModuleReplacementPlugin(),
    new HTMLWebpackPlugin({
      favicon: false,
      showErrors: true,
      cache: true,
      template: join(__dirname, 'index.html')
    })
  ]
}

If you wanna know what this configuration does you can read it in one of my previous post link.

Our babel.config.js file.

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
};

In the babel config file we specify the presets we are gonna use in this project.

Our jest.config.js file.

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/setUpTests.js'],
};

In the jest config file we specify what is the path or paths of the configuration files we are gonna use before executing any tests.

Our setUpTests.js file.

import '@testing-library/jest-dom/extend-expect';

In the setup file, we just import this module.

make a new folder named components.

  mkdir components

In this folder, we have two components App.js and Input.js.

Our App.js file.

import React from 'react';

const App = () => {
  return (
    <>
      <h1>Hello World</h1>
    </>
  )
}

export default App;

Our Input.js file.

import React, { useState } from 'react';

const Input = ({ id = '', label = '', type = 'text' }) => {
  const [value, handleChange] = useState('');
  return (
    <div>
      <label htmlFor={id}>{label}</label>
      <input type={type} id={id}
        data-testid={id}
        label={label}
        onChange={({ target }) => {
          handleChange(target.value)
        }}
        value={value}
      />
    </div>
  )
}

export default Input;

Our index.js file in our root folder.

import React from 'react';
import { render } from 'react-dom';
import App from './components/app';

render(<App />, document.getElementById('root'))

And lastly, in our tests folder, we have our index.test.js file.

import React from 'react';
import { screen, render, cleanup, fireEvent } from '@testing-library/react'
import Input from '../components/Input';
import App from '../components/App'

describe('App component', () => {
  beforeAll(() => {
    render(<App />)
  })

  it('should have the right message in the dom', () => {
    const message = 'Hello World';

    expect(screen.getByText(message)).toBeInTheDocument()
  })

  afterAll(cleanup)
})

describe('Input component', () => {
  let input, inputID;

  beforeAll(() => {
    const { getByTestId, getByLabelText } = render(<Input label='username' id='username' />)
    input = getByLabelText('username')
    inputID = getByTestId('username');
  })

  it('should have the default value', () => {
    expect(input.value).toBe('')
    fireEvent.change(input, { target: { value: 'ok' } })
  })

  it('should have the updated value', () => {
    expect(input.value).toBe('ok')
  })

  it('should have an element with this id', () => {
    expect(inputID).not.toBeNull();
  })

  afterAll(cleanup)
})

Then run this command jest. I hope all the test passes on your computer.
Some of the modules that we installed were not used especially the html-webpack-plugin. If you want you can use this as a development server too just add a new script in the package.json - "start": "webpack-dev-server" and also make an index.html that looks like this in the root folder.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App</title>
</head>
<body>
  <div id="root">

  </div>
</body>
</html>

Happy Testing.

Thanks guys for reading this post.

Have a Nice Day and Stay Safe 😃!.

Free Resources to Learn while in Lockdown

Mark Abeto — Thu, 09 Apr 2020 22:20:52 +0000

Hi Guys Good Day!

If you're not doing anything right now or if you're not working at home or if you're bored. Then you need to check this out.

1. Pluralsight

Pluralsight is offering all of its (7000+) courses for free for 1 month, for this month of April to be specific. All you need is to register an account then you are good to go. The confirmation email may take a long time to receive but I think it's worth the wait. So check it out.

2. Udemy

Udemy is a great website for learning new technologies and improving old ones but we need to pay to view most of its courses but it has also some amazing free courses which I think is really great for learning new things or improving old ones. So check it out.

3. VueMastery

Who doesn't love Vue it's one of the most famous JS frameworks according to these websites StateOfJS and StackOverflow Survey and it's easy to learn. This website is offering all of its courses for free next week so, reserve your spot already so you can Master (maybe) Vue for one week.

Be a Better Developer...

Thanks guys for reading this post.

Have a Nice Day and Stay Safe 😃!.

How to Debug Nodejs, TypeScript Code in VSCode

Mark Abeto — Sun, 01 Mar 2020 04:27:59 +0000

Hi Guys Good Day!

It's been almost two years since I've been using TypeScript in my projects. One of the problems that I was having when starting using TypeScript in VSCode was how to debug it. Yea, TypeScript compiles to plain old JavaScript, we could debug the output JavaScript code but I don't want to do that and also the JavaScript output code is old but not that old it depends on your configuration. So, I wanna show you how to debug TypeScript code with VSCode.

And also I wanna mention, TypeScript is one of the most popular programming languages right now. Check out these links.

State of JS - JavaScript Flavors
Stack Overflow Survey - 2019
RedMonk - Most Programming Languages - January 2020

So, Let's start coding.

First, you need to have Node.js and VSCode installed on your computer and TypeScript. The links are down below.

Node.js
VSCode

To install TypeScript, run this command after installing Nodejs.

npm i -g typescript

After installing TypeScript globally, from your desktop run these commands.

 md typescript-debug && cd typescript-debug && code .

Basically what this means is that we are making a directory (md) that has a name of typescript-debug and changing our current directory (cd) Desktop to typescript-debug and opening the VSCode in the typescript-debug directory with the (code .) command.

Inside the directory, run these commands.

 npm init --y && tsc --init

What these commands mean is that where initializing a Node project and using the default configuration(npm init --y) and we're gonna use TypeScript in this project (tsc --init).

And lastly, (bear with me) we're gonna install express and the type definitions for express module using these commands.

  npm i -P express && npm i -D @types/express

npm i is alias for npm install. -P means that the package is a Dependency in our project and -D means that the package is a Development Dependency in our project.

Our package.json file.

{
  "name": "typescript-debug",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {},
  "scripts": {
    "start": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Our tsconfig.json file.

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "ES2015",
      "DOM"
    ],
    "sourceMap": true,
    "outDir": "./build",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "noEmitOnError": true,
    "watch": true
  },
  "exclude": [
    "node_modules"
  ]
}

Ok, I'm gonna explain the most important parts in the tsconfig.json config.

exclude - The files or directories that we don't want to be compiled. In this example, we don't want the typescripts files inside the node_modules folder to be compiled to javascript.

target - The target version of our javascript output code.

lib - This is a list of the helper libraries that we're gonna use in our typescript code and also in the compilation.

sourceMap - A boolean indicating if we want a source map file for each typescript file.

outDir - The path or folder name to our javascript output code.

rootDir - The root directory for our typescript files.

strict - A boolean indicating if we want strict checking in our typescript code.

esModuleInterop - This option needs a lot more explanation. So, I'm gonna just give you an example. This is a boolean value.

If we set this to false. Our import statement would like this.

import * as express from 'express';

If we set this to true. Our import statement would like this.

import express from 'express';

For more details, read this.

noEmitOnError - A boolean indicating if an error occurred in type checking
will not emit or compile javascript code.

watch - A boolean indicating that we run the compiler in watch mode. If any files change in our rootDir, it will compile new files automatically.

Our launch.json file inside the .vscode folder.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/src/app.ts",
            "sourceMaps": true,
            "trace": "all",
            "outFiles": [
                "${workspaceFolder}/build/**/*.js"
            ]
        }
    ]
}

And lastly, the app.ts file inside the src folder.

import express, { Request, Response } from 'express';

const app: express.Application = express();
const port: number = 3000;


app.get('/', (req: Request, res: Response) => {
    res.send('Hello World');
});


app.get('/:name', (req: Request, res: Response) => {
    res.send(`Hello ${req.param('name', 'Mark')}`);
});


app.listen(port, () => {
    console.log(`Server listening at port: ${port}`);
});

Before starting the debug server, place breakpoints anywhere in the app.ts file and run the npm start command to start the TypeScript Compilation Server and then press F5 and open your browser and navigate to http://localhost:3000 or http://localhost:3000/anna. And, if it's working and it passes your breakpoints then great but if not then maybe there's something with your configurations, please follow the instructions above and retrace the things that you missed.

By the way, I haven't mentioned the most important thing that allows us to debug our TypeScript code. It's Source Maps. Most of our code (JS/CSS) in production are combined and minified so that we can dramatically reduce the size of our assets and also reduce the number of files in production to improve the load time performance of a website. But debugging in a minified code is hard, sorry "hard" is a soft word for this, it's impossible. This is where Source Maps comes into play. Basically, a Source map is a file that maps the minified/transformed source to the original source. This helps us, developers, a lot because we can debug that minified code with the original code. Source maps are awesome.

Thanks guys for reading this post.

Have a Nice Day 😃!.

Carousel with Vanilla JavaScript

Mark Abeto — Sat, 01 Feb 2020 03:36:44 +0000

Hi Guys Good Day!

Today we're gonna make a Carousel using Vanilla JavaScript. Most of my posts we're about fundamentals and concepts and I've realized I haven't made a post about Implementing stuff or something like that. So today I'm gonna change that. So I've decided to make this post because as of now I'm currently finding a new job and one of the companies that I've applied to has an exam. And in that exam, one of the functionalities that I have to make is an Image Carousel and one of the rules of the exam is that I have to implement it without using existing javascript carousel libraries instead I have to choose one of these technologies that I'm gonna use for the Carousel. React, jQuery, Angular and Vue. I choose React because I love working with React and I want to finish the exam fast. So now, I want to implement it using with just JavaScript. Let's get to the coding stuff.

Our images taken from pexels.com.

1.jpeg

2.jpeg

3.jpeg

Our index.html file.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Carousel using Vanilla JS</title>
  <link href="./styles.css">
</head>

<body>
  <div class="carousel">
    <div class="arrow-left">
      <span class="arrow">&#x2039;</span>
    </div>
    <img src="./1.jpeg" alt="Carousel Image">
    <div class="arrow-right">
      <span class="arrow">&#x203A;</span>
    </div>
    <div class="indicators">
      <span class="active"></span>
      <span></span>
      <span></span>
    </div>
  </div>

  <script type="text/javascript" src="./carousel.js"></script>
</body>
</html>

This the primary structure of our html. All the elements that we use are inside the div element with a class of carousel.

Our styles.css file.

.arrow {
  font-size: 51px;
  font-weight: bold;
  border-radius: 50%;
  width: 50px;
  height: 65px;
  color: white;
  text-align: center;
  display: inline-block;
  transition: all 0.3s ease;
}

.arrow:hover {
  color: #121212;
  background: white;
  cursor: pointer;
}


.carousel {
  position: relative;
  display: block;
  width: 600px;
  margin: 0 auto;
  margin-top: 5%;
}

.arrow-left {
  position: absolute;
  left: 0;
  top: 50%;
  margin-left: 5px;
  transform: translateY(-50%);
}

.arrow-right {
  position: absolute;
  right: 0;
  top: 50%;
  margin-right: 5px;
  transform: translateY(-50%);
}

.carousel>img {
  width: 100%;
  height: 450px;
  border-radius: 4px;
}

.d-none {
  display: none;
}

.indicators {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  margin-bottom: 10px;
}

.indicators>span {
  display: inline-block;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: white;
}

.indicators>span.active {
  background: #4fc355;
}

I'm not pretty good with my css skills (sorry), so bear with me our carousel div element has a position: relative; style, so that we can position our arrows and indicators in the correct positions using the position: absolute inside the our carousel container.

So let's take a look at our carousel.js file. So, I'm gonna divide our js file into multiple sections so I can explain it clearly.

First Section

const arrowLeft = document.querySelector('.arrow-left');
const arrowRight = document.querySelector('.arrow-right');
const imgCarousel = document.querySelector('img');
const indicators = document.querySelectorAll('.indicators > span');
const images = ['./1.jpeg', './2.jpeg', './3.jpeg'];

The first part is declaring and selecting the elements that we gonna use in our
carousel. I use the document.querySelector and document.querySelectorAll method in the document object because it's more flexible than the other method in the document object for
selecting elements. And our images variable which holds the relative paths of our images, assuming we have the same files. You can change these filenames depending in your files.

Second Section


const setAttr = (el, attr, value) => el.setAttribute(attr, value);
const getAttr = (el, attr) => el.getAttribute(attr);

const getImageIndex = (image) => images.indexOf(image)

const getCurrentImageIndex = () => {
  const currentImage = getAttr(imgCarousel, 'src');
  return getImageIndex(currentImage);
};

const getArrowLeftImageIndex = (currentIndex) => {
  return currentIndex === 0 ? 2 : currentIndex - 1;
};

const getArrowRightImageIndex = (currentIndex) => {
  return currentIndex === 2 ? 0 : currentIndex + 1;
};

const activateIndicator = (index) => {
  indicators.forEach((el, i) => {
    if (el.classList.contains('active')) {
      el.classList.remove('active')
    };
    if (index === i) el.classList.add('active');
  })
};

Our helper functions. The first two functions are used for setting and getting respectively the attribute of the element we want. In this case, will be the img element. The third function is pretty straightforward it's for getting the index of the image. The fourth function is pretty much the same as the third the difference is that here is that we get the image source here and call the getImageIndex function and return the result. The fourth function getArrowLeftImageIndex is used for clicking the left arrow and fifth function getArrowRightImageIndex
is used for clicking the right arrow. And lastly the activateIndicator function is used for updating the correct indicator's class.

Third Section

const intervalSlider = (direction, delay = 1000) => {
  let callback = null, getNewIndexFunc = null;
  if (direction === 'left') {
    getNewIndexFunc = () => getArrowLeftImageIndex(getCurrentImageIndex());

  } else {
    getNewIndexFunc = () => getArrowRightImageIndex(getCurrentImageIndex());
  }

  callback = () => {
    let newIndex = getNewIndexFunc();
    activateIndicator(newIndex);
    setAttr(imgCarousel, 'src', images[newIndex]);
  }

  return () => setInterval(callback, delay);
}

So our third section is just one function. This function is used for sliding functionality of our carousel. Basically what this function does is that when we pass the direction parameter with a value of "left" we're gonna get the function that calculates the image index when clicking
the left (<) arrow and we're gonna use that function inside the callback to calculate the new index of the previous image and update the correct indicator and the correct image based on the newIndex.
If we pass a value of "right" for the direction
parameter we're gonna get the function that calculates the next image when clicking the right (>) arrow. The intervalSlider returns the interval that we're gonna use inside our click events and also you can change
the delay but my default is 1 second.

Fourth Section


const leftInterval = intervalSlider('left');
const rightInterval = intervalSlider('right');

let left = null, right = null;

arrowLeft.addEventListener('click', (e) => {
  const newIndex = getArrowLeftImageIndex(getCurrentImageIndex());
  activateIndicator(newIndex);
  right && clearInterval(right);
  if (!left) {
    left = leftInterval()
  }
  setAttr(imgCarousel, 'src', images[newIndex]);
});
arrowRight.addEventListener('click', (e) => {
  const newIndex = getArrowRightImageIndex(getCurrentImageIndex());
  activateIndicator(newIndex);

  left && clearInterval(left);
  if (!right) {
    right = rightInterval();
  }
  setAttr(imgCarousel, 'src', images[newIndex]);
});

Lastly, our fourth section. First we declare the functions that returns the interval and we have the left and right variables to hold the interval so that we can use them later in our click events. So in our arrowLeft click event callback, we get the new index
specifically the previous index of the current index, after that we call the activateIndicator function passing the newIndex. If we have an interval value for the right value, we're gonna clear
that interval using the clearInterval function. After that, if our left variable does not have a value, we're gonna start the interval using the leftInterval and lastly we're gonna update the
image. In our arrowRight click event callback has almost have the same logic as the arrowLeft click event callback, but in the arrowRight we get the next index of the current index and also we're
gonna clear the interval of the left variable if it has a value and start the right interval if it's not already started. After that, update the image.

You can add additional functionalities to this carousel, like pausing or anything that comes up in your mind.

Thanks guys for reading this post.

Have a Nice Day 😃!.

70 JavaScript Interview Questions

Mark Abeto — Fri, 03 Jan 2020 03:26:57 +0000

Hi Guys Good Day and a Happy New Year 🎆🎆🎆!

This is a long one, so bear with me for a second or an hour. In every answer for every question there's an arrow up ↑ link that lets you go back to the List of Questions so that you don't waste time scrolling up and down.

The Questions

1. What's the difference between undefined and null?
2. What does the && operator do?
3. What does the || operator do?
4. Is using the + or unary plus operator the fastest way in converting a string to a number?
5. What is the DOM?
6. What is Event Propagation?
7. What's Event Bubbling?
8. What's Event Capturing?
9. What's the difference between event.preventDefault() and event.stopPropagation() methods?
10. How to know if the event.preventDefault() method was used in an element?
11. Why does this code obj.someprop.x throw an error?
12. What is event.target ?
13. What is event.currentTarget?
14. What's the difference between == and ===?
15. Why does it return false when comparing two similar objects in JavaScript?
16. What does the !! operator do?
17. How to evaluate multiple expressions in one line?
18. What is Hoisting?
19. What is Scope?
20. What are Closures?
21. What are the falsy values in JavaScript?
22. How to check if a value is falsy?
23. What does "use strict" do?
24. What's the value of this in JavaScript?
25. What is the prototype of an object?
26. What is an IIFE, what is the use of it?
27. What is the use Function.prototype.apply method?
28. What is the use Function.prototype.call method?
29. What's the difference between Function.prototype.apply and Function.prototype.call?
30. What is the usage of Function.prototype.bind?
31. What is Functional Programming and what are the features of JavaScript that makes it a candidate as a functional language?
32. What are Higher Order Functions?
33. Why are functions called First-class Objects?
34. Implement the Array.prototype.map method by hand.
35. Implement the Array.prototype.filter method by hand.
36. Implement the Array.prototype.reduce method by hand.
37. What is the arguments object?
38. How to create an object without a prototype?
39. Why does b in this code become a global variable when you call this function?
40. What is ECMAScript?
41. What are the new features in ES6 or ECMAScript 2015?
42. What's the difference between var, let and const keywords?
43. What are Arrow functions?
44. What are Classes?
45. What are Template Literals?
46. What is Object Destructuring?
47. What are ES6 Modules?
48. What is the Set object and how does it work?
49. What is a Callback function?
50. What are Promises?
51. What is async/await and How does it work?
52. What's the difference between Spread operator and Rest operator?
53. What are Default Parameters?
54. What are Wrapper Objects?
55. What is the difference between Implicit and Explicit Coercion?
56. What is NaN? and How to check if a value is NaN?
57. How to check if a value is an Array?
58. How to check if a number is even without using the % or modulo operator?
59. How to check if a certain property exists in an object?
60. What is AJAX?
61. What are the ways of making objects in JavaScript?
62. What's the difference between Object.seal and Object.freeze methods?
63. What's the difference between the in operator and the hasOwnProperty method in objects?
64. What are the ways to deal with Asynchronous Code in JavasScript?
65. What's the difference between a function expression and function declaration?
66. How many ways can a function be invoked?
67. What is memoization and what's the use it?
68. Implement a memoization helper function.
69. Why does typeof null return object? How to check if a value is null?
70. What does the new keyword do?

1. What's the difference between `undefined` and `null`?.

↑ Before understanding the differences between undefined and null we must understand the similarities between them.

They belong to JavaScript's 7 primitive types.

 let primitiveTypes = ['string','number','null','undefined','boolean','symbol', 'bigint'];

They are falsy values. Values that evaluated to false when converting it to boolean using Boolean(value) or !!value.

   console.log(!!null); //logs false
   console.log(!!undefined); //logs false

   console.log(Boolean(null)); //logs false
   console.log(Boolean(undefined)); //logs false

Ok, let's talk about the differences.

undefined is the default value of a variable that has not been assigned a specific value. Or a function that has no explicit return value ex. console.log(1). Or a property that does not exist in an object. The JavaScript engine does this for us the assigning of undefined value.

  let _thisIsUndefined;
  const doNothing = () => {};
  const someObj = {
    a : "ay",
    b : "bee",
    c : "si"
  };

  console.log(_thisIsUndefined); //logs undefined
  console.log(doNothing()); //logs undefined
  console.log(someObj["d"]); //logs undefined

null is "a value that represents no value". null is value that has been explicitly defined to a variable. In this example we get a value of null when the fs.readFile method does not throw an error.

  fs.readFile('path/to/file', (e,data) => {
     console.log(e); //it logs null when no error occurred
     if(e){
       console.log(e);
     }
     console.log(data);
   });

When comparing null and undefined we get true when using == and false when using ===. You can read the reason here.

   console.log(null == undefined); // logs true
   console.log(null === undefined); // logs false

2. What does the `&&` operator do?

↑ The && or Logical AND operator finds the first falsy expression in its operands and returns it and if it does not find any falsy expression it returns the last expression. It employs short-circuiting to prevent unnecessary work. I've used this in the catch block when closing database connection in one of my projects.

   console.log(false && 1 && []); //logs false
   console.log(" " && true && 5); //logs 5

Using if statements.

  const router: Router = Router();

  router.get('/endpoint', (req: Request, res: Response) => {
     let conMobile: PoolConnection;
     try {
        //do some db operations
     } catch (e) {
     if (conMobile) {
      conMobile.release();
     }
  }
});

Using && operator.

const router: Router = Router();

router.get('/endpoint', (req: Request, res: Response) => {
  let conMobile: PoolConnection;
  try {
     //do some db operations
  } catch (e) {
    conMobile && conMobile.release()
  }
});

3. What does the `||` operator do?

↑ The || or Logical OR operator finds the first truthy expression in its operands and returns it. This too employs short-circuiting to prevent unnecessary work. It was used before to initialize default parameter values IN functions before ES6 Default function parameters was supported.

console.log(null || 1 || undefined); //logs 1

function logName(name) {
  var n = name || "Mark";
  console.log(n);
}

logName(); //logs "Mark"

4. Is using the + or unary plus operator the fastest way in converting a string to a number?

↑ According to MDN Documentation the + is the fastest way of converting a string to a number because it does not perform any operations on the value if it is already a number.

5. What is the DOM?

↑ DOM stands for Document Object Model is an interface (API) for HTML and XML documents. When the browser first reads (parses) our HTML document it creates a big object, a really big object based on the HTML document this is the DOM. It is a tree-like structure that is modeled from the HTML document. The DOM is used for interacting and modifying the DOM structure or specific Elements or Nodes.

Imagine if we have an HTML structure like this.

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document Object Model</title>
</head>

<body>
   <div>
      <p>
         <span></span>
      </p>
      <label></label>
      <input>
   </div>
</body>

</html>

The DOM equivalent would be like this.

The document object in JavaScript represents the DOM. It provides us many methods that we can use to selecting elements to update element contents and many more.

6. What is Event Propagation?

↑ When an event occurs on a DOM element, that event does not entirely occur on that just one element. In the Bubbling Phase, the event bubbles up or it goes to its parent, to its grandparents, to its grandparent's parent until it reaches all the way to the window while in the Capturing Phase the event starts from the window down to the element that triggered the event or the event.target.

Event Propagation has three phases.

Capturing Phase – the event starts from window then goes down to every element until it reaches the target element.
Target Phase – the event has reached the target element.
Bubbling Phase – the event bubbles up from the target element then goes up every element until it reaches the window.

7. What's Event Bubbling?

If we have an example markup like this.

 <div class="grandparent">
    <div class="parent">
      <div class="child">1</div>
    </div>
  </div>

And our js code.

function addEvent(el, event, callback, isCapture = false) {
  if (!el || !event || !callback || typeof callback !== 'function') return;
  if (typeof el === 'string') {
    el = document.querySelector(el);
  };
  el.addEventListener(event, callback, isCapture);
}

addEvent(document, 'DOMContentLoaded', () => {
  const child = document.querySelector('.child');
  const parent = document.querySelector('.parent');
  const grandparent = document.querySelector('.grandparent');

  addEvent(child, 'click', function (e) {
    console.log('child');
  });

  addEvent(parent, 'click', function (e) {
    console.log('parent');
  });

  addEvent(grandparent, 'click', function (e) {
    console.log('grandparent');
  });

  addEvent(document, 'click', function (e) {
    console.log('document');
  });

  addEvent('html', 'click', function (e) {
    console.log('html');
  })

  addEvent(window, 'click', function (e) {
    console.log('window');
  })

});

The addEventListener method has a third optional parameter useCapture with a default value of false the event will occur in the Bubbling phase if true the event will occur in the Capturing Phase. If we click on the child element it logs child,parent,grandparent, html, document and window respectively on the console. This is Event Bubbling.

8. What's Event Capturing?

↑ When an event occurs on a DOM element, that event does not entirely occur on that just one element. In Capturing Phase, the event starts from the window all the way down to the element that triggered the event.

If we have an example markup like this.

 <div class="grandparent">
    <div class="parent">
      <div class="child">1</div>
    </div>
  </div>

And our js code.

function addEvent(el, event, callback, isCapture = false) {
  if (!el || !event || !callback || typeof callback !== 'function') return;
  if (typeof el === 'string') {
    el = document.querySelector(el);
  };
  el.addEventListener(event, callback, isCapture);
}

addEvent(document, 'DOMContentLoaded', () => {
  const child = document.querySelector('.child');
  const parent = document.querySelector('.parent');
  const grandparent = document.querySelector('.grandparent');

  addEvent(child, 'click', function (e) {
    console.log('child');
  }, true);

  addEvent(parent, 'click', function (e) {
    console.log('parent');
  }, true);

  addEvent(grandparent, 'click', function (e) {
    console.log('grandparent');
  }, true);

  addEvent(document, 'click', function (e) {
    console.log('document');
  }, true);

  addEvent('html', 'click', function (e) {
    console.log('html');
  }, true)

  addEvent(window, 'click', function (e) {
    console.log('window');
  }, true)

});

The addEventListener method has a third optional parameter useCapture with a default value of false the event will occur in the Bubbling phase if true the event will occur in the Capturing Phase. If we click on the child element it logs window,document,html, grandparent and parent and child respectively on the console. This is Event Capturing.

9. What's the difference between `event.preventDefault()` and `event.stopPropagation()` methods?

↑ The event.preventDefault() method prevents the default behavior of an element. If used in a form element it prevents it from submitting. If used in an anchor element it prevents it from navigating. If used in a contextmenu it prevents it from showing or displaying. While the event.stopPropagation() method stops the propogation of an event or it stops the event from occurring in the bubbling or capturing phase.

10. How to know if the `event.preventDefault()` method was used in an element?

↑ We can use the event.defaultPrevented property in the event object. It returns a boolean indicating if the event.preventDefault() was called in a particular element.

11. Why does this code `obj.someprop.x` throw an error?

const obj = {};
console.log(obj.someprop.x);

↑Obviously, this throws an error due to the reason we are trying to access a
x property in the someprop property which have an undefined value. Remember properties in an object which does not exist in itself and its prototype has a default value of undefined and undefined has no property x.

12. What is event.target ?

↑ In simplest terms, the event.target is the element on which the event occurred or the element that triggered the event.

Sample HTML Markup.

<div onclick="clickFunc(event)" style="text-align: center;margin:15px;
border:1px solid red;border-radius:3px;">
    <div style="margin: 25px; border:1px solid royalblue;border-radius:3px;">
        <div style="margin:25px;border:1px solid skyblue;border-radius:3px;">
          <button style="margin:10px">
             Button
          </button>
        </div>
    </div>
  </div>

Sample JavaScript.

 function clickFunc(event) {
  console.log(event.target);
}

If you click the button it will log the button markup even though we attach the event on the outermost div it will always log the button so we can conclude that the event.target is the element that triggered the event.

13. What is event.currentTarget?

↑ The event.currentTarget is the element on which we attach the event handler explicitly.

Copying the markup in Question 12.
Sample HTML Markup.

<div onclick="clickFunc(event)" style="text-align: center;margin:15px;
border:1px solid red;border-radius:3px;">
    <div style="margin: 25px; border:1px solid royalblue;border-radius:3px;">
        <div style="margin:25px;border:1px solid skyblue;border-radius:3px;">
          <button style="margin:10px">
             Button
          </button>
        </div>
    </div>
  </div>

And changing our the JS a little bit.

function clickFunc(event) {
  console.log(event.currentTarget);
}

If you click the button it will log the outermost div markup even though we click the button. In this example, we can conclude that the event.currentTarget is the element on which we attach the event handler.

14. What's the difference between `==` and `===` ?

↑ The difference between ==(abstract equality) and ===(strict equality) is that the == compares by value after coercion and === compares by value and type without coercion.

Let's dig deeper on the ==. So first let's talk about coercion.

coercion is the process of converting a value to another type. As in this case, the == does implicit coercion. The == has some conditions to perform before comparing the two values.

Suppose we have to compare x == y values.

If x and y have same type. Then compare them with the === operator.
If x is null and y is undefined then return true.
If x is undefined and y is null then return true.
If x is type number and y is type string Then return x == toNumber(y).
If x is type string and y is type number Then return toNumber(x) == y.
If x is type boolean Then return toNumber(x) == y.
If y is type boolean Then return x == toNumber(y).
If x is either string,symbol or number and y is type object Then return x == toPrimitive(y).
If x is either object and x is either string,symbol Then return toPrimitive(x) == y.
Return false.

Note: toPrimitive uses first the valueOf method then the toString method in objects to get the primitive value of that object.

Let's have examples.

`x`	`y`	`x == y`
`5`	`5`	`true`
`1`	`'1'`	`true`
`null`	`undefined`	`true`
`0`	`false`	`true`
`'1,2'`	`[1,2]`	`true`
`'[object Object]'`	`{}`	`true`

These examples all return true.

The first example goes to condition one because x and y have the same type and value.

The second example goes to condition four y is converted to a number before comparing.

The third example goes to condition two.

The fourth example goes to condition seven because y is boolean.

The fifth example goes to condition eight. The array is converted to a string using the toString() method which returns 1,2.

The last example goes to condition ten. The object is converted to a string using the toString() method which returns [object Object].

`x`	`y`	`x === y`
`5`	`5`	`true`
`1`	`'1'`	`false`
`null`	`undefined`	`false`
`0`	`false`	`false`
`'1,2'`	`[1,2]`	`false`
`'[object Object]'`	`{}`	`false`

If we use the === operator all the comparisons except for the first example will return false because they don't have the same type while the first example will return true because the two have the same type and value.

15. Why does it return false when comparing two similar objects in JavaScript?

↑ Suppose we have an example below.

let a = { a: 1 };
let b = { a: 1 };
let c = a;

console.log(a === b); // logs false even though they have the same property
console.log(a === c); // logs true hmm

JavaScript compares objects and primitives differently. In primitives it compares them by value while in objects it compares them by reference or the address in memory where the variable is stored. That's why the first console.log statement returns false and the second console.log statement returns true. a and c have the same reference and a and b are not.

16. What does the !! operator do?

↑ The Double NOT operator or !! coerces the value on the right side into a boolean. basically it's a fancy way of converting a value into a boolean.

console.log(!!null); //logs false
console.log(!!undefined); //logs false
console.log(!!''); //logs false
console.log(!!0); //logs false
console.log(!!NaN); //logs false
console.log(!!' '); //logs true
console.log(!!{}); //logs true
console.log(!![]); //logs true
console.log(!!1); //logs true
console.log(!![].length); //logs false

17. How to evaluate multiple expressions in one line?

↑We can use the , or comma operator to evaluate multiple expressions in one line. It evaluates from left-to-right and returns the value of the last item on the right or the last operand.

let x = 5;

x = (x++ , x = addFive(x), x *= 2, x -= 5, x += 10);

function addFive(num) {
  return num + 5;
}

If you log the value of x it would be 27. First, we increment the value of x it would be 6, then we invoke the function addFive(6) and pass the 6 as a parameter and assign the result to x the new value of x would be 11. After that, we multiply the current value of x to 2 and assign it to x the updated value of x would be 22. Then, we subtract the current value of x to 5 and assign the result to x the updated value would be 17. And lastly, we increment the value of x by 10 and assign the updated value to x now the value of x would be 27.

18. What is Hoisting?

↑ Hoisting is the term used to describe the moving of variables and functions to the top of their (global or function) scope on where we define that variable or function.

Ok to understand Hoisting, I have to explain the execution context.
The Execution Context is the "environment of code" that is currently executing. The Execution Context has two phases compilation and execution.

Compilation - in this phase it gets all the function declarations and hoists them up to the top of their scope so we can reference them later and gets all variables declaration (declare with the var keyword) and also hoists them up and give them a default value of undefined.

Execution - in this phase it assigns values to the variables hoisted earlier and it executes or invokes functions (methods in objects).

Note: only function declarations and variables declared with the var keyword are hoisted not function expressions or arrow functions, let and const keywords.

Ok, suppose we have an example code in the global scope below.

console.log(y);
y = 1;
console.log(y);
console.log(greet("Mark"));

function greet(name){
  return 'Hello ' + name + '!';
}

var y;

This code logs undefined,1, Hello Mark! respectively.

So the compilation phase would look like this.

function greet(name) {
  return 'Hello ' + name + '!';
}

var y; //implicit "undefined" assignment

//waiting for "compilation" phase to finish

//then start "execution" phase
/*
console.log(y);
y = 1;
console.log(y);
console.log(greet("Mark"));
*/

for example purposes, I commented on the assignment of variable and function call.

After the compilation phase finishes it starts the execution phase invoking methods and assigns values to variables.

function greet(name) {
  return 'Hello ' + name + '!';
}

var y;

//start "execution" phase

console.log(y);
y = 1;
console.log(y);
console.log(greet("Mark"));

19. What is Scope?

↑ Scope in JavaScript is the area where we have valid access to variables or functions. JavaScript has three types of Scopes. Global Scope, Function Scope, and Block Scope(ES6).

Global Scope - variables or functions declared in the global namespace are in the global scope and therefore is accessible everywhere in our code.

   //global namespace
   var g = "global";

   function globalFunc(){
     function innerFunc(){
          console.log(g); // can access "g" because "g" is a global variable
     }
     innerFunc();
   }

Function Scope - variables,functions and parameters declared within a function are accessible inside that function but not outside of it.

    function myFavoriteFunc(a) {
       if (true) {
          var b = "Hello " + a;
       }
       return b;
   }
   myFavoriteFunc("World");

   console.log(a); // Throws a ReferenceError "a" is not defined
   console.log(b); // does not continue here

Block Scope - variables (let,const) declared within a block {} can only be access within it.

 function testBlock(){
   if(true){
     let z = 5;
   }
   return z; 
 }

 testBlock(); // Throws a ReferenceError "z" is not defined

Scope is also a set of rules for finding variables. If a variable does not exist in the current scope it look ups and searches for a variable in the outer scope and if does not exist again it looks up again until it reaches the global scope if the variable exists then we can use it if not it throws an error. It searches for the nearest variable and it stops searching or looking up once it finds it. This is called Scope Chain.

   /* Scope Chain
   Inside inner function perspective

   inner's scope -> outer's scope -> global's scope
  */


  //Global Scope
  var variable1 = "Comrades";   
  var variable2 = "Sayonara";

  function outer(){
  //outer's scope
    var variable1 = "World";
    function inner(){
    //inner's scope
      var variable2 = "Hello";
      console.log(variable2 + " " + variable1);
    }
    inner();
  }  
  outer(); 
// logs Hello World 
// because (variable2 = "Hello") and (variable1 = "World") are the nearest 
// variables inside inner's scope.

20. What are Closures?

↑ This is probably the hardest question of all these questions because Closures is a controversial topic. So I'm gonna explain it from what I understand.

Closures is simply the ability of a function at the time of declaration to remember the references of variables and parameters on its current scope, on its parent function scope, on its parent's parent function scope until it reaches the global scope with the help of Scope Chain. Basically it is the Scope created when the function was declared.

Examples are a great way to explain closures.

   //Global's Scope
   var globalVar = "abc";

   function a(){
   //testClosures's Scope
     console.log(globalVar);
   }

   a(); //logs "abc" 
   /* Scope Chain
      Inside a function perspective

      a's scope -> global's scope  
   */

In this example, when we declare the a function the Global Scope is part of a's closure.

The reason for the variable globalVar which does not have a value in the image because of the reason that the value of that variable can change based on where and when we invoke the a function.
But in our example above the globalVar variable will have the value of abc.

Ok, let's have a complex example.

var globalVar = "global";
var outerVar = "outer"

function outerFunc(outerParam) {
  function innerFunc(innerParam) {
    console.log(globalVar, outerParam, innerParam);
  }
  return innerFunc;
}

const x = outerFunc(outerVar);
outerVar = "outer-2";
globalVar = "guess"
x("inner");

This will print "guess outer inner". The explanation for this is that when we invoke the outerFunc function and assigned the returned value the innerFunc function to the variable x, the outerParam will have a value of outer even though we assign a new value outer-2 to the outerVar variable because
the reassignment happened after the invocation of the outer function and in that time when we invoke the outerFunc function it's look up the value of outerVar in the Scope Chain, the outerVar will have a value of "outer". Now, when we invoke the x variable which have a reference to the innerFunc, the
innerParam will have a value of inner because thats the value we pass in the invocation and the globalVar variable will have a value of guess because before the invocation of the x variable we assign a new value to the globalVar and at the time of invocation x the value of globalVar in the Scope Chain is guess.

We have an example that demonstrates a problem of not understanding closure correctly.

const arrFuncs = [];
for(var i = 0; i < 5; i++){
  arrFuncs.push(function (){
    return i;
  });
}
console.log(i); // i is 5

for (let i = 0; i < arrFuncs.length; i++) {
  console.log(arrFuncs[i]()); // all logs "5"
}

This code is not working as we expected because of Closures.
The var keyword makes a global variable and when we push a function
we return the global variable i. So when we call one of those functions in that array after the loop it logs 5 because we get
the current value of i which is 5 and we can access it because it's a global variable. Because Closures keeps the references of that variable not its values at the time of it's creation. We can solve this using IIFES or changing the var keyword to let for block-scoping.

21. What are the falsy values in JavaScript?

↑

 const falsyValues = ['', 0, null, undefined, NaN, false];

falsy values are values that when converted to boolean becomes false.

22. How to check if a value is falsy?

↑ Use the Boolean function or the Double NOT operator !!

23. What does `"use strict"` do?

↑ "use strict" is a ES5 feature in JavaScript that makes our code in Strict Mode in functions or entire scripts. Strict Mode helps us avoid bugs early on in our code and adds restrictions to it.

Restrictions that Strict Mode gives us.

Assigning or Accessing a variable that is not declared.

 function returnY(){
    "use strict";
    y = 123;
    return y;
 }

Assigning a value to a read-only or non-writable global variable;

   "use strict";
   var NaN = NaN;
   var undefined = undefined;
   var Infinity = "and beyond";

Deleting an undeletable property.

   "use strict";
   const obj = {};

   Object.defineProperty(obj, 'x', {
      value : '1'
   });  

   delete obj.x;

Duplicate parameter names.

   "use strict";

   function someFunc(a, b, b, c){

   }

Creating variables with the use of the eval function.

 "use strict";

 eval("var x = 1;");

 console.log(x); //Throws a Reference Error x is not defined

The default value of this will be undefined.

  "use strict";

  function showMeThis(){
    return this;
  }

  showMeThis(); //returns undefined

There are many more restrictions in Strict Mode than these.

24. What's the value of `this` in JavaScript?

↑ Basically, this refers to the value of the object that is currently executing or invoking the function. I say currently due to the reason that the value of this changes depending on the context on which we use it and where we use it.

   const carDetails = {
     name: "Ford Mustang",
     yearBought: 2005,
     getName(){
        return this.name;
     },
     isRegistered: true
   };

   console.log(carDetails.getName()); // logs Ford Mustang

This is what we would normally expect because in the getName method we return this.name, this in this context refers to the object which is the carDetails object that is currently the "owner" object of the function executing.

Ok, Let's some add some code to make it weird. Below the console.log statement add this three lines of code

   var name = "Ford Ranger";
   var getCarName = carDetails.getName;

   console.log(getCarName()); // logs Ford Ranger

The second console.log statement prints the word Ford Ranger which is weird because in our first console.log statement it printed Ford Mustang. The reason to this is that the getCarName method has a different "owner" object that is the window object. Declaring variables with the var keyword in the global scope attaches properties in the window object with the same name as the variables. Remember this in the global scope refers to the window object when "use strict" is not used.

  console.log(getCarName === window.getCarName); //logs true
  console.log(getCarName === this.getCarName); // logs true

this and window in this example refer to the same object.

One way of solving this problem is by using the apply and call methods in functions.

   console.log(getCarName.apply(carDetails)); //logs Ford Mustang
   console.log(getCarName.call(carDetails));  //logs Ford Mustang

The apply and call methods expects the first parameter to be an object which would be value of this inside that function.

IIFE or Immediately Invoked Function Expression, Functions that are declared in the global scope, Anonymous Functions and Inner functions in methods inside an object has a default of this which points to the window object.

   (function (){
     console.log(this);
   })(); //logs the "window" object

   function iHateThis(){
      console.log(this);
   }

   iHateThis(); //logs the "window" object  

   const myFavoriteObj = {
     guessThis(){
        function getThis(){
          console.log(this);
        }
        getThis();
     },
     name: 'Marko Polo',
     thisIsAnnoying(callback){
       callback();
     }
   };


   myFavoriteObj.guessThis(); //logs the "window" object
   myFavoriteObj.thisIsAnnoying(function (){
     console.log(this); //logs the "window" object
   });

If we want to get the value of the name property which is Marko Polo in the myFavoriteObj object there are two ways to solve this.

First, we save the value of this in a variable.

   const myFavoriteObj = {
     guessThis(){
         const self = this; //saves the this value to the "self" variable
         function getName(){
           console.log(self.name);
         }
         getName();
     },
     name: 'Marko Polo',
     thisIsAnnoying(callback){
       callback();
     }
   };

In this image we save the value of this which would be the myFavoriteObj object. So we can access it inside the getName inner function.

Second, we use ES6 Arrow Functions.

   const myFavoriteObj = {
     guessThis(){
         const getName = () => { 
           //copies the value of "this" outside of this arrow function
           console.log(this.name);
         }
         getName();
     },
     name: 'Marko Polo',
     thisIsAnnoying(callback){
       callback();
     }
   };

Arrow Functions does not have its own this. It copies the value of this of the enclosing lexical scope or in this example the value of this outside the getName inner function which would be the myFavoriteObj object. We can also determine the value of this on how the function is invoked.

25. What is the `prototype` of an object?

↑ A prototype in simplest terms is a blueprint of an object. It is used as a fallback for properties and methods if it does exist in the current object. It's the way to share properties and functionality between objects. It's the core concept around JavaScript's Prototypal Inheritance.

  const o = {};
  console.log(o.toString()); // logs [object Object]

Even though the o.toString method does not exist in the o object it does not throw an error instead returns a string [object Object]. When a property does not exist in the object it looks into its prototype and if it still does not exist it looks into the prototype's prototype and so on until it finds a property with the same in the Prototype Chain. The end of the Prototype Chain is null after the Object.prototype.

   console.log(o.toString === Object.prototype.toString); // logs true
   // which means we we're looking up the Prototype Chain and it reached 
   // the Object.prototype and used the "toString" method.

26. What is an IIFE, what is the use of it?

↑ An IIFE or Immediately Invoked Function Expression is a function that is gonna get invoked or executed after its creation or declaration. The syntax for creating IIFE is that we wrap the function (){} inside a parentheses () or the Grouping Operator to treat the function as an expression and after that we invoke it with another parentheses (). So an IIFE looks like this (function(){})().

(function () {

}());

(function () {

})();

(function named(params) {

})();

(() => {

})();

(function (global) {

})(window);

const utility = (function () {
   return {
      //utilities
   };
})();

These examples are all valid IIFE. The second to the last example shows we can pass arguments to an IIFE function. The last example shows that we can save the result of the IIFE to a variable so we can reference it later.

The best use of IIFE is making initialization setup functionalities and to avoid naming collisions with other variables in the global scope or polluting the global namespace. Let's have an example.

<script src="https://cdnurl.com/somelibrary.js"></script>

Suppose we have a link to a library somelibrary.js that exposes some global functions that we use can in our code but this library has two methods that we don't use createGraph and drawGraph because these methods have bugs in them. And we want to implement our own createGraph and drawGraph methods.

One way of solving this is by changing the structure of our scripts.

<script src="https://cdnurl.com/somelibrary.js"></script>
<script>
   function createGraph() {
      // createGraph logic here
   }
   function drawGraph() {
      // drawGraph logic here
   }
</script>

When we use this solution we are overriding those two methods that the library gives us.

Another way of solving this is by changing the name of our own helper functions.

<script src="https://cdnurl.com/somelibrary.js"></script>
<script>
   function myCreateGraph() {
      // createGraph logic here
   }
   function myDrawGraph() {
      // drawGraph logic here
   }
</script>

When we use this solution we will also change those function calls to the new function names.

Another way is using an IIFE.

<script src="https://cdnurl.com/somelibrary.js"></script>
<script>
   const graphUtility = (function () {
      function createGraph() {
         // createGraph logic here
      }
      function drawGraph() {
         // drawGraph logic here
      }
      return {
         createGraph,
         drawGraph
      }
   })();
</script>

In this solution, we are making a utility variable that is the result of IIFE which returns an object that contains two methods createGraph and drawGraph.

Another problem that IIFE solves is in this example.

var li = document.querySelectorAll('.list-group > li');
for (var i = 0, len = li.length; i < len; i++) {
   li[i].addEventListener('click', function (e) {
      console.log(i);
   })
}

Suppose we have a ul element with a class of list-group and it has 5 li child elements. And we want to console.log the value of i when we click an individual li element.
But the behavior we want in this code does not work. Instead, it logs 5 in any click on an li element. The problem we're having is due to how Closures work. Closures are simply the ability of functions to remember the references of variables on its current scope, on its parent function scope and in the global scope. When we declare variables using the var keyword in the global scope, obviously we are making a global variable i. So when we click an li element it logs 5 because that is the value of i when we reference it later in the callback function.

One solution to this is an IIFE.

var li = document.querySelectorAll('.list-group > li');
for (var i = 0, len = li.length; i < len; i++) {
   (function (currentIndex) {
      li[currentIndex].addEventListener('click', function (e) {
         console.log(currentIndex);
      })
   })(i);
}

This solution works because of the reason that the IIFE creates a new scope for every iteration and we capture the value of i and pass it into the currentIndex parameter so the value of currentIndex is different for every iteration when we invoke the IIFE.

27. What is the use `Function.prototype.apply` method?

↑ The apply invokes a function specifying the this or the "owner" object of that function on that time of invocation.

const details = {
  message: 'Hello World!'
};

function getMessage(){
  return this.message;
}

getMessage.apply(details); // returns 'Hello World!'

This method works like Function.prototype.call the only difference is how we pass arguments. In apply we pass arguments as an array.

const person = {
  name: "Marko Polo"
};

function greeting(greetingMessage) {
  return `${greetingMessage} ${this.name}`;
}

greeting.apply(person, ['Hello']); // returns "Hello Marko Polo!"

28. What is the use `Function.prototype.call` method?

↑ The call invokes a function specifying the this or the "owner" object of that function on that time of invocation.

const details = {
  message: 'Hello World!'
};

function getMessage(){
  return this.message;
}

getMessage.call(details); // returns 'Hello World!'

This method works like Function.prototype.apply the only difference is how we pass arguments. In call we pass directly the arguments separating them with a comma , for every argument.

const person = {
  name: "Marko Polo"
};

function greeting(greetingMessage) {
  return `${greetingMessage} ${this.name}`;
}

greeting.call(person, 'Hello'); // returns "Hello Marko Polo!"

29. What's the difference between `Function.prototype.apply` and `Function.prototype.call`?

↑ The only difference between apply and call is how we pass the arguments in the function being called. In apply we pass the arguments as an array and in call we pass the arguments directly in the argument list.

const obj1 = {
 result:0
};

const obj2 = {
 result:0
};

function reduceAdd(){
   let result = 0;
   for(let i = 0, len = arguments.length; i < len; i++){
     result += arguments[i];
   }
   this.result = result;
}

reduceAdd.apply(obj1, [1, 2, 3, 4, 5]); // returns 15
reduceAdd.call(obj2, 1, 2, 3, 4, 5); // returns 15

30. What is the usage of `Function.prototype.bind`?

↑ The bind method returns a new function that is bound
to a specific this value or the "owner" object, So we can use it later in our code. The call,apply methods invokes the function immediately instead of returning a new function like the bind method.

import React from 'react';

class MyComponent extends React.Component {
     constructor(props){
          super(props); 
          this.state = {
             value : ""
          }  
          this.handleChange = this.handleChange.bind(this); 
          // Binds the "handleChange" method to the "MyComponent" component
     }

     handleChange(e){
       //do something amazing here
     }

     render(){
        return (
              <>
                <input type={this.props.type}
                        value={this.state.value}
                     onChange={this.handleChange}                      
                  />
              </>
        )
     }
}

31. What is Functional Programming and what are the features of JavaScript that makes it a candidate as a functional language?

↑ Functional Programming is a declarative programming paradigm or pattern on how we build our applications with functions using expressions that calculates a value without mutating or changing the arguments that are passed to it.

JavaScript Array has map, filter, reduce methods which are the most famous functions in the functional programming world because of their usefulness and because they don't mutate or change the array which makes these functions pure and JavaScript supports Closures and Higher Order Functions which are a characteristic of a Functional Programming Language.

The map method creates a new array with the results of calling a provided callback function on every element in the array.

const words = ["Functional", "Procedural", "Object-Oriented"];

const wordsLength = words.map(word => word.length);

The filter method creates a new array with all elements that pass the test in the callback function.

const data = [
  { name: 'Mark', isRegistered: true },
  { name: 'Mary', isRegistered: false },
  { name: 'Mae', isRegistered: true }
];

const registeredUsers = data.filter(user => user.isRegistered);

The reduce method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

const strs = ["I", " ", "am", " ", "Iron", " ", "Man"];
const result = strs.reduce((acc, currentStr) => acc + currentStr, "");

32. What are Higher Order Functions?

↑ Higher-Order Function are functions that can return a function or receive argument or arguments which have a value of a function.

function higherOrderFunction(param,callback){
    return callback(param);
}

33. Why are functions called First-class Objects?

↑Functions in JavaScript are First-class Objects because they are treated as any other value in the language. They can be assigned to variables, they can be properties of an object which are called methods, they can be an item in array, they can be passed as arguments to a function, and they can be returned as values of a function. The only difference between a function and any other value in JavaScript is that functions can be invoked or called.

34. Implement the `Array.prototype.map` method by hand.

↑

function map(arr, mapCallback) {
  // First, we check if the parameters passed are right.
  if (!Array.isArray(arr) || !arr.length || typeof mapCallback !== 'function') { 
    return [];
  } else {
    let result = [];
    // We're making a results array every time we call this function
    // because we don't want to mutate the original array.
    for (let i = 0, len = arr.length; i < len; i++) {
      result.push(mapCallback(arr[i], i, arr)); 
      // push the result of the mapCallback in the 'result' array
    }
    return result; // return the result array
  }
}

As the MDN description of the Array.prototype.map method.

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

35. Implement the `Array.prototype.filter` method by hand.

↑

function filter(arr, filterCallback) {
  // First, we check if the parameters passed are right.
  if (!Array.isArray(arr) || !arr.length || typeof filterCallback !== 'function') 
  {
    return [];
  } else {
    let result = [];
    // We're making a results array every time we call this function
    // because we don't want to mutate the original array.
    for (let i = 0, len = arr.length; i < len; i++) {
      // check if the return value of the filterCallback is true or "truthy"
      if (filterCallback(arr[i], i, arr)) { 
      // push the current item in the 'result' array if the condition is true
        result.push(arr[i]);
      }
    }
    return result; // return the result array
  }
}

As the MDN description of the Array.prototype.filter method.

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

36. Implement the `Array.prototype.reduce` method by hand.

↑

function reduce(arr, reduceCallback, initialValue) {
  // First, we check if the parameters passed are right.
  if (!Array.isArray(arr) || !arr.length || typeof reduceCallback !== 'function') 
  {
    return [];
  } else {
    // If no initialValue has been passed to the function we're gonna use the 
    let hasInitialValue = initialValue !== undefined;
    let value = hasInitialValue ? initialValue : arr[0];
    // first array item as the initialValue

    // Then we're gonna start looping at index 1 if there is no 
    // initialValue has been passed to the function else we start at 0 if 
    // there is an initialValue.
    for (let i = hasInitialValue ? 0 : 1, len = arr.length; i < len; i++) {
      // Then for every iteration we assign the result of the 
      // reduceCallback to the variable value.
      value = reduceCallback(value, arr[i], i, arr); 
    }
    return value;
  }
}

As the MDN description of the Array.prototype.reduce method.

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

37. What is the arguments object?

↑ The arguments object is a collection of parameter values pass in a function. It's an Array-like object because it has a length property and we can access individual values using array indexing notation arguments[1] but it does not have the built-in methods in an array forEach,reduce,filter and map.
It helps us know the number of arguments pass in a function.

We can convert the arguments object into an array using the Array.prototype.slice.

function one() {
  return Array.prototype.slice.call(arguments);
}

Note: the arguments object does not work on ES6 arrow functions.

function one() {
  return arguments;
}
const two = function () {
  return arguments;
}
const three = function three() {
  return arguments;
}

const four = () => arguments;

four(); // Throws an error  - arguments is not defined

When we invoke the function four it throws a ReferenceError: arguments is not defined error. We can solve this problem if your enviroment supports the rest syntax.

const four = (...args) => args;

This puts all parameter values in an array automatically.

38. How to create an object without a prototype?

↑ We can create an object without a prototype using the Object.create method.

   const o1 = {};
   console.log(o1.toString()); 
   // logs [object Object] get this method to the Object.prototype 

   const o2 = Object.create(null);
   // the first parameter is the prototype of the object "o2" which in this
   // case will be null specifying we don't want any prototype
   console.log(o2.toString());
   // throws an error o2.toString is not a function

39. Why does `b` in this code become a global variable when you call this function?

↑

function myFunc() {
  let a = b = 0;
}

myFunc();

The reason for this is that assignment operator or = has right-to-left associativity or evaluation. What this means is that when multiple assignment operators appear in a single expression they evaluated from right to left. So our code becomes likes this.

function myFunc() {
  let a = (b = 0);
}

myFunc();

First, the expression b = 0 evaluated and in this example b is not declared. So, The JS Engine makes a global variable b outside this function after that the return value of the expression b = 0 would be 0 and it's assigned to the new local variable a with a let keyword.

We can solve this problem by declaring the variables first before assigning them with value.

function myFunc() {
  let a,b;
  a = b = 0;
}
myFunc();

40. What is ECMAScript?

↑ ECMAScript is a standard for making scripting languages which means that JavaScript follows the specification changes in ECMAScript standard because it is the blueprint of JavaScript.

41. What are the new features in ES6 or ECMAScript 2015?

↑

Arrow Functions
Classes
Template Strings
Enhanced Object literals
Object Destructuring
Promises
Generators
Modules
Symbol
Proxies
Sets
Default Function parameters
Rest and Spread
Block Scoping with let and const

42. What's the difference between `var`, `let` and `const` keywords?

↑ Variables declared with var keyword are function scoped.
What this means that variables can be accessed across that function even if we declare that variable inside a block.

function giveMeX(showX) {
  if (showX) {
    var x = 5;
  }
  return x;
}

console.log(giveMeX(false));
console.log(giveMeX(true));

The first console.log statement logs undefined
and the second 5. We can access the x variable due
to the reason that it gets hoisted at the top of the function scope. So our function code is intepreted like this.

function giveMeX(showX) {
  var x; // has a default value of undefined
  if (showX) {
    x = 5;
  }
  return x;
}

If you are wondering why it logs undefined in the first console.log statement remember variables declared without an initial value has a default value of undefined.

Variables declared with let and const keyword are block scoped. What this means that variable can only be accessed on that block {} on where we declare it.

function giveMeX(showX) {
  if (showX) {
    let x = 5;
  }
  return x;
}


function giveMeY(showY) {
  if (showY) {
    let y = 5;
  }
  return y;
}

If we call this functions with an argument of false it throws a Reference Error because we can't access the x and y variables outside that block and those variables are not hoisted.

There is also a difference between let and const we can assign new values using let but we can't in const but const are mutable meaning. What this means is if the value that we assign to a const is an object we can change the values of those properties but can't reassign a new value to that variable.

43. What are Arrow functions?

↑ Arrow Functions are a new way of making functions in JavaScript. Arrow Functions takes a little time in making functions and has a cleaner syntax than a function expression because we omit the function keyword in making them.

//ES5 Version
var getCurrentDate = function (){
  return new Date();
}

//ES6 Version
const getCurrentDate = () => new Date();

In this example, in the ES5 Version have function(){} declaration and return keyword needed to make a function and return a value respectively. In the Arrow Function version we only need the () parentheses and we don't need a return statement because Arrow Functions have a implicit return if we have only one expression or value to return.

//ES5 Version
function greet(name) {
  return 'Hello ' + name + '!';
}

//ES6 Version
const greet = (name) => `Hello ${name}`;
const greet2 = name => `Hello ${name}`;

We can also parameters in Arrow functions the same as the function expressions and function declarations. If we have one parameter in an Arrow Function we can omit the parentheses it is also valid.

const getArgs = () => arguments

const getArgs2 = (...rest) => rest

Arrow functions don't have access to the arguments object. So calling the first getArgs func will throw an Error. Instead we can use the rest parameters to get all the arguments passed in an arrow function.

const data = {
  result: 0,
  nums: [1, 2, 3, 4, 5],
  computeResult() {
    // "this" here refers to the "data" object
    const addAll = () => {
      // arrow functions "copies" the "this" value of 
      // the lexical enclosing function
      return this.nums.reduce((total, cur) => total + cur, 0)
    };
    this.result = addAll();
  }
};

Arrow functions don't have their own this value. It captures or gets the this value of lexically enclosing function or in this example, the addAll function copies the this value of the computeResult method and if we declare an arrow function in the global scope the value of this would be the window object.

44. What are Classes?

↑ Classes is the new way of writing constructor functions in JavaScript. It is syntactic sugar for using constructor functions, it still uses prototypes and Prototype-Based Inheritance under the hood.

   //ES5 Version
   function Person(firstName, lastName, age, address){
      this.firstName = firstName;
      this.lastName = lastName;
      this.age = age;
      this.address = address;
   }

   Person.self = function(){
     return this;
   }

   Person.prototype.toString = function(){
     return "[object Person]";
   }

   Person.prototype.getFullName = function (){
     return this.firstName + " " + this.lastName;
   }  

   //ES6 Version
   class Person {
        constructor(firstName, lastName, age, address){
            this.lastName = lastName;
            this.firstName = firstName;
            this.age = age;
            this.address = address;
        }

        static self() {
           return this;
        }

        toString(){
           return "[object Person]";
        }

        getFullName(){
           return `${this.firstName} ${this.lastName}`;
        }
   }

Overriding Methods and Inheriting from another class.

//ES5 Version
Employee.prototype = Object.create(Person.prototype);

function Employee(firstName, lastName, age, address, jobTitle, yearStarted) {
  Person.call(this, firstName, lastName, age, address);
  this.jobTitle = jobTitle;
  this.yearStarted = yearStarted;
}

Employee.prototype.describe = function () {
  return `I am ${this.getFullName()} and I have a position of ${this.jobTitle} and I started at ${this.yearStarted}`;
}

Employee.prototype.toString = function () {
  return "[object Employee]";
}

//ES6 Version
class Employee extends Person { //Inherits from "Person" class
  constructor(firstName, lastName, age, address, jobTitle, yearStarted) {
    super(firstName, lastName, age, address);
    this.jobTitle = jobTitle;
    this.yearStarted = yearStarted;
  }

  describe() {
    return `I am ${this.getFullName()} and I have a position of ${this.jobTitle} and I started at ${this.yearStarted}`;
  }

  toString() { // Overriding the "toString" method of "Person"
    return "[object Employee]";
  }
}

So how do we know that it uses prototypes under the hood?

   class Something {

   }

   function AnotherSomething(){

   }
   const as = new AnotherSomething();
   const s = new Something();

   console.log(typeof Something); // logs "function"
   console.log(typeof AnotherSomething); // logs "function"
   console.log(as.toString()); // logs "[object Object]"
   console.log(as.toString()); // logs "[object Object]"
   console.log(as.toString === Object.prototype.toString); 
   console.log(s.toString === Object.prototype.toString); 
   // both logs return true indicating that we are still using 
   // prototypes under the hoods because the Object.prototype is
   // the last part of the Prototype Chain and "Something"
   // and "AnotherSomething" both inherit from Object.prototype

45. What are Template Literals?

↑ Template Literals are a new way of making strings in JavaScript. We can make Template Literal by using the backtick or back-quote symbol.

//ES5 Version
var greet = 'Hi I\'m Mark';

//ES6 Version
let greet = `Hi I'm Mark`;

In the ES5 version, we need to escape the ' using the \ to escape the normal functionality of that symbol which in this case is to finish that string value. In Template Literals, we don't need to do that.

//ES5 Version
var lastWords = '\n'
  + '   I  \n'
  + '   Am  \n'
  + 'Iron Man \n';


//ES6 Version
let lastWords = `
    I
    Am
  Iron Man   
`;

In the ES5 version, we need to add this \n to have a new line in our string. In Template Literals, we don't need to do that.

//ES5 Version
function greet(name) {
  return 'Hello ' + name + '!';
}


//ES6 Version
const greet = name => {
  return `Hello ${name} !`;
}

In the ES5 version, If we need to add an expression or value in a string we need to use the + or string concatenation operator. In Template Literals, we can embed an expression using ${expr} which makes it cleaner than the ES5 version.

46. What is Object Destructuring?

↑ Object Destructuring is a new and cleaner way of getting or extracting values from an object or an array.

Suppose we have an object that looks like this.

const employee = {
  firstName: "Marko",
  lastName: "Polo",
  position: "Software Developer",
  yearHired: 2017
};

The old way of getting properties from an object is we make a variable that has the same name as the object property. This way is a hassle because we're making a new variable for every property. Imagine we have a big object with lots of properties and methods using this way in extracting properties will be irritating.

var firstName = employee.firstName;
var lastName = employee.lastName;
var position = employee.position;
var yearHired = employee.yearHired;

If we use object destructuring it looks cleaner and takes a little time than the old way. The syntax for object destructuring is that if we are getting properties in an object we use the {} and inside that, we specify the properties we want to extract and if we are getting data from an array we use the [].

let { firstName, lastName, position, yearHired } = employee;

If we want to change the variable name we want to extract we use the propertyName:newName syntax. In this example the value of fName variable will hold the value of the firstName property and lName variable will hold the value of the lastName property.

let { firstName: fName, lastName: lName, position, yearHired } = employee;

We can also have default values when destructuring. In this example, if the firstName property holds an undefined value in the object then when we destructure the firstName variable will hold a default of "Mark".

let { firstName = "Mark", lastName: lName, position, yearHired } = employee;

47. What are `ES6 Modules`?

↑ Modules lets us split our code base to multiple files for more maintainability and this lets us avoid putting all of our code in one big file (yucksss). Before ES6 has supported Modules there were two popular module systems that were used for Code Maintainability in JavaScript.

CommonJS - Nodejs
AMD (Asynchronous Module Definition) - Browsers

Basically, the sytanx for using modules are straightforward,
import is used for getting functionality from another file or several functionalities or values while
export is used for exposing functionality from a file or several functionalities or values.

Exporting functionalites in a File or Named Exports

Using ES5 (CommonJS)

// Using ES5 CommonJS - helpers.js
exports.isNull = function (val) {
  return val === null;
}

exports.isUndefined = function (val) {
  return val === undefined;
}

exports.isNullOrUndefined = function (val) {
  return exports.isNull(val) || exports.isUndefined(val);
}

Using ES6 Modules

// Using ES6 Modules - helpers.js
export function isNull(val){
  return val === null;
}

export function isUndefined(val) {
  return val === undefined;
}

export function isNullOrUndefined(val) {
  return isNull(val) || isUndefined(val);
}

Importing functionalites in another File

// Using ES5 (CommonJS) - index.js
const helpers = require('./helpers.js'); // helpers is an object
const isNull = helpers.isNull;
const isUndefined = helpers.isUndefined;
const isNullOrUndefined = helpers.isNullOrUndefined;

// or if your environment supports Destructuring
const { isNull, isUndefined, isNullOrUndefined } = require('./helpers.js');

// ES6 Modules - index.js
import * as helpers from './helpers.js'; // helpers is an object

// or 

import { isNull, isUndefined, isNullOrUndefined as isValid } from './helpers.js';

// using "as" for renaming named exports

Exporting a Single Functionality in a File or Default Exports

Using ES5 (CommonJS)

// Using ES5 (CommonJS) - index.js
class Helpers {
  static isNull(val) {
    return val === null;
  }

  static isUndefined(val) {
    return val === undefined;
  }

  static isNullOrUndefined(val) {
    return this.isNull(val) || this.isUndefined(val);
  }
}


module.exports = Helpers;

Using ES6 Modules

// Using ES6 Modules - helpers.js
class Helpers {
  static isNull(val) {
    return val === null;
  }

  static isUndefined(val) {
    return val === undefined;
  }

  static isNullOrUndefined(val) {
    return this.isNull(val) || this.isUndefined(val);
  }
}

export default Helpers

Importing a Single Functionality from another File

Using ES5 (CommonJS)

// Using ES5 (CommonJS) - index.js
const Helpers = require('./helpers.js'); 
console.log(Helpers.isNull(null));

Using ES6 Modules

import Helpers from '.helpers.js'
console.log(Helpers.isNull(null));

This is the basics of using ES6 Modules. I won't explain all about Modules because it's a broad topic and my Post is now really long.

48. What is the `Set` object and how does it work?

↑ The Set object is an ES6 feature that lets you store unique values, primitives or object references. A value in a Set can only occur once. It checks if a value exists in the set object using the SameValueZero algorithm.

We can make Set instance using Set constructor and we can optionally pass an Iterable as the initial value.


const set1 = new Set();
const set2 = new Set(["a","b","c","d","d","e"]);

We can add a new value into the Set instance using the add method and since the add returns the Set object we can chain add calls. If a value already exists in Set object it will not be added again.


set2.add("f");
set2.add("g").add("h").add("i").add("j").add("k").add("k");
// the last "k" will not be added to the set object because it already exists

We can remove a value from the Set instance using the delete method, this method returns a boolean indicating true if a value exists in the Set object and false indicating that value does not exist.


set2.delete("k") // returns true because "k" exists in the set object
set2.delete("z") // returns false because "z" does not exists in the set object

We can check if a specific value exists in the Set instance using the has method.


set2.has("a") // returns true because "a" exists in the set object
set2.has("z") // returns false because "z" does not exists in the set object

We can get the length of the Set instance using the size property.


set2.size // returns 10

We can delete or remove all the elements in the Set instance using the clear.


set2.clear(); // clears the set data

We can use the Set object for removing duplicate elements in an array.


const numbers = [1, 2, 3, 4, 5, 6, 6, 7, 8, 8, 5];
const uniqueNums = [...new Set(numbers)]; // has a value of [1,2,3,4,5,6,7,8]

49. What is a Callback function?

↑ A Callback function is a function that is gonna get called at a later point in time.

const btnAdd = document.getElementById('btnAdd');

btnAdd.addEventListener('click', function clickCallback(e) {
    // do something useless
});

In this example, we wait for the click event in the element with an id of btnAdd, if it is clicked, the clickCallback function is executed. A Callback function adds some functionality to some data or event. The reduce, filter and map methods in Array expects a callback as a parameter. A good analogy for a callback is when you call someone and if they don't answer you leave a message and you expect them to callback. The act of calling someone or leaving a message is the event or data and the callback is the action that you expect to occur later.

50. What are Promises?

↑ Promises are one way in handling asynchronous operations in JavaScript. It represents the value of an asynchronous operation. Promises was made to solve the problem of doing and dealing with async code before promises we're using callbacks.

fs.readFile('somefile.txt', function (e, data) {
  if (e) {
    console.log(e);
  }
  console.log(data);
});

The problem with this approach if we have another async operation inside the callback and another. We will have a code that is messy and unreadable. This code is called Callback Hell.

//Callback Hell yucksss
fs.readFile('somefile.txt', function (e, data) {
  //your code here
  fs.readdir('directory', function (e, files) {
    //your code here
    fs.mkdir('directory', function (e) {
      //your code here
    })
  })
})

If we use promises in this code it will be more readable and easy to understand and easy to maintain.

promReadFile('file/path')
  .then(data => {
    return promReaddir('directory');
  })
  .then(data => {
    return promMkdir('directory');
  })
  .catch(e => {
    console.log(e);
  })

Promises have 3 different states.

Pending - The initial state of a promise. The promise's outcome has not yet been known because the operation has not been completed yet.

Fulfilled - The async operation is completed and successful with the resulting value.

Rejected - The async operation has failed and has a reason on why it failed.

Settled - If the promise has been either Fulfilled or Rejected.

The Promise constructor has two parameters which are functions resolve and reject respectively.
If the async operation has been completed without errors call the resolve function to resolve the promise or if an error occurred
call the reject function and pass the error or reason to it.
We can access the result of the fulfilled promise using the .then
method and we catch errors in the .catch method. We chain multiple async promise operations in the .then method because the .then method returns a Promise just like the example in the imag e above.

const myPromiseAsync = (...args) => {
  return new Promise((resolve, reject) => {
    doSomeAsync(...args, (error, data) => {
      if (error) {
        reject(error);
      } else {
        resolve(data);
      }
    })
  })
}

myPromiseAsync()
  .then(result => {
    console.log(result);
  })
  .catch(reason => {
    console.log(reason);
  })

We can make a helper func that converts an async operation with a callback to promise. It works like the promisify utility function from the node core module util.

const toPromise = (asyncFuncWithCallback) => {
  return (...args) => {
    return new Promise((res, rej) => {
      asyncFuncWithCallback(...args, (e, result) => {
        return e ? rej(e) : res(result);
      });
    });
  }
}

const promReadFile = toPromise(fs.readFile);

promReadFile('file/path')
  .then((data) => {
    console.log(data);
  })
  .catch(e => console.log(e));

51. What is async/await and How does it work?

↑ async/await is the new way of writing asynchronous or non-blocking code in JavaScript's. It is built on top of Promises. It makes writing asynchronous code more readable and cleaner than
Promises and Callbacks. But you must learn the basics of Promises before using this feature because as I said earlier it is built on top of Promises which means is still uses Promises under the hood.

Using Promises.

function callApi() {
  return fetch("url/to/api/endpoint")
    .then(resp => resp.json())
    .then(data => {
      //do something with "data"
    }).catch(err => {
      //do something with "err"
    });
}

Using Async/Await.

Note: We're using the old try/catch statement to catch any errors that happened in any of those async operations inside the try statement.

async function callApi() {
  try {
    const resp = await fetch("url/to/api/endpoint");
    const data = await resp.json();
    //do something with "data"
  } catch (e) {
    //do something with "err"
  }
}

Note: The async keyword before the function declaration makes the function return implicitly a Promise.

const giveMeOne = async () => 1;

giveMeOne()
  .then((num) => {
    console.log(num); // logs 1
  });

Note: The await keyword can only be used inside an async function. Using await keyword in any other function which is not an async function will throw an error. The await keyword awaits the right-hand side expression (presumably a Promise) to return before executing the next line of code.

const giveMeOne = async () => 1;

function getOne() {
  try {
    const num = await giveMeOne();
    console.log(num);
  } catch (e) {
    console.log(e);
  }
}

//Throws a Compile-Time Error = Uncaught SyntaxError: await is only valid in an async function

async function getTwo() {
  try {
    const num1 = await giveMeOne(); //finishes this async operation first before going to
    const num2 = await giveMeOne(); //this line
    return num1 + num2;
  } catch (e) {
    console.log(e);
  }
}

await getTwo(); // returns 2

52. What's the difference between Spread operator and Rest operator?

↑ The Spread operator and Rest paremeters have the same operator ... the difference between is that the Spread operator we give or spread individual data of an array to another data while the Rest parameters is used in a function or an array to get all the arguments or values and put them in an array or extract some pieces of them.

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

const nums = [5, 6];
const sum = add(...nums);
console.log(sum);

In this example, we're using the Spread Operator when we call the add function we are spreading the nums array. So the value of parameter a will be 5 and the value of b will be 6. So the sum will be 11.

function add(...rest) {
  return rest.reduce((total,current) => total + current);
};

console.log(add(1, 2)); // logs 3
console.log(add(1, 2, 3, 4, 5)); // logs 15

In this example, we have a function add that accepts any number of arguments and adds them all and return the total.

const [first, ...others] = [1, 2, 3, 4, 5];
console.log(first); //logs 1
console.log(others); //logs [2,3,4,5]

In this another example, we are using the Rest operator to extract all the remaining array values and put them in array others except the first item.

53. What are Default Parameters?

↑ Default Parameters is a new way of defining default variables in JavaScript it is available in the ES6 or ECMAScript 2015 Version.

//ES5 Version
function add(a,b){
  a = a || 0;
  b = b || 0;
  return a + b;
}

//ES6 Version
function add(a = 0, b = 0){
  return a + b;
}
//If we don't pass any argument for 'a' or 'b' then 
// it's gonna use the "default parameter" value which is 0
add(1); // returns 1

We can also use Destructuring in Default Paremeters.

function getFirst([first, ...rest] = [0, 1]) {
  return first;
}

getFirst();  // returns 0
getFirst([10,20,30]);  // returns 10

function getArr({ nums } = { nums: [1, 2, 3, 4] }){
    return nums;
}

getArr(); // returns [1, 2, 3, 4]
getArr({nums:[5,4,3,2,1]}); // returns [5,4,3,2,1]

We can also use the parameters defined first to the parameters defined after them.

function doSomethingWithValue(value = "Hello World", callback = () => { console.log(value) }) {
  callback();
}
doSomethingWithValue(); //logs "Hello World"

54. What are Wrapper Objects?

↑ Primitive Values like string,number and boolean with the exception of null and undefined have properties and methods even though they are not objects.

let name = "marko";

console.log(typeof name); // logs  "string"
console.log(name.toUpperCase()); // logs  "MARKO"

name is a primitive string value that has no properties and methods but in this example we are calling a toUpperCase() method which does not throw an error but returns MARKO.

The reason for this is that the primitive value is temporarily converted or coerce to an object so the name variable behaves like an object. Every primitive except null and undefined have Wrapper Objects. The Wrapper Objects are String,Number,Boolean,Symbol and BigInt. In this case, the name.toUpperCase() invocation, behind the scenes it looks like this.


console.log(new String(name).toUpperCase()); // logs  "MARKO"

The newly created object is immediately discarded after we finished accessing a property or calling a method.

55. What is the difference between Implicit and Explicit Coercion?

↑ Implicit Coercion is a way of converting values to another type without us programmer doing it directly or by hand.

Suppose we have an example below.

console.log(1 + '6');
console.log(false + true);
console.log(6 * '2');

The first console.log statement logs 16. In other languages this would throw a compile time error but in JavaScript the 1 is converted to a string then concatenated with the + operator. We did not do anything, yet it was converted automatically by JavaScript for us.
The second console.log statement logs 1, it converts the false to a boolean which will result to a 0 and the true will be 1 hence the result is 1.
The third console.log statement logs 12, it converts the '2' to a number before multiplying 6 * 2 hence the result 12.
JavaScript Coercion Rules

While Explicit Coercion is the way of converting values to another type where we (programmers) explicitly do it.

console.log(1 + parseInt('6'));

In this example, we use the parseInt function to convert the '6' to a number then adding the 1 and 6 using the + operator.

56. What is `NaN`? and How to check if a value is `NaN`?

↑ NaN means "Not A Number" is a value in JavaScript that is a result in converting or performing an operation to a number to non-number value hence results to NaN.

let a;

console.log(parseInt('abc'));
console.log(parseInt(null));
console.log(parseInt(undefined));
console.log(parseInt(++a));
console.log(parseInt({} * 10));
console.log(parseInt('abc' - 2));
console.log(parseInt(0 / 0));
console.log(parseInt('10a' * 10));

JavaScript has a built-in method isNaN that tests if value is isNaN value. But this function has a weird behaviour.

console.log(isNaN()); //logs true
console.log(isNaN(undefined)); //logs true
console.log(isNaN({})); //logs true
console.log(isNaN(String('a'))); //logs true
console.log(isNaN(() => { })); //logs true

All these console.log statements return true even though those values we pass are not NaN.

In ES6 or ECMAScript 2015, it is recommended that we use Number.isNaN method because it really checks the value if it really is NaN or we can make our own helper function that check for this problem because in JavaScript NaN is the only value that is not equal to itself.

function checkIfNaN(value) {
  return value !== value;
}

57. How to check if a value is an Array?

↑ We can check if a value is an Array by using the Array.isArray method available from the Array global object. It returns true when the parameter pass to it is an Array otherwise false.

console.log(Array.isArray(5));  //logs false
console.log(Array.isArray("")); //logs false
console.log(Array.isArray()); //logs false
console.log(Array.isArray(null)); //logs false
console.log(Array.isArray({ length: 5 })); //logs false

console.log(Array.isArray([])); //logs true

If your environment does not support this method you can use the polyfill implementation.

   function isArray(value){
     return Object.prototype.toString.call(value) === "[object Array]"
   }

58. How to check if a number is even without using the `%` or modulo operator?

↑ We can use the bitwise AND& operator for this problem. The & operates on its operand and treats them as binary values and performs the AND operation.

function isEven(num) {
  if (num & 1) {
    return false;
  } else {
    return true;
  }
};

0 in binary is 000.
1 in binary is 001.
2 in binary is 010.
3 in binary is 011.
4 in binary is 100.
5 in binary is 101.
6 in binary is 110.
7 in binary is 111.
and so on...

`a`	`b`	`a & b`
0	0	0
0	1	0
1	0	0
1	1	1

So when we console.log this expression 5 & 1 it returns 1. Ok, first the & operator converts both numbers to binary so 5 turns to 101 and 1 turns to 001.
Then it compares every bit (0's and 1's) using the bitwise AND operator. 101 & 001. As we can see from the table the result can be only 1 if a AND b are 1.

`101 & 001`
101
001
001

So first we compare the left most bit 1&0 the result should be 0.
Then we compare the middle bit 0&0 the result should be 0.
Then we compare the last bit 1&1 the result should be 1.
Then the binary result 001 will be converted to a decimal number which will be 1.

If we console.log this expression 4 & 1 it will return 0. Knowing the last bit of 4 is 0 and 0 & 1 will be 0. If you have a hard time understand this we could use a recursive function to solve this problem.

function isEven(num) {
  if (num < 0 || num === 1) return false;
  if (num == 0) return true;
  return isEven(num - 2);
}

59. How to check if a certain property exists in an object?

↑ There are three possible ways to check if a property exists in an object.

First , using the in operator. The syntax for using the in operator is like this propertyname in object. It returns true if the property exists otherwise it returns false.

const o = { 
  "prop" : "bwahahah",
  "prop2" : "hweasa"
};

console.log("prop" in o); //This logs true indicating the property "prop" is in "o" object
console.log("prop1" in o); //This logs false indicating the property "prop" is not in  "o" object

Second, using the hasOwnProperty method in objects. This method is available on all objects in JavaScript. It returns true if the property exists otherwise it returns false.

//Still using the o object in the first example.
console.log(o.hasOwnProperty("prop2")); // This logs true
console.log(o.hasOwnProperty("prop1")); // This logs false

Third, using the bracket notation obj["prop"]. If the property exists it returns the value of that property otherwise this will return undefined.

//Still using the o object in the first example.
console.log(o["prop"]); // This logs "bwahahah"
console.log(o["prop1"]); // This logs undefined

60. What is AJAX?

↑ AJAX stands for Asynchronous JavaScript and XML. It is a group of related technologies used to display data asynchronously. What this means is that we can send data to the server and get data from the server without reloading the web page.

Technologies use for AJAX.

HTML - web page structure
CSS - the styling for the webpage
JavaScript - the behaviour of the webpage and updates to the DOM
XMLHttpRequest API - used to send and retrieve data from the server
PHP,Python,Nodejs - Some Server-Side language

61. What are the ways of making objects in JavaScript?

↑ Using Object Literal.

  const o = {
   name: "Mark",
   greeting() {
      return `Hi, I'm ${this.name}`;
   }
  };

  o.greeting(); //returns "Hi, I'm Mark"

Using Constructor Functions.

function Person(name) {
   this.name = name;
}

Person.prototype.greeting = function () {
   return `Hi, I'm ${this.name}`;
}

const mark = new Person("Mark");

mark.greeting(); //returns "Hi, I'm Mark"

Using Object.create method.

const n = {
   greeting() {
      return `Hi, I'm ${this.name}`;
   }
};

const o = Object.create(n); // sets the prototype of "o" to be "n"

o.name = "Mark";

console.log(o.greeting()); // logs "Hi, I'm Mark"

62. What's the difference between `Object.seal` and `Object.freeze` methods?

↑ The difference between these two methods is that when we use the Object.freeze method to an object, that object's properties are immutable meaning we can't change or edit the values of those properties. While in the Object.seal method we can change those existing properties but we cannot add new properties to the object.

63. What's the difference between the `in` operator and the `hasOwnProperty` method in objects?

↑ As you know both of these features check if a property exists in an object. It will return truefalse. The difference between them is that the in operator also checks the objects' Prototype Chain if the property was not found in the current object while the hasOwnProperty method just checks if the property exists in the current object ignoring the Prototype Chain.

// We'll still use the object in the previous question.
console.log("prop" in o); // This logs true;
console.log("toString" in o); // This logs true, the toString method is available in this object's prototype which is the Object.prototype


console.log(o.hasOwnProperty("prop")); // This logs true
console.log(o.hasOwnProperty("toString")); // This logs false, does not check the object's prototype

64. What are the ways to deal with Asynchronous Code in JavasScript?

↑

Callbacks
Promises
async/await
Libraries like async.js, bluebird, q, co

65. What's the difference between a function expression and function declaration?

↑ Suppose we have an example below.

hoistedFunc();
notHoistedFunc();

function hoistedFunc(){
  console.log("I am hoisted");
}

var notHoistedFunc = function(){
  console.log("I will not be hoisted!");
}

The notHoistedFunc call throws an error while the hoistedFunc call does not because the hoistedFunc is hoisted while the notHoistedFunc is not.
Read Hoisting here.

66. How many ways can a function be invoked?

↑ There are 4 ways that a function can be invoked in JavaScript. The invocation determines the value of this or the "owner" object of that function.

Invocation as a function - If a function isn't invoked as a method, as a constructor or with the apply, call methods then it is invoked as a function. The "owner" object of this function will be the window object.

  //Global Scope

  function add(a,b){
    console.log(this);
    return a + b;
  }  

  add(1,5); // logs the "window" object and returns 6

  const o = {
    method(callback){
      callback();
    }
  }

  o.method(function (){
      console.log(this); // logs the "window" object
  });

Invocation as a method - If a property of an object has a value of a function we call it a method. When that method is invoked the this value of that method will be that object.

   const details = {
     name : "Marko",
     getName(){
       return this.name;
     }
   }

   details.getName(); // returns Marko
   // the "this" value inside "getName" method will be the "details" object

Invocation as a constructor - If a function was invoked with a new keyword before it then it's called a function constructor. An empty object will be created and this will point to that object.

function Employee(name, position, yearHired) {
  // creates an empty object {}
  // then assigns the empty object to the "this" keyword
  // this = {};
  this.name = name;
  this.position = position;
  this.yearHired = yearHired;
  // inherits from Employee.prototype
  // returns the "this" value implicitly if no 
  // explicit return statement is specified
};

const emp = new Employee("Marko Polo", "Software Developer", 2017);

Invocation with the apply and call methods - If we want to explicitly specify the this value or the "owner" object of a function we can use these methods. These methods are available for all functions.

const obj1 = {
 result:0
};

const obj2 = {
 result:0
};


function reduceAdd(){
   let result = 0;
   for(let i = 0, len = arguments.length; i < len; i++){
     result += arguments[i];
   }
   this.result = result;
}


reduceAdd.apply(obj1, [1, 2, 3, 4, 5]);  //the "this" object inside the "reduceAdd" function will be "obj1"
reduceAdd.call(obj2, 1, 2, 3, 4, 5); //the "this" object inside the "reduceAdd" function will be "obj2"

67. What is memoization and what's the use it?

↑ memoization is a process of building a function that is capable of remembering it's previously computed results or values.
The use of making a memoization function is that we avoid the computation of that function if it was already performed in the last calculations with the same arguments. This saves time but has a downside that we will consume more memory for saving the previous results.

68. Implement a memoization helper function.

↑

function memoize(fn) {
  const cache = {};
  return function (param) {
    if (cache[param]) {
      console.log('cached');
      return cache[param];
    } else {
      let result = fn(param);
      cache[param] = result;
      console.log(`not cached`);
      return result;
    }
  }
}

const toUpper = (str ="")=> str.toUpperCase();

const toUpperMemoized = memoize(toUpper);

toUpperMemoized("abcdef");
toUpperMemoized("abcdef");

This memoize helper function only works on a function that accepts one argument. We need to make a memoize helper function that accepts multiple arguments.

const slice = Array.prototype.slice;
function memoize(fn) {
  const cache = {};
  return (...args) => {
    const params = slice.call(args);
    console.log(params);
    if (cache[params]) {
      console.log('cached');
      return cache[params];
    } else {
      let result = fn(...args);
      cache[params] = result;
      console.log(`not cached`);
      return result;
    }
  }
}
const makeFullName = (fName, lName) => `${fName} ${lName}`;
const reduceAdd = (numbers, startingValue = 0) => numbers.reduce((total, cur) => total + cur, startingValue);

const memoizedMakeFullName = memoize(makeFullName);
const memoizedReduceAdd = memoize(reduceAdd);

memoizedMakeFullName("Marko", "Polo");
memoizedMakeFullName("Marko", "Polo");

memoizedReduceAdd([1, 2, 3, 4, 5], 5);
memoizedReduceAdd([1, 2, 3, 4, 5], 5);

69. Why does `typeof null` return `object`? How to check if a value is `null`?

↑ typeof null == 'object' will always return true because this was the implementation of null since the birth of JavaScript. A fix was proposed to change typeof null == 'object' to typeof null == 'null' but was rejected because it will lead to more bugs to existing projects and softwares.

We can use the === or strict equality operator to check if a value is null.

  function isNull(value){
    return value === null;
  }

70. What does the `new` keyword do?

↑ The new keyword is used with constructor functions to make objects
in JavaScript.

Suppose we have an example code below.

function Employee(name, position, yearHired) {
  this.name = name;
  this.position = position;
  this.yearHired = yearHired;
};

const emp = new Employee("Marko Polo", "Software Developer", 2017);

The new keyword does 4 things.

Creates an empty object.
Assigns that empty object to the this value.
The function will inherit from functionName.prototype.
Returns the this if no Explicit return statement is used.

In the above image, it will first create an empty object {} then
it will the this value to that empty object this = {} and add properties to that this object. Because we don't have a explicit return statement it automatically returns the this for us.

Thanks guys for reading this post.

Have a Nice Day 😃 and a Happy New Year 🎆🎆🎆.

Reviewing Python - Fundamentals

Mark Abeto — Wed, 18 Dec 2019 07:18:48 +0000

Hi Guys Good Day!

It's been almost two months that I haven't posted anything because
I was busy studying and playing games haha. Ok, mostly my articles are about JavaScript or TypeScript so I'm gonna go to a different area specifically Python. Python is my favorite programming language not because it's the most popular programming language right now or it has a lot of uses in different areas in Software Development like in Web Development, Machine Learning or Data Science but because it's the language that I used that help
me graduate college. I loved it since the first time using it. I love the syntax, I love how easily you can learn it's basics and fundamentals and how you can easily write lesser code with it compared to other languages. Honestly, It gives me hope when there were hard times in my last semester in college that I thought that I was not able to graduate because it was hard to manage the time between my thesis and other subjects but Thanks to Python I graduated. It's been almost two years that I haven't programmed in Python so I started learning it again so here's what I learned again.
So Let's get started.

Variables

Variables are placeholders for values. Variables are use to keep track or remember data in our program.
Instead of remembering a specific value we remember the variable that holds that value. Making in variables in Python is straightforward.

my_secret_num = 1
myName = "Mark"
isDone = False
_ = None

# A variable name must not start with a number or a special character except underscore "_"

0_1 = 1 # raises a Syntax Error
dollar$= "$ss" # raises a Syntax Error
@_2 = 1 # raises a Syntax Error

Indentation

What makes Python unique from other languages is that it has strict indentation rules, sometimes it's a pain in the ass doing it manually but if you're using an IDE then I think that IDE maybe has some option to configure the number of spaces to use. The standard number of spaces to use in Python is 4. Indentation makes your code cleaner and more readable. An indentation starts after a colon :.

if True:
    print("Indentation Rocks") # This statement has 4 spaces before it.

i = 0
while True:
    if i == 2: # This statement has 4 spaces before it.
        break # This statement has 8 spaces before it.
    else:       # This statement has 4 spaces before it.
        i += 1 # This statement has 8 spaces before it.

def func():
    pass  # This statement has 4 spaces before it.

for num in [1,2,3]:
print(num) # This raises an Error SyntaxError: expected an indented block

Data Types

Every value that we assign to a variable holds a value and that value has a specific data type. Every data type can be used in any situation but in a certain situation or problem, there is always a more suited data type to use. Python has a number of data types like Boolean, Strings, Numbers, , Lists, Dictionaries, Tuples, Sets, Files and None.

my_first_name = "Mark" # String
my_fav_num = 21 # Number - Integer
my_fav_float_num = 21.0 # Number - Float

is_current_year_odd = False # Boolean - True | False
wish_list = ["new video card","new monitor","new keyboard"]  # List
language_profiencies = { # Dictionary
     "Python" : 6.5,
     "JavaScript" : 8.5
     "TypeScript" : 7
}
cant_change_this = ("Global Warming","is","Real") # Tuple
nums = {1,2,3,4,5,1} # Set
sample_file_data = open("path/to/file.txt","a") # File

Operations and Flow Control

There's a lot of operations that we can use in Python.

Most of this is used for updating a certain value by using current value and updating it. I mostly used the first half in this table because I haven't faced a problem that required using the second half.

Augmented Assignment Operators

Shorthand	Equivalent
a += b	a = a + b
a -= b	a = a - b
*a = b**	*a = a b**
a /= b	a = a / b
a //= b	a = a // b
a %= b	a = a % b
a = b**	a = a b**
a &= b	a = a & b
a ^= b	a = a ^ b
a >>= b	a = a >> b
a <<= b	a = a << b

Math Operators

Math Operators are mostly used in Numbers in Python.

Operation	Operator	Example	Result
Exponent	**	2 ** 3	8
Remainder	%	5 % 3	2
Floor Division	//	4 // 3	1
Division	/	2 / 2	1
Multiplication	*	2 * 2	4
Subtraction	-	1 - 2	-1
Addition	+	1 + 2	3

All of these operations can only be used on a value with a type of Number. But some of these operations can be used in other types other than Numbers.

print("Hello " + "World") # This prints Hello World
# string concatenation

print("Hello" * 3) # This prints HelloHelloHello
# string repetition

print([1,2,3] + [4,5]) # This prints [1,2,3,4,5] 
# + combines both list

print([1] * 3) # This prints [1,1,1]
# * list repetition.

Boolean Operators

Boolean Operators are mostly used in if conditions or Flow Control which we will talk about later.

and operator	Result
False and False	False
False and True	False
True and False	False
True and True	True

or operator	Result
False or False	False
False or True	True
True or False	True
True or True	True

not operator	Result
not True	False
not False	True

Comparison Operators

Comparison Operators are used to comparing two values which will evaluate into a single Boolean value.

Operation	Operator	Example	Result
Greater than	>	5 > 2	True
Less than	<	5 < 2	False
Greater than or equal to	>=	4 >= 3	True
Less than or equal to	<=	4 <= 3	False
Not Equal	!=	2 != 2	False
Equal	==	2 == 2	True

if, elif, else statements.
Sometimes we want our code to run based on a certain condition or conditions. That's where if, elif, else statements comes to play. The syntax for these three is shown below.

is_done = True

if is_done:
   print("The job is done") # This will be printed because the variable "is_done" is True
else:
   print("The job is not done") # This will not print

The else statement will run will only run if the if statement's condition is not True. If we want multiple conditions we can use the elif statement. The elif statement will be checked if the previous if statement or previous elif statements evaluated to False.

my_grade = "B"

if my_grade == "A":
    print("Amazing")
elif my_grade == "B":
    print("Very Good")  # This will be printed
elif my_grade == "C":
    print("Good")
elif my_grade == "D":
    print("Bad")
elif my_grade == "E":
    print("Very Bad")
else:
    print("Failed")

In the above example, it prints <>Very Good because the variable my_grade has a value of "B" and it ignores the rest of the elif statements and else statement.

Loops
Python has two main mechanisms for repeating a block of code over and over again or in a specific number of times.
while and for loops.

while loops are used for repeating a block of code while a certain condition is True. The syntax for a
while loop is shown below.


count = 0
while count < 5:
    print(count)
    count += 1

In this example, the loop will continue until the count variable will have a value of 5. Because our condition says repeat the block of code while the count is less than 5 so in the block of code we add a value of 1 to count.

for loops, on the other hand, execute a block of code in a specific number of times. The syntax for a for loop is shown below.


avengers = ["Iron Man", "Captain America","Thor", "Hulk", "Black Widow", "Hawkeye"]

for avenger in avengers:
    print(avenger)

In this example, we assign the variable name avenger for each of the six values on the avengers List. Mostly it starts from the 0 index up until to the last. In every iteration, the avenger variable will hold a different item in the List.

If you want to get the index rather than a value in the List. You can use the range and len functions.

The range function has three parameters range(start,stop,step). The start has a default value of 0 and step has a default value of 1. If the start and step are not provided then whatever value provided in range function will be the stop and should be an integer.

print(range(5)) # This prints range(0,5)
print(range(0,5,1)) # This is equivalent in the print statement above
print(range(0,5)) # This is equivalent in the print statement above

# We can convert the return value of the range function into a List. Using the list function

print(list(range(5))) # This prints [0,1,2,3,4] does not include the stop

The len function returns the number of items in the container. We can use it in Lists, Strings, Tuples, Sets, and Dictionaries.

print(len("abc")) # This prints 3. The number of characters in the String
print(len([1,2,3,4,5])) # This prints 5. The number of values in the List
print(len((1,2,3,4))) # This prints 4. The number of values in the Tuple
print(len({1,2,3,3})) # This prints 3. The number of values in the Set
print(len({"a":"eyy","b":"bee","c":"si"})) # This prints 3. The number of keys in the Dictionary

So the range and len functions are a good combination for getting indexes in Lists.

for index in range(len(avengers)):
    print(f"{index} - {avengers[index]}") # This prints the index and the corresponding value at that index in each iteration

There are statements that are only valid inside loops. Those are break and continue statements.

The break statement is used to stop or exit the Loop right away.

i = 0
while True:
    count += 1
    if count == 3:  # When the value of count is 3. This loop will exit
        break
    else:
        print(count)

for avenger in avengers:
    if avenger == "Thor":  # When the value of avenger is Thor. This loop will exit
        break
    else:
        print(avenger)

The continue statement will skip the current iteration and continue to the next one. It will go back to the loop declaration before continuing to the block of code.

i = 0
while True:
    count += 1
    if count == 3:  # Will not print 3
        continue
    else:
        print(count)

for avenger in avengers:
    if avenger == "Thor":  # Will not print Thor
        continue
    else:
        print(avenger)

Boolean

Boolean type has only two values True and False. When we use comparison operators and boolean operators between values they evaluate to a single boolean value. Boolean values are used for if conditions , while loops and
etc.

is_absent = False
my_fav_num = 5

print(is_absent) # This prints False
print(my_fav_num > 1) # This True because it compares if 5 is greater than 1 which evaluates to True
print(True and False) # This prints False
print(True or False) # This prints True
print(not False) # This prints True

if is_absent:
    print("Mark is present")  # This will not be printed because is_absent is False
else:
    print("Mark is absent")  # This will be printed

while True:  # This is an example of an infinite loop
    print("This will not stop")  # Press Ctrl+C to Stop

True and False are just 1 and 0 respectively. They don't have the same type but they have the same value but have different printing logic.

print(True == 1) # This prints True
print(False == 0) # This prints True

Strings

Strings are obviously values for texts. Working with Strings in Python is relatively easy and fun. We can make a string with either double-quote " or a single-quote '. If a string starts with a single-quote
it also must end with a single-quote. If it starts with a double-quote and must end with a double-quote.

my_name = "Mark"

my_favorite_language = 'Python'

my_favorite_book = 'The Sum of all Fears"
# This will raise a SyntaxError because it starts with a single-quote but ends with a double-quote

We can access a specific value in the String using an index. The index is the position of that character (a character is a single string like "a") in the String. An index is an integer that starts with 0,1,2,3 until we end up to the last character in the String which has an index of the length of the String minus 1. We can also use negative numbers when indexing -1 is the last index in the String, -2 refers to the second to the last index and so on.

String - 'Mark'	M	a	r	k
Positive Indexing	0	1	2	3
Negative Indexing	-4	-3	-2	-1


first_letter = my_name[0] # returns the first character in my_name variable which is "M"

print(first_letter) # This will print "M"

first_letter = my_name[-4] # returns the first character in my_name variable which is also "M" using negative-indexing

print(first_letter) # This will print "M"

We can use a great functionality called slicing in Strings in Python. slicing is extracting a specific portion of data in a given data type. We can specify where we start extracting, where we want to end the extract or the number of steps we want to. It looks like this my_name[0:4:1] in this example my_name is a string variable that holds a value of "Mark", slicing starts by using square brackets, the 0 is our starting point, the 4 is the endpoint but not included, and the last one 1 is our step, the step we make from the start to end.

guess_my_value = my_name[0:4:1]
# It will extract the portion of the characters from index 0 to index 4 but not including, with a step of 1
# so it extract 'M', 'a', 'r', 'k' with an index of 0,1,2,3 respectively. The step has a default value of 1.

print(guess_my_value) # This will print "Mark"

print(my_name[0:4]) # This will still print "Mark"

print(my_name[:]) # This will still print "Mark"

print(my_name[0:]) # This will still print "Mark"

Note: Strings are immutable which means that we cannot or delete change a specific character in that String unless
you assign that variable that holds the string with a new value.


my_name[0] = "A" # This will raise a TypeError 'str' object does not support item assignment
my_name = "Polo" # This assigns a new value for my_name
print(my_name) # This will print "Polo"

Strings has many, many methods that can help with our basic problems. Most of these methods returns a new string and does not mutate the original String.

my_name = "Mark"

print(my_name.upper()) # This prints "MARK"
# The "upper" method returns a new string version as all in uppercase

print(my_name.lower()) # This prints "mark"
# The "lower" method returns a new string version as all in lowercase

print(my_name.islower()) # This prints False
# The "islower" method returns a Boolean indicating if the String contains all lowercase letters
# it returns True if all letters are lowercase else return False

print(my_name.isupper()) # This prints False
# The "isupper" method returns a Boolean indicating if the String contains all uppercase letters
# it returns True if all letters are lowercase else return False

print(my_name.isalpha()) # This prints True
# The "isalpha" method returns a Boolean indicating if all characters in the String 
#  are alphabetic  it returns True else it returns False

print(my_name.isdigit()) # This prints False
# The "isdigit" method returns a Boolean indicating if all characters in the String
# are numbers it returns True else it returns False

print(my_name.index("ark")) # This prints 1
# The "index" method searches a substring in String and returns the starting Index
# of the substring else this method raises a ValueError.

print("a,b,c,d".split(",")) # This prints ["a","b","c","d"]
# The "split" method obviously splits the String with parameter separator and returns a
# list of all strings. It also has a second parameter which is a number that indicates 
# the number of splits we want.

print(my_name.startswith("Ma")) # This prints True
# The "startswith" method returns a Boolean indicating if the String
# starts with a certain substring else it returns False     

print(my_name.startswith("rc")) # This prints False
# The "endswith" method returns a Boolean indicating if the String
# ends with a ceratin substring else it returns False

There are still many methods that I haven't discuss in this example, you all can try it yourself.

Numbers

The Numbers data type has lots of types in Python. Integers, Floating-point numbers, Octal, Hex, Binary, Complex Numbers, Sets (which will talk about later), Boolean, Decimal and Fraction. Numbers is not a single type like Strings or Lists but they are several types that are related to each other.

import fractions
import decimal

my_num = 5 # Integer
pi = 3.14 # Floating-point number
ten = 0o012 # Octal
x = 0x123 # Hex
two = 0b010 # Binary
unique_nums = {1,2,3,2,3} # Sets
is_done = True # Boolean
one_and_a_half = fractions.Fraction(1/2)  # Fraction
one_over_three = decimal.Decimal(1/3) # Decimal

Ok, I'm not gonna talk a lot of all these types because we mostly use Integers and Floats.

If you want to use Strings with Integers or Floats. You have to convert first that number using the str function before using it.

print(str(2) + "is two")
print(str(3.0) + "is three")
print(4.1+ "is four point one") This raises a TypeError: unsupported operand type(s) for +: 'float' and 'str'

You're wondering why the Boolean type is related in the Numbers Type. Just as I said earlier
the Boolean values True and False are just 1 and 0 respectively they just different printing logic.

print(True == 1) # This prints True
print(False == 0) # This prints True
print(isinstance(True,int)) # This prints True

While Sets has some mathematical operations using certain operators and methods. We will talk about Sets later.

Lists

Lists are values that acts as a container for other values. It can hold multiple values of the same type or multiple values of any type. It's called Arrays in other programming languages. We can declare a List using the square brackets []. We can put values in the List and separate them using comma , [1,2,3,4,5].

numbers = [1,2,3,4,5]

We can access a specific value in the list using an index. The index is the position of that value in the List. An index is an integer that starts with 0,1,2,3 until we end up to the last item of the List which has an index of the length of the List minus 1. We can also use negative numbers when indexing -1 is the last index in the list, -2 refers to the second to the last index and so on. Same as Strings, Lists has positive and negative indexing.

one = numbers[0] # numbers[0] holds the value of 1in the List
two = numbers[1] # numbers[1] holds the value of 2 in the List
five = numbers[-1] # numbers[-1] holds the value of 5 in the List

# We can get the length of the array using the "len" method. We only pass the name of the variable that holds the List.

len_of_numbers = len(numbers) # len(numbers) returns 5

# If we access an index that is more than the number of values in the List
# you will get an IndexError

guess_this_number = numbers[1000] # This will raise the IndexError

If you want to check every item in a List. You can use for Loops.

avengers = ["Iron Man","Captain America","Thor","Hulk","Black Widow","Hawkeye"]

for avenger in avengers: 
      print(avenger) # prints every avenger each in a new line

# If you want to use the index instead of the value
# we can also use that using for loops with the help of "range" and "len" functions

for index in range(len(avengers)):
      print(index) # prints the index each in a new line

# Tip: Instead of checking the length of a List in a condition
# just use the list instead

data = ["one"] 

if len(data):
    print("This will be printed.")

# Use this instead

if data:
    print("This will be printed.")

Just like Strings we can use slicing in Lists.

l = [1,2,3,4,5]

# list[start:stop:step] 

len_l = len(l) # has a value of 5
half = len_l//2

first_half = l[0:half] # l[0:half] will evaluate to l[0:2] is also equivalent to l[:2]

print(first_half) # This will print [1,2]

second_half = l[half:len_l] # l[half:l] will evaluate to l[2:5] is also equivalent l[2:] 

print(second_half) # This will print [3,4,5]

odd_nums = l[0:len_l:2] 
#  l[0:len_l:2] will evalute to l[0:5:2] the 0 our start, the 5 is our stop and the step is 2 
#  l[0:5:2] is also equivalent to l[0::2] or l[::2]

print(odd_nums) # This will print [1,3,5]

reverse_l = l[::-1] 
#  l[::-1] This reverse the start and stop meaning we will start at the last item and stop 
# with the first item. [::-1] is also equivalent to l[len(l)::-1]

print(reverse_l) # This will print [5,4,3,2,1]

Lists has many methods that make our life easier.


avengers.append("Ant-Man") 
# The "append" method add a new item at
#  the end of List

avengers.count("Iron Man") # returns 1
# The "count" method counts how many times
#  the value passed appears

avengers.extend(["Doctor Strange","Spiderman","Black Panther"])
# The "extend" method adds all items 
# passed at the end of the List. The parameter passed must be an Iterable object.

avengers.index("Captain America") # returns 1
# The "index" method returns the first index of the value passed.
# If the value does not exist this method raises a ValueError.

avengers.insert(0,"Captain Marvel")
# The "insert" method obviously inserts a value 
# at a specified index but does not replace the
#  current value at that position.

avengers.append("Thanos")
avengers.remove("Thanos") # returns 1
# The "remove" method obviously removes the first occurence of the value passed.
# If the value does not exist this method raises a ValueError.

avengers.reverse()
# The "reverse" method reverses the position of each item in the List.
# If the List looks like this my_list = [1,2,3]
# then we use l.reverse()
# then my_list would look like this [3,2,1]

avengers.pop()
# The "pop" method removes the last item in the List and returns it.
# We can specify the index to remove in pop method as a parameter
# If the index is not valid or if the List is empty this method raises an 
# IndexError.

Tuples

Tuples is like a List but the difference between them is that Lists are mutable which means
we can change or delete the values inside a List but with Tuples are immutable which means
we cannot change or delete any values on a Tuple. We can make a Tuple using parentheses.

my_favorite_numbers = (1,21,19)

# If you only assign one value in the Tuple without using a comma 
# Python will treat that as an expression and in turn that variable
# will not be a tuple instead will the first item in the parentheses

my_secret_nums = (666) 

print(my_secret_nums) # will print 666 instead of (666)

my_new_secret_nums = (666,)

print(my_new_secret_nums) # prints (666,)

Tuples is almost like a List we can use slicing, concatenation, we can access a value using an index, we can tuple repetition using the * operator. But we cannot add or change any value in a Tuple. A Tuple has only two methods index, and count.

secret_hero_real_names = ("Bruce Wayne","Steve Rogers","Clark Kent","Peter Parker")

secret_hero_real_names.count("Bruuce Wayne") #returns 0
secret_hero_real_names.count("Peter Parker") #returns 1 
secret_hero_real_names.index("Steve Rogers") # returns 1

Dictionaries

Dictionaries are also a container for data like Lists but unlike Lists which we access a specific value in List with an index in Dictionaries we access a value using a key or property which in turn holds a value and items in Dictionaries are unordered while in Lists are ordered_. We can make a __Dictionary using curly braces {}.


books_currently_reading_bookmark = {
   "Angel & Demons" :  484,
   "Da Vinci Code": 100
}

# We can use a key with a type of "string","integer" or "tuples" in Dictionaries

d = { 1 : "one" }
print(d[1]) # prints "one"

d1 = { (1,2,3,4,5,6,7,8,9,10): "one-ten"}

print(d[(1,2,3,4,5,6,7,8,9,10)]) # prints "one-ten"

#We cannot use a type of "dictionary" or "list" as a key in Dictionaries

d2 = { [1,2,3] : "one-three" } # This will raise a TypeError : unhashable type: 'list'

We can add a new key-value pair anytime in a dictionary.

letters_sounds = {}

letters_sounds["a"] = "eyyy"
letters_sounds["b"] = "bee"

print(letters_sound) # prints {'a': 'eyyy', 'b': 'bee'}

If we check a key that does not exist in a dictionary. It will an error.

print(letters_sounds["c"]) # This will raise a KeyError which means that key "c" does not exist in the letters_sounds Dictionary.

We can use the in operator or get method in Dictionaries
to check if a key exists in a Dictionary.

if "c" in letters_sounds: # Check if "c" exists
    print(letters_sounds["c"])
else:
   print("letters_sounds does not have a 'c' key")


print(letters_sounds.get("c") == None) # prints True
# The get method has a second parameter which is the default value 
# that will be used if the key does not exist in the Dictionary

print(letters_sounds.get("c",0)) # prints 0

Dictionaries has many useful methods that can help some problems when dealing with Dictionaries.

new_letters_sounds = {
      "a": "ayy",
      "c" : "si"
}

letters_sounds.update(new_letters_sounds) 
# The "update" method adds or updates new keys in the dictionary it accepts 
# an Iterable type as a parameter or the source

letters_sounds.setdefault("c","sii") 
# The "setdefault" method add a new key and a default value in the dictionary
# if the key doesn't exist in the dictionary, if it exists it returns the value of that key

for key in letters_sounds.keys():
    print(key) # This prints "a", "b" and "c" respectively each in a new line
# The "keys" method returns all keys in the dictionary. This does not return a list.
# Instead it returns a set-like object.

for val in letters_sounds.values(): 
    print(val) # This prints "ayy", "bee" and "si" each in a newline
# The "keys" method returns all keys in the dictionary. This does not return a list.
# Instead it returns a set like object.

# If you want to access the key and the value in a loop.
# You can use the "items" method.
for key, value in tuple(letters_sounds.items()):
    print(f"{key}:{value}") # This prints "a:ayy", "b:bee" and "c:si" respectively each in a newline
# The "items" method returns the key and value in a set like object.

letters_sounds.pop("c")
# The "pop" method removes a key and its value in the Dictionary.
# If the key does not exist this raises a KeyError.

letters_sounds.clear()
# The "clear" method removes all the keys and values in the Dictionary.

Sets

Sets are also containers just like Lists, Dictionaries and Tuples. The difference is that Sets are onordered collection, are immutable (the Set itself is mutable but the values must be immutable) like Tuples and holds only unique values. Sets are declared using curly brackets {} or the set function and also Sets look like Dictionaries the difference again is that Sets don't have keys.

nums = {1,2,3,4,3,4}
nums_2 = set([1,2,3,4,4,5,5]) 
print(nums)  # This prints {1,2,3,4} because Sets only holds unique values.

print(nums_2) # This prints {1,2,3,4,5}

Because Sets are onordered we can't access a specific value. It has no indexing functionality like Lists and Tuples.


print(nums[0])
# This raises a TypeError: 'set' object does not support indexing.

Even though Sets are called immutable it has methods that can change
or remove a specific value from the Set.

nums.add(4) 
# The "add" method adds a new value in Set if it does not 
# already exist. If already exists this method does nothing.

nums.remove(1)
# The "remove" method removes a specific value from the Set.
# If the value does not exist it raises a KeyError.

nums.clear()
# The "clear" method obviously removes all the values present
# in the Set.

We can use certain operations in Sets that are not available in other types.

s1 = {1,2,3}
s2 = {3,4,5,6}

print(s1 | s2)  # This prints {1,2,3,4,5,6} 
# This operation is called "union" it combines both sets and returns a new set.
# It also have a equivalent method on sets called "union" suprise, suprise.
print(s1.union(s2))  # Also prints {1,2,3,4,5,6} 

print(s1 & s2) # This prints {3}
# This operation is called "intersection" it finds the common elements in both sets and returns it in a set.
# It also have a equivalent method on sets called "intersection" suprise, suprise.
print(s1.intersection(s2))  # Also prints {3}

print(s1 - s2)  # This prints {1, 2}
# This operation is called "difference" it finds the difference between the first Set and the second Set and returns a new Set.
# So in this example it calculates what elements "s1" has that "s2" does not have.
# It also have a equivalent method on sets called "difference" suprise, suprise.
print(s1.difference(s2)) # Also prints {1,2}

print(s1 ^ s2) # This prints {1,2,4,5,6}
# This operation is called "symmetric_difference" it finds the elements that are not common between the two sets and returns it as a Set.
# So in this example it calculates what unique elements between "s1" and "s2" has and returns it.
# It also have a equivalent method on sets called "symmetric_difference" suprise, suprise.
print(s1.symmetric_difference(s2)) # Also prints {1,2,4,5,6}

Watch out for my next part of this post about Reviewing Python it will involve Handling Exceptions, Functions, List, Tuples,Dictionary and Set Comprehensions , Classes and Modules.

Thanks guys for reading this post.

Have a Nice Day 😃!.

My Top Youtube Channels to Learn Web Development and Programming

Mark Abeto — Thu, 17 Oct 2019 01:59:27 +0000

Hi Guys Good Day!

Sorry Guys, I didn't post an article for a month and a half because I didn't have the time because I quit my job and there are requirements that I have to do before leaving the company. Sometimes learning Programming is hard, understanding the concepts and memorizing the syntax, so we need help from other people or sources that can solve our problem. So these are my best Youtube Channels to Learn Web Development and Programming.

1. Net Ninja

Shaun is one of the best guys to explain Core Concepts and Fundamentals of a certain technology. He has tutorials for JavaScript, React and Redux, Vuejs, Git and Github and many more. Check out his channel.

2. Traversy Media

Brad teaches new Programming Languages and New technologies or frameworks and also he shares his experiences in his life and work and being a Software Developer. He has tutorials for NextJS, HTML, CSS, JavaScript, Laravel, NodeJS and many more. Check out his channel.

3. thenewboston

Bucky teaches a lot of technologies, ranging from building a PC, Some Basic Math, Algebra, Libraries, Frameworks, and Programming Languages. This is one of the first youtube channels that I love when I was in college and still. He has tutorials for Git, Django, Python, Java, C++, jQuery and many more. The channel is a bit outdated but if you want to learn then feel free to check out the channel

These are some honorable mentions Academind, Programming with Mosh and Corey Schafer.

Thanks guys for reading this post. Wish me Luck 💪 for my new Journey.

Have a Nice Day 😃!.

React Testing with Airbnb's Enzyme, Jest and Babel

Mark Abeto — Wed, 28 Aug 2019 05:58:09 +0000

Hi Guys Good Day!

ok, guys first We gonna configure Jest, Enzyme from the ground up. So you can know what modules or packages we're gonna use.

Do this in the command line on your desktop.

  md testing-with-enzyme && cd testing-with-enzyme

md testing-with-enzyme - Makes a directory with a name of testing-with-enzyme
&& - runs the second command if the first command does not throw an error
cd testing-with-enzyme - Changes the current directory to testing-with-enzyme

  npm init --y && npm i -D @babel/preset-env @babel/preset-react 
  @babel/plugin-proposal-class-properties @types/jest jest
  enzyme enzyme-adapter-react-16 && npm i -P react react-dom

ok, I'm not gonna explain all these packages but we're gonna all of these packages to work with enzyme and jest.

 type nul > babel.config.js && type nul > jest.config.js && md Tests && md components

type nul for Windows OS. touch for UNIX Systems.

Our babel.config.js file.

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
  plugins: ['@babel/plugin-proposal-class-properties']
}

Our jest.config.js file.

module.exports = {
  rootDir: '.',
  displayName: {
    name: 'enzyme-setup',
    color: 'blue'
  },
  runner: 'jest-runner',
  verbose: true,
  errorOnDeprecated: true,
  roots: ['./Tests'],
  moduleFileExtensions: ['js', 'jsx'],
  setupFilesAfterEnv: ['<rootDir>Tests/setupTest.js']
}

Inside our Tests folder make a setupTest.js file.

import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

configure({
  adapter: new Adapter()
})

Our package.json file.

Inside the components folder make 4 files.

  type nul > App.js && type nul > Form.js && type nul > Header.js && type nul > List.js

Our Header.js file.

import React from 'react'

export default function Header({ message, handleToggleTheme, theme }) {
  return (
    <div className="header">
      <h1>{message}</h1>
      <button className="right" onClick={handleToggleTheme}>
        <i className={theme}></i>
      </button>
    </div>
  )
}

Our Form.js file.

import React from 'react'

export default function Form({ handleChange, value, handleClick }) {
  return (
    <div className="form">
      <input
        className="form-control"
        type="text"
        onChange={handleChange}
        value={value}
      />
      <button className="btn" onClick={handleClick}>
        Submit
      </button>
    </div>
  )
}

Our List.js file.

import React from 'react'

export default function List({ items }) {
  return (
    <ul className="list">
      {items.map(item => (
        <li className="list-item" key={item}>{item}</li>
      ))}
    </ul>
  )
}

Our App.js file.

import React, { Component } from 'react'
import Header from './Header'
import List from './List'
import Form from './Form'

export default class App extends Component {

  state = {
    listItem: '',
    items: [],
    isDarkTheme: false
  }



  handleChange = ({ target: { value } }) => {
    this.setState({
      listItem: value
    })
  }

  handleClick = () => {
    this.setState({
      items: [...this.state.items, this.state.listItem],
      listItem: ''
    })
  }


  handleToggleTheme = () => {
    this.setState({
      isDarkTheme: !this.state.isDarkTheme
    })
  }

  render() {
    const theme = this.state.isDarkTheme ? 'dark' : 'light'
    return (
      <div className={theme}>
        <Header
          theme={theme}
          message={this.props.message}
          handleToggleTheme={this.state.handleToggleTheme}
        />
        <Form
          handleChange={this.state.handleChange}
          value={this.state.listItem}
          handleClick={this.state.handleClick}
        />
        <List items={this.state.items} />
      </div>
    )
  }

}

App.defaultProps = {
  message: 'Hello World'
}

Inside the Tests folder make an index.test.js file.

import React from 'react'
import App from '../components/App'
import Header from '../components/Header'
import Form from '../components/Form'
import List from '../components/List'
import { shallow, mount } from 'enzyme'

describe('Test App component', () => {
  let wrapper;

  beforeAll(() => {
    wrapper = shallow(<App />)
  })

  it('should not return an error', () => {
    expect(wrapper).toMatchSnapshot()
    console.log(wrapper.debug())
  })
})

Then in your terminal run this command

 npm t

If it does not throw an error and it passed then your good to go.

What's the difference between shallow rendering and full mount rendering?

There's this very useful method debug that both shallow and mount provides us.

Try updating our index.test.js file to look like this.

import React from 'react'
import App from '../components/App'
import Header from '../components/Header'
import Form from '../components/Form'
import List from '../components/List'
import { shallow, mount } from 'enzyme'

describe('Test App component', () => {
  let shallowWrapper, mountWrapper;

  beforeAll(() => {
    shallowWrapper = shallow(<App />)
    mountWrapper = mount(<App />)

    console.log(shallowWrapper)
    console.log(mountWrapper)
  })

})

Structure using the debug method.

The first console.log looks like this.

 console.log Tests/index.test.js:12
    <div className="light">
      <Header theme="light" message="Hello World" handleToggleTheme={[Function]} 
        />
      <Form handleChange={[Function]} value="" handleClick={[Function]} />
      <List items={{...}} />
    </div>

The second console.log looks like this.

  console.log Tests/index.test.js:13
    <App message="Hello World">
      <div className="light">
        <Header theme="light" message="Hello World" handleToggleTheme={[Function]}>
          <div className="header">
            <h1>
              Hello World
            </h1>
            <button className="right" onClick={[Function]}>
              <i className="light" />
            </button>
          </div>
        </Header>
        <Form handleChange={[Function]} value="" handleClick={[Function]}>
          <div className="form">
            <input className="form-control" type="text" onChange={[Function]} value="" />
            <button className="btn" onClick={[Function]} />
          </div>
        </Form>
        <List items={{...}}>
          <ul className="list" />
        </List>
      </div>
    </App>

The debug method basically gives us the structure of our component. When we use it on shallow it does not give us the full structure of our component we don't see the JSX structure of our Header,Form, and List component but when we use it on mount it gives us the full structure of our component down to every JSX element that our child components used.

Useful methods that Enzyme provides us.

at(index : number)

Returns a wrapper element based on the index is given.

The difference between using shallow and mount on our App component.

  it('should have an "App" component "at" index of 0', () => {
    let wrapper = shallow(<App />);
    expect(wrapper.at(0).type()).toBe(App);
  });

  it('should return an App', () => {
    let wrapper = mount(<App />);
    expect(wrapper.at(0).type()).toBe(App)
  });

The first test failed but the second test passed the reason to this is that the type of element at index 0 in our shallowed component is div, not App but in our mountend component is App refer to the Structure Section changing the App to div in the shallowed test will make the test passed.

childAt(index : number)

Returns a new wrapper of the child at the specified index.

  it('should have a child component of type "Header" at "index" of 0', () => {
    let wrapper = shallow(<App />);
    expect(wrapper.childAt(0).type()).toBe(Header);
  });

  it('should have a child element of type "div" at "index" of 0', () => {
    let wrapper = mount(<App />);
    expect(wrapper.childAt(0).type()).toBe('div')
  });

Base on the Structure of our shallowed App the first child should be Header and in our mounted App the first child should be div. These two tests should passed.

find(selector : EnzymeSelector)

Basically finds every node that matches the given selector.

Selectors.

find('div') = finds every 'div' element on the current wrapper.
find('div.something') = finds every 'div' element with a class of 'something' on the current wrapper.
find('div[title="okinawa"]) = finds every 'div' element with an attribute of "title" with a value of "okinawa".
find('#okinawa') = find every element with an id of "okinawa".
find('.okinawa') = finds every element with a class of "okinawa".
find('div#okinawa > span') = finds every 'span' element that is the
direct child of a "div" with an id of "okinawa"
find('div.okinawa + span') = finds every 'span' element that is placed after a "div" element with a class of "okinawa"
find('div.okinawa span') = finds every 'span' element that is inside a "div" element with a class of "okinawa"
find(SomeComponent) = finds every element with a contrustor of "SomeComponent"

   function App({ children }){
     return (
       <div>
           {children}
        </div>
     )
   }   


   function SomeComponent(){
      return (
        <div>
         <h1>
            Hi!
         </h1>
        </div>
      )
   }


   it('should have length of "1" when finding "SomeComponent" comp', () => {
    const wrapper = shallow(<App>
         <SomeComponent />
     </App>
     )
    expect(wrapper.find(SomeComponent)).toHaveLength(1);
   });

You can find all the valid selectors here.

closest(selector : EnzymeSelector)

finds the closest parent that matches the selector. It traverses every node up starting with itself.


  it('should have an h1 with a text of "Hello World"', () => {
    let wrapper = shallow(<App />);
    expect(wrapper.find(Header).closest('div.light')).toHaveLength(1);
  });


  it('should have a parent element of "div" with a class of "light"', () => {
    let wrapper = mount(<App />);
    expect(wrapper.find(Header).closest('div.light')).toHaveLength(1);
  })

These two tests should pass.

contains(node : node | nodes[])

Tests if the containing wrapper has a matching child or children.

   it('should have a node of <Header /> and the right props', () => {
    let wrapper = shallow(<App />);
    expect(wrapper.contains(
      <Header theme="light" message="Hello World" handleToggleTheme= 
           {wrapper.instance().handleToggleTheme} />
    )).toBeTruthy();
  });



  it('should contain these two nodes', () => {
    const wrapper = mount(<App />);
    expect(wrapper.contains([
      <h1>Hi</h1>,
      <button className="right" onClick={wrapper.instance().handleToggleTheme}>
        <i className="light" />
      </button>
    ])).toBeTruthy();
  })

We're using the instance() method to get the reference of the handleToggleTheme function out of that component instance. More on the instance method later. These tests should pass.

containsAllMatchingElements(nodes: nodes[])

Must match all the nodes on the current wrapper.

 it('should have these two nodes when shallow mounting', () => {
   let wrapper = shallow(<App />);
    wrapper.setState({ listItem: '1' })
    expect(wrapper.containsAllMatchingElements(
      [
        <Form handleChange={wrapper.instance().handleChange} value="1" handleClick={wrapper.instance().handleClick} />,
        <Header theme="light" message="Hello World" handleToggleTheme={wrapper.instance().handleToggleTheme} />
      ]
    )).toBeTruthy();
  });

  it('should have these two nodes when mounting', () => {
    let wrapper = mount(<App />);
    expect(wrapper.containsAllMatchingElements([
      <h1>Hi</h1>,
      <button className="right" onClick={wrapper.instance().handleToggleTheme}>
        <i className="light" />
      </button>
    ])).toBeTruthy();
  })

We're using setState to update the value of a property in our state. It works the same as React's setState. this.setState({property: newValue}). These tests should pass.

containsAnyMatchingElements(nodes: nodes[])

Must match at least one of the nodes on the current wrapper.

  it('should this Form with the right props', () => {
    expect(wrapper.containsAnyMatchingElements(
      [
        <Form handleChange={wrapper.instance().handleChange} value="1" handleClick={wrapper.instance().handleClick} />,
      ]
    )).toBeTruthy();
  });

  it('should return true because the "i" element is right while "div" element is not the right structure', () =>{
    expect(wrapper.containsAnyMatchingElements([
      <div className="form">
      </div>,
      <i className="light" />
    ])).toBeTruthy();
  });

You're wondering why we have a value of "1" in the shallowed part that's because we used setState on the previous section and updated our listItem to have a value of 1. These tests should pass.

first()

Behaves like at(0) refer.

hasClass(class:string)

Tests if the current node has prop of className and checks the value.


   it('should have a class of "light"', () => {
    let wrapper = shallow(<App />);
    expect(wrapper.hasClass('light')).toBeTruthy();
   });

   it('should have a class of "form-control"', () => 
     wrapper = mount(<App />);  
    {
    expect(wrapper.find(Form).find('#form').childAt(0).hasClass('form-control')).toBeTruthy();
  })

These tests should pass.

html()

returns the raw html string of the current wrapper.

   it('should return the correct string', () => {
    let wrapper = shallow(<App >);
    expect(wrapper.childAt(2).html()).toBe('<ul class="list"></ul>')
  });

  it('should have an element with an id of "form"', () => {
    let wrapper = mount(<App >);
    wrapper.setProps({ message: 'Hi' });
    expect(wrapper.find('h1').html()).toBe('<h1>Hi</h1>')
  })

These tests should pass too.

instance()

returns the current class instance of the current wrapper it returns null when used on a functional component. the instance method can only be used on the root node.


   it('should be an instance of App', () => {
    let wrapper = shallow(<App />);
    expect(wrapper.instance()).toBeInstanceOf(App);
  });


  it('should be an instance of App', () => {
    let wrapper = mount(<App />);
    expect(wrapper.instance()).toBeInstanceOf(App);
  });

These tests should pass.

invoke(functionPropName)(..arguments)


  it('should have a prop of "value" with a value of "12344"', () => {
    let wrapper = shallow(<App />);
    wrapper.find(Form).invoke('handleChange')({ target: { value: '12344' } });
    expect(wrapper.find(Form).prop('value')).toBe('12344');
  });


  it('should truthy value of prop "isDarkTheme"', () => {
    let wrapper = mount(<App />);
    wrapper.find(Header).invoke('handleToggleTheme')()
    expect(wrapper.state('isDarkTheme')).toBeTruthy();
  })

These tests should pass too. I think you're wondering I'm passing an object with a target property which has a value of an object with another property of value because my handleChange function looks like this

   handleChange = ({ target: { value } }) => {
    this.setState({
      listItem: value
    })
  }

is(selector: EnzymeSelector)

Checks if the selector matches the current wrapper.


  it('should return false when checking with ".is"', () => {
    let wrapper = shallow(<App />);
    expect(wrapper.find(List).find('ul').is('.list')).toBeFalsy();
  });


  it('should return true when checking with ".is"', () => {
    let wrapper = mount(<App />);
    expect(wrapper.find(List).find('ul').is('.list')).toBeTruthy();
  });

The reason that the first test failed and thrown an error because of the reason
that our element structure when using shallow looks like this

    <div className="light">
      <Header theme="light" message="Hello World" handleToggleTheme={[Function]} 
        />
      <Form handleChange={[Function]} value="" handleClick={[Function]} />
      <List items={{...}} />
    </div>

It does not render the ul element but when we use it on mount it works.

isEmptyRender()

returns true if the current wrapper returns null or false.


  it('should not be falsy because "App" does not return neither null or false', () => {
    let wrapper = shallow(<App />);
    expect(wrapper.isEmptyRender()).toBeFalsy();
  });

  it('should return "Nothing" literally', () => {
    class Nothing extends React.Component {
      render() {
        return (
          null
        )
      }
    }
    let wrapper = mount(<Nothing />);
    expect(wrapper.isEmptyRender()).toBeTruthy();
  });

These tests should pass. The second test pass due to the reason we returned null on the render method.

key()

returns the key value of the current wrapper.

  it('should have a prop of items with a length of 2 and a key value of "japan"', () => {
    let wrapper = mount(<Form />);
    let form = wrapper.find(Form);
    form.invoke('handleChange')({ target: { value: 'okinawa' } });
    form.invoke('handleClick')();
    form.invoke('handleChange')({ target: { value: 'japan' } });
    form.invoke('handleClick')();

    expect(wrapper.find(List).prop('items')).toHaveLength(2);
    expect(wrapper.find(List).find('ul').childAt(1).key()).toBe('japan');
  });

last()

returns the last node base on the current selected wrapper.


  it('should return the last child type which is "List"', () => {
    let wrapper = shallow(<App />);
    expect(wrapper.children().last().type()).toBe(List);
  });

  it('should return the last child type which is "div"', () => {
    let wrapper = mount(<App />)
    expect(wrapper.children().last().type()).toBe('div');
  });

name()

returns the "name" of current wrapper.

   it('should return a name with a value of "div"', () => {
    let wrapper = shallow(<App />);
    expect(wrapper.name()).toBe('div');
  });

  it('should return a name with a value of "App"', () => {
    let wrapper = mount(<App />);
    expect(wrapper.name()).toBe('App');
  });

Again, refer to the Structure Section if your having a little problem understanding.

filter(selector: EnzymeSelector)

it returns a new wrapper based on the selector given.

  it('should have a prop of "item" with length of 3', () => {
    let wrapper = mount(<App />);
    let form = wrapper.find(Form);
    let values = ["ohio", "usa", "amawa"];
    values.forEach((value) => {
      form.invoke('handleChange')({ target: { value } });
      form.invoke('handleClick')();
    })

  expect(wrapper.find(List).find('ul li').filter('.list-item')).toHaveLength(3);

  });

});

props()

returns the prop object of the current wrapper

  it('should have a prop "items" with a value of []', () => {
    let wrapper = shallow(<App />);
    expect(wrapper.find(List).props().items).toEqual([]);
  });


  it('should have a prop "message" with a value of "Hello World"', () => {
    let wrapper = mount(<App />);

    expect(wrapper.find(Header).props().message).toBe("Hello World");
  });

prop(key:string)

return the value of the property of the current wrapper.

  it('should have a prop "items" with a value of []', () => {
    let wrapper = shallow(<App />);
    expect(wrapper.find(List).prop('items')).toEqual([]);
  });

  it('should have a prop "message" with a value of "Hello World"', () => {
    let wrapper = mount(<App />);

    expect(wrapper.find(Header).prop('message')).toBe("Hello World");
  });

setProps(newProps: any)

Sets the new props object of the root node. It can only be used on the root node.


 it('should have an updated prop "message" with a value of "What the fun"', () => {
    let wrapper = mount(<App />);
    wrapper.setProps({ message: 'What the fun' })
    expect(wrapper.find(Header).prop('message')).toBe("What the fun");
  });

setState(newState : any, callbackFunc: Function)

Sets the new state object of the root node. It can only be used on the root node.

  it('should have an updated prop "isDarkTheme" with a value of true', () => {
    let wrapper = mount(<App />);
    wrapper.setState({ isDarkTheme: true });
    expect(wrapper.state('isDarkTheme')).toBeTruthy();
  });

simulate(event:string, ...args)

Invokes an event on the current wrapper.

  it('should have an updated value of "1234"', () => {
    let wrapper = mount(<App />);
    wrapper.find('input').simulate('change', { target: { value: '1234' } });
    expect(wrapper.state('listItem')).toBe('1234');
  });

state(key:string)

return the value of a state property.


  it('should a input with a value of "abc"', () => {
    let wrapper = shallow(<App />);
    wrapper.setState({ listItem: 'abc' });
    expect(wrapper.state('listItem')).toBe('abc');
  });

  it('should have an updated "message" prop with a value of "Hi"', () => {
    let wrapper = mount(<App />);
    wrapper.setProps({ message: 'Hi' });
    expect(wrapper.prop('message')).toBe('Hi');
  })

text()

returns the text of the current wrapper.

  it('should a text of "Hello World"', () => {
    let wrapper = mount(<App />);
    expect(wrapper.find('h1').text()).toBe('Hello World');
  });

type()

returns the type of the current wrapper.


   it('should return the App', () => {
    let wrapper = shallow(<App />);
    expect(wrapper.at(0).type()).toBe('div');
  }); 

  it('should return the App', () => {
    let wrapper = mount(<App />);
    expect(wrapper.at(0).type()).toBe(App);
  });

Check this post out to make your own Cover Image for your dev.to Post.

DEV Community: Mark Abeto

Notification system for a grocery app with React and NodeJS

TL;DR

Getting Some Groceries

Setting Up Our Project

Creating Our API

What is Novu?

Finishing Our API

Closing the Shopping List

Get Better with TypeScript using Express

Hi Guys Good Day!

GET /api/v1/dogs

GET /api/v1/dogs/:id

POST /api/v1/dogs

PUT /api/v1/dogs/:id

DELETE /api/v1/dogs/:id

Thank you guys for reading this post.

Have a Nice Day 😃!.

Working with Bitbucket Pipelines

Hi Guys Good Day!

CI - Continuous Integration

CD - Continuous Delivery or Continuous Deployment

Thank you guys for reading this post.

Have a Nice Day 😃!.

Implement a Stack with TypeScript

Hi Guys Good Day!

Thanks guys for reading this post.

Have a Nice Day and Stay Safe 😃!.

How to configure Webpack with React Testing Library from the ground up

Hi Guys Good Day!

Happy Testing.

Thanks guys for reading this post.

Have a Nice Day and Stay Safe 😃!.

Free Resources to Learn while in Lockdown

Hi Guys Good Day!

1. Pluralsight

2. Udemy

3. VueMastery

Be a Better Developer...

Thanks guys for reading this post.

Have a Nice Day and Stay Safe 😃!.

How to Debug Nodejs, TypeScript Code in VSCode

Hi Guys Good Day!

Thanks guys for reading this post.

Have a Nice Day 😃!.

Carousel with Vanilla JavaScript

Thanks guys for reading this post.

Have a Nice Day 😃!.

70 JavaScript Interview Questions

Hi Guys Good Day and a Happy New Year 🎆🎆🎆!

The Questions

1. What's the difference between undefined and null?.

2. What does the && operator do?

3. What does the || operator do?

4. Is using the + or unary plus operator the fastest way in converting a string to a number?

5. What is the DOM?

6. What is Event Propagation?

7. What's Event Bubbling?

8. What's Event Capturing?

9. What's the difference between event.preventDefault() and event.stopPropagation() methods?

10. How to know if the event.preventDefault() method was used in an element?

11. Why does this code obj.someprop.x throw an error?

12. What is event.target ?

13. What is event.currentTarget?

14. What's the difference between == and === ?

15. Why does it return false when comparing two similar objects in JavaScript?

16. What does the !! operator do?

17. How to evaluate multiple expressions in one line?

18. What is Hoisting?

19. What is Scope?

20. What are Closures?

21. What are the falsy values in JavaScript?

22. How to check if a value is falsy?

23. What does "use strict" do?

24. What's the value of this in JavaScript?

25. What is the prototype of an object?

26. What is an IIFE, what is the use of it?

27. What is the use Function.prototype.apply method?

28. What is the use Function.prototype.call method?

29. What's the difference between Function.prototype.apply and Function.prototype.call?

1. What's the difference between `undefined` and `null`?.

2. What does the `&&` operator do?

3. What does the `||` operator do?

9. What's the difference between `event.preventDefault()` and `event.stopPropagation()` methods?

10. How to know if the `event.preventDefault()` method was used in an element?

11. Why does this code `obj.someprop.x` throw an error?

14. What's the difference between `==` and `===` ?

23. What does `"use strict"` do?

24. What's the value of `this` in JavaScript?

25. What is the `prototype` of an object?

27. What is the use `Function.prototype.apply` method?

28. What is the use `Function.prototype.call` method?

29. What's the difference between `Function.prototype.apply` and `Function.prototype.call`?

30. What is the usage of `Function.prototype.bind`?

34. Implement the `Array.prototype.map` method by hand.

35. Implement the `Array.prototype.filter` method by hand.

36. Implement the `Array.prototype.reduce` method by hand.

39. Why does `b` in this code become a global variable when you call this function?

42. What's the difference between `var`, `let` and `const` keywords?

47. What are `ES6 Modules`?

48. What is the `Set` object and how does it work?

56. What is `NaN`? and How to check if a value is `NaN`?

58. How to check if a number is even without using the `%` or modulo operator?

62. What's the difference between `Object.seal` and `Object.freeze` methods?

63. What's the difference between the `in` operator and the `hasOwnProperty` method in objects?

69. Why does `typeof null` return `object`? How to check if a value is `null`?

70. What does the `new` keyword do?