
This is going to be a short blog on handling error in Express using Typescript.

In this blog I will write about **handle error gracefully** in **Express**.
Express is one of the most famous *Node.js frameworks*.

It’s crucial to distinguish between different types of errors in Node.js. Some errors are recoverable, while others are not. 
For instance, a wrong user input is a recoverable error, but a syntax error is not.

Accordingly Errors can be divided into two categories in Node.js:

1. Operational errors (e.g. database connection error, invalid user input, etc.)
2. Programming errors (e.g. syntax error, reference error, etc.)



### Handling Programming Errors

Programming errors are usually not handled in Node.js. When they occur Node.js process is terminated. This is because programming errors are usually not recoverable and the process should be terminated to avoid further damage.
We can listen to `unhandledRejection` and `uncaughtException` events to handle programming errors. 
But it is generally recommended to just let the process crash and restart it using a process manager like [pm2](https://www.npmjs.com/package/pm2)

```javascript
// unhandledRejection
process.on('uncaughtException', (err) => {
  // ... log the error or do any other stuff ...
  process.exit(1);
});

// un handled promise rejection
process.on('unhandledRejection', (err) => {
  // ... log the error ...
  // server.close will close the server and wait for all the connections to close
  server.close(() => {
    process.exit(1);
  });
});
```

### Handling Operational Errors

For operational errors, we need to handle them gracefully. We need to send a proper response to the client and log the error for debugging purposes.
For that, Let's look at middlewares first.

Express works with the **concept of middleware**. Middleware is a function that has access to the request and response object. 

Middlewares can

- Modify the request and response object
- End the request-response cycle
- Call the next middleware in the stack

_We also handle error in Express using middleware._

Let's learn all this by creating a simple Express app.

#### Create a simple Express app

First, we need to create a new directory and initialize a new node project.

```bash
mkdir Express-error-handling
cd Express-error-handling

# generates package.json with default settings ( -y flag - yes to all questions)
npm init -y
```

Now we need to install Express and typescript.

```bash
# install dependencies
npm i Express typescript ts-node

# install types for Express as dev dependency
npm i -D @types/Express @types/node

```
We are not going to explore more about configuring TypeScript and we are not going to create a tsconfig.json file. We are going to use ts-node to run our typescript code.
next let's create a new file called `index.ts` and add the following code.

```typescript
import Express from 'Express'

const app = Express()

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

app.listen(3000, () => {
    console.log('Server is running on port 3000')
})
```


now that we have a simple Express app, let's add some error handling to it. We are going to create a new file called `error.ts` and add the following code.

```typescript

// base error class
export class BaseError extends Error {
    status: number
    isOperational: boolean
    constructor(message: string, status: number, isOperational = true) {
        super(message)
        this.status = status
        this.isOperational = this.isOperational
        Object.setPrototypeOf(this, BaseError.prototype)

    }
}
```

This will be the base class to other classes we are going to create to handle other type of errors.
In this error class we have a constructor that takes three arguments.
- The first argument is the error message ( pretty standard way of indicating what happend)
- the second argument is the status code (This indicates what to return for the Rest API request)  
- the third argument is a boolean value that indicates if the error is operational or not.

Let's add more error classes to our `error.ts` file.


```typescript
// 404 error class
class NotFoundError extends BaseError {
    constructor(message: string) {
        super(message, 404)
        Object.setPrototypeOf(this, NotFoundError.prototype)
    }
}

// validation error class
class ValidationError extends BaseError {
    errorData: Record<string, string>[]
    constructor(data: Record<string,string>[]) {
        super("Validation Error", 400)
        this.errorData = data
        Object.setPrototypeOf(this, ValidationError.prototype)
    }
}
```
we can create as many error classes as we want. In this example I have created two error classes. The first one is the `NotFoundError` class and the second one is the `ValidationError` class.
next we need to create a middleware that will handle the errors.
**Error Handler Middleware** is a middleware that takes four arguments. 
The first argument is the error object, the second argument is the request object, the third argument is the response object and the fourth argument is the next function.
**i.e If you don't provide 4 arguments to a middleware, Express will treat it as a normal middleware and not an error handler middleware.**

we now create a new file called `errorHandler.ts` and add the following code.
  
  ```typescript
    // error handler middleware
    export const errorHandler = (err: Error, req: Request, res: Response, next: NextFunction) => {
        if(err instanceof ValidationError) {
            return res.status(err.status).json({
                status: 'fail',
                message: err.message,
                data: err.errorData
            })
        } else if (err instanceof BaseError) {
        if( err.isOperational) {
            return res.status(err.status).json({
                status: err.status < 500 && err.status >= 400 ? 'fail' :'error',
                message: err.message
            })
            // 
        } else {
            // log the error
            console.log(err)
            // send generic error message
            return res.status(err.status).json({
                status: 'error',
                message: 'Something went wrong'
            })

        }
        }
    }


```

now that we have created the error handler middleware, we need to add it to our Express app. We can do this by adding the middleware using `app.use` method.
let's add the following code to our `index.ts` file.


```typescript
app.use(errorHandler)
```
now we can use our error classes in our controllers and/or middleware to throw errors.
let's add a new route to our `index.ts` file.


```typescript
// check if id is a number
const validateId = (req: Request, res: Response, next: NextFunction) => {
    const id = Number(req.params.id)
    if(isNaN(id)) {
        next(new ValidationError([
            {
                id: 'id needs to be a number :( '
            }
        ]))
    }
    next()
}

app.get('/users/:id', validateId, (req, res) => {
    const id = req.params.id
    if(id === '1') {
        res.send('User 1')
    } else {
        next(new NotFoundError('User not found'))
    }
})
```

now we can test our app by running the following command.

```bash
npx ts-node index.ts
```
Now when we hit the `/users/2` route, we will get the following response.

```json
{
    "status": "fail",
    "message": "User not found"
}
```
with 404 status code.

and When we hit the route `/users/unknown` we will get the following response.

```json
{
    "status": "fail",
    "message": "Validation Error",
    "data": [
        {
            "id": "id needs to be a number :( "
        }
    ]
}
```

and We have successfully created a simple Express app with error handling.

For bigger projects and use-cases you can adapt the same strategy for error handling , even though you might have many and different error classes with different requirments for the error message and status code.

FYI , I have used [Jsend](https://github.com/omniti-labs/jsend) to format our API response.

This is it for this blog. I hope you enjoyed it. If you have any questions, feel free to email me :) 

Errors are common and un-avoidable but we are going to learn Handling Operational Errors in Express using Typescript using custom error classes

Handling Errors in Express Typescript


Hello 👋🏾 , welcome !

I am learning Rust and I am finding much of the language very interesting and I am falling in love already , haha.

Either ways I wanted to blog some the topics that I am learning and Find interesting and I am staring with the basic!

## Variables

Few points about variables in Rust.

1. Every variable is immutable by default
2. to make it mutable you can just add `mut`
3. Variables are ==! constants
4. Constants are always immutable , you can make variables mutable or not
5. Constants should be annotated! 
    
    ```rust
    // varaibles with default immutablity
    let a = 4;
    
    // mutable vairables
    let mut a = 4
    
    // convention to make your constant Capital and snake case 🐍
    const EXAMPLE_CONSTANT:u32 = 444;
    ```
    

## Constants ☀️

Constants can be declared on any scope 

- Global scope
- any other scope

In **`Rust`** Scopes are determined by **`{}`** unlike `JS`  which depends on the declaration keyword you use 🤦🏾‍♂️.

If you use `var` its function scoped while `let` and `const` act on a `{}` scope!

 Constants could only be set to a constant expression that include a variable with a known value before runtime

```rust
const FIRST_CONSTAT:u32 = 33*33; ✅
// So you can't use mutable variable to compute value of a constant!
const SECOND_CONSTAT:u33 = a*4; ✅

let mut ex = 3;

// this is going to throw an error compile time!
const THIRD_CONSTANT = ex*4 ❌
```

I.e rust uses snake-case with capital for constants as a convention!

## Shadowing 🥷🏾

Shadowing happens when you hide a variable in a higher scope or same scope by using the same variable name.

Shadowing is common in many programming languages and somehow the same rule applies to `rust` but rust shadowing was weird for one reason. 

- You can shadow a variable in the same scope 🤯
    
    If you tell this to `JS` It would probably crash! 
    

```rust
// declare a variable with name a
let a = 33;

// Error ( variables are immutable )
a = 32;
// this is valid in rust ( same scope level shadowing)
let a =32;

fn deeper() {
	// now a is different
	let a = 44;
}
```

The above code will throw an error for immutability  ! but re-declaring with the same is fine with `rust` 🦀

# Data types in Rust

Rust have two types of data `scaler` and `compound`

Scalar Data types are four

1. Character
2. Integer
3. Float
4. Boolean

Here  notice string is not a scalar data type!

### Characters

Characters are four byte size data types that can hold unicodes , and characters in different languages.

### Integers

Integers can be signed or unsigned and can hold different sizes of data. the well known sizes are the following

1. 8 ( u8 , i8)
2. 16 (u16 , i16 )
3. 32 (u32, i32 )
4. 64 (u64 , i64 )
5. 128 ( u128 , i128 )
6. arch (usize , isize) - this depends on the arch of your computer - if your computer is 64 bit it will be 64 bit , if not 32 bits or what ever the arch of your computer is!

so for signed Integers

1 bit is used for sign so the actual value the number variable can hold is 2^(n-1) for any n while 

for unsigned it would just be `(2^n)-1`

## Number literals

Number literals are exciting way of writing different base of numbers in that languages - the first  four are basically same as JS except for using `_` (which is basically the same as `,` in Real life 🙂)

<table>
    <thead>
        <tr>
            <th>Number literals</th>
            <th>Example</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Decimal</td>
            <td>98_222 same as 98,222</td>
        </tr>
        <tr>
            <td>Hex</td>
            <td>0xff</td>
        </tr>
        <tr>
            <td>Octal</td>
            <td>0o77</td>
        </tr>
        <tr>
            <td>Binary</td>
            <td>0b1111_0000</td>
        </tr>
        <tr>
            <td>Byte (u8 only)</td>
            <td>b'A'</td>
        </tr>
    </tbody>

</table>
 

### Integral overflow

I suggest you don’t overflow your `int` but if you do be aware of how rust handles it in Prod. 👇🏾

[link](https://doc.rust-lang.org/book/ch03-02-data-types.html#integer-overflow)

### Float Numbers

represented as single or double permission , implemented the same as JS , IEE-754 standard.

Sounds familiar ? JS has the same standard too!

```rust
// single percision
let a: f32 = 44.4;
// double percision ( default )
let b: f64 = 44.33;

```

*Integer Operations*  truncate toward zero ( for +,-,*,/)

## compound types

There are two primitive compound types 

1. Tuples ( array of different types )
2. Array ( type of similar types ) - Array have fixed size and data is allocated on the stack rather than the heap.

```rust
// tuple with two i32 bits
let tup = (33,33);

// type for tuples
let person: (str,u8) = ('abebe', 22)

let arr1 = [33,44]

// which is the same as below (with data annotation)
let arr1:[i32;2] = [33,44]

```

One main difference between those two compound types and other collections you encounter in `rust` like `vec` and `String` is that these compound types live in the stack because

Aha Rust the most loved programming language. What does its variable look like if it does have one? Spoiler alert it does have one and it is very interesting.

Variables in Rust.

Is Bun going to replace Node.js ?

Bun is
- faster
- Include toolkits (test, build, package)
- Drop in replacement for Node.js

Bun even implements almost all Node.js API's using zig!
### Things to think about
So is this enough to replace Node or does it need more?
How about migration ?


Is Bun.js The next Node?

**Before we dive into this blog I like to point out that I use “mess” and Technical debt ( TD) interchangeably.**

I am not going to clarify what **Technical debt** is as it's a common term and kinda conventional wisdom but If you like to dive into that I suggest you do that before reading this blog




## Technical debt is common.
---

If you have been working on a project for a while, you might know where the messes are ( Parts that have **Technical debt** ).

It’s like a city in a sense. each city has parts that are well maintained with nice sidewalks and roads and the infrastructure well kept but when you stay a while and look around new places you find parts of the city with a messy sidewalk, bumpy roads, and even worse dangerous hoods to live in. you usually know the latter after living for in the city for some time.

Getting back to my topic You want to fix these messes But you might not have enough time or they are used in many places making it hard to fix them (at least related ones). So you just leave them there and hope you will fix them later. spoiler alert You never do.

But those messes spread like wildfire. even (Andrew Hunt and Dave Thomas authors of the PP(Pragmatic Programmer)) explain this in a broken window glass analogy. once a building in a neighborhood has a broken window glass the neighborhood starts to have multiple broken window glasses all over and before you know it it's a messy neighborhood ( it becomes a bad part of town). If you leave the mess alone, it won’t clean itself even worse it will make your whole codebase even messier.

As one of my programmer friends said “I write code that looks like the code around it” and I think every developer does this at some level.

After dealing with a lot of the above issues I came up with a method that worked best for me before explaining that let’s talk about what makes TD hard to track and fix.




## Why is dealing with Technical debt hard?
---

Going back to the broken window glass analogy - you want to fix broken glasses before another broken glass appears in the neighborhood ( if you have a couple of them that is ).

If you have multiple broken glasses you are not only going to fix those that are broken now but also windows that are going to be broken soon( trust me they are coming )

enough with the analogy so What I am saying is once you have a messy code someone might write a code that looks like it ( messy) so you need to fix it ASAP before another one pops in because as we all know development never stops.

But this is not realistic we don’t usually have time and you might be even at a stage where you have many messes in your code already, so what shall you do in these cases?

### Proposed solution
---

Here is what I am proposing comes in, **put a yellow tape around it!**

Yep, I am suggesting putting yellow tape around the broken window glass implying you are planning to fix it soon.

If you can’t fix it now, communicate with other developers that this is a mess and you are planning to fix it soon, Other developers will see the yellow tape ( a **TD comment** ) and won’t adapt it at least or in some cases fix it in the process.

This idea is not new you are already using this in your code (e.g. TODO comments ), also experimental flags as well, You ship products that are not yet finished ( not tested properly or might have bugs) but you ship them with an experimental flag well because feedback is valuable.

### But why label it, why not just fix it?
---

**Fixing a mess (Refactoring) is not easy**

Refactoring a bad code starts with identifying bad code before doing the actual work. it's not a good idea to refactor one part of a related code and leave the other untouched. On top of that, you have to work in teams. Working in teams is particularly difficult because you might not be the one who needs to clean the code, as the other members are responsible / more equipped to do the cleaning but communicating is hard. You have to give line numbers and file path and how do you track if it's fixed? aah, the classic **refactoring myopia**. It is easier when you think about easy and small stuff but when it gets bigger and complex that is when it gets fuzzy

But wait we don’t want to refactor all bad code, There are codes that severely need refactoring while others we can even leave for later but you are the one who knows the level of TD a code has ( as you are the developer ) so you don’t only need to communicate but also prioritize, hmm

Fortunately, you can set the severity ( priority ) of the

TD comment

- aha That way you can decide as a team you want to clean up only severe technical debts.

That is cool but what about related parts among different files? because refactoring usually encompasses different files and you want to combine/clean up related files.

For example, let’s say you want to clean up user management - that is huge (takes a lot of effort and time to refactor ) but you want to break it down and fix profile management instead. But wait the code is all over the place, how do you deal with that? hmm…

ahh the

TD comments

has support for labels. It can be anything you like to help you relate related code - it could be a sub-feature / any other way you prefer

## Save your tears for another day

<img src="https://media.giphy.com/media/xPqYFRk3d5x2vCyAGz/giphy.gif" />

Putting a `TD comment` doesn’t relieve you of the responsibility to refactor, You still need to refactor but next time that is but will that day come? Hopefully yes but for now maybe you can start by making a task in your project management tool and keep it in the backlog.

aha grouped labels need to be related to a task - but that is for later we don’t have support for that yet but on the pipeline

But How do I use `TD comments` And what are they?

Well `TD comments` are just comments in your code as the name implies. they have a certain structure to help discover them from your code and help analyze them.

<img src="/assets/blog/td-manager/td-manager.png" alt="td-manager gif"  />


Each label has a 

- Label - which states the name for a technical debt, you can name this with a specific feature, for example, if you are refactoring som …. [finish]
- Level - specify the severity/priority of the technical debt - 1 being the least and 5 the highest
- Message - in the message you can describe why you put the comment and anything you want to say

### So how do we use it

When I first wanted to build this tool I wanted a VS-Code extension that scans my code of TD and shows me where with a little stat so that is basically what I have now but I also see a use of this tool using a CLI tool or other IDEs as well

But as of this writing, you can install the extension from [here](https://marketplace.visualstudio.com/items?itemName=HenokTsegaye.td-manager) 

Here is a little animation to show you how things work

<video controls autoplay src="/assets/blog/td-manager/td-manager.mov" alt="td-manager gif"   />

### Try it
---

Try to use the extension if it makes sense for you and I would love to get feedback from developers as well since this is FOSS you can also contribute to it
Here is a GitHub [link](https://github.com/henoktsegaye/TD-manager)

If you have been working on a project for a while , you might know where the messes are ( Parts that have Technical debt ). It’s like a city in a sense

How I manage Technical debt right from vscode.

In this blog, we are going to build a simple CLI app that lists files in a directory and shows the content of a file in that directory. We will use Node.js to build this app. The aim of this blog is to show how we can interact with the console and output the result to the console.

### Prerequisites
- Node.js
- npm or pnpm (I am using pnpm in this blog)
- git

### Getting started

To help us get started faster, we are going to clone a starter project from GitHub that supports TypeScript and ESLint.
```bash
git clone git@github.com:henoktsegaye/node-ts-starter.git
```

### Installing dependencies
```bash
pnpm install
```
When running node on the terminal, anything passed while executing the file could be accessed from the `process.argv` array. The first element of the array is the path to the node executable while the second element is the path to the file that is being executed; the rest of the elements in the array are the arguments passed to the file. For example, if we run the following command on the terminal:
```bash
node index.js --version
```
The `process.argv` array will look like something like this:
```js
[
    '/usr/local/bin/node', // path to the node executable
    '/Users/USERNAME/node-ts-starter/index.js', // path to the file that is being executed
    '--version' // arguments passed to the file
]
```
We can use this array to access the arguments passed and parse the arguments passed to do whatever we wanted to do (based on the arguments passed). For example, if we want to print the version of the app we can do something like this:
```js
if (process.argv.includes('--version')) {
    console.log('0.0.1');
}
```

### Using npm packages
Using the `process.argv` array to parse the arguments passed to the file could be a bit slow, tedious, and error-prone if we have a lot of arguments to parse.
![Slow process](https://media.giphy.com/media/OocLVILtd7ybm/giphy.gif)
There are a couple of great npm packages that could actually help us write this CLI app faster, but we could choose not to use those packages and write our own parser instead. In this blog, we are going to use some of these packages anyway to help us write this app faster.

Here are a couple of packages that we are going to use in this blog:

- [commander](https://www.npmjs.com/package/commander) - helps us to build a command line interface
- [chalk](https://www.npmjs.com/package/chalk) - helps us to style the output to the console
- [inquirer](https://www.npmjs.com/package/inquirer) - helps us to build interactive command line interfaces

Once we have installed dependencies from the starter project, we can start to install our own dependencies.
```bash
pnpm install commander chalk inquirer
```

### Building the app

A CLI app is different in the way that the user interacts with the app; there is no UI or nice interface the user could click around. Instead, users have to type commands to do everything, even to get help. `Commander.js` could actually help us with this. Commander handles parsing input from the command line that the user types and helps us to define custom commands and options for our app.
Let's see this in action.
First, let's start by creating a program from commander:
```ts
import { Command } from 'commander';

const program = new Command();
```

We created a program instance from commander. Now we can start to define commands and options for our app.
Let's start by defining a version for our app and a description.

```ts
program
.version('0.0.1')
.description('A simple CLI app that lists and shows the content of a directory');
```
Now that we have the basics, we can call the `parse` method on the program instance to parse the input from the command line and pass `process.argv`.
```ts
program.parse(process.argv);
```
Now we can run our app and see the version that we defined.
```bash
pnpm run dev --version

# output 0.0.1
```
Now let's define an option that lists the content of a directory. We can do that by calling the `option` method on the program object.
```ts
program
.version('0.0.1')
.description('A simple CLI app that lists and shows the content of a directory')
.option('-l, --list', 'list the content of a directory')
.option('-s, --show <path>', 'show the content of a file')
.parse(process.argv);
```
Now that we have defined the options for the CLI app, we can start to implement the logic for each option.
```ts
import fs from 'fs';
import chalk from 'chalk';

// previous code here

const options = program.opts();

// if the list option is passed, we list the content of the directory
if (options.list) {
    fs.readdir(process.cwd(), { withFileTypes: true }, (err, files) => {
        if (err) {
            console.log(err);
            return;
        }

        const fileList = files.map((file) => {
            if (file.isDirectory()) {
                return { name: `📂 ${file.name}`, type: 'directory' };
            }
            return { name: `📄 ${file.name}`, type: 'file' };
        });

        fileList.forEach((file) => {
            if (file.type === 'directory') {
                console.log(chalk.blue(file.name));
            } else {
                console.log(chalk.green(file.name));
            }
        });
    });
}

const readFile = (path) => {
    fs.readFile(path, "utf-8", (err, data) => {
        if (err) {
            console.log(chalk.red("Error", err.message));
            return;
        }
        console.log(data);
    });
}

// if the show option is passed, we show the content of the file
if (options.show) {
    readFile(`${process.cwd()}/${options.show}`);
}
```
In this code snippet:
-	`fs.readdir(process.cwd(), { withFileTypes: true }, (err, files) => {...})`: This reads the contents of the current working directory. The withFileTypes: true option ensures that the resulting files array includes file type information.
-	The `fileList` array is constructed to store file names with their respective icons (folders and files).
-	The `forEach` loop iterates over the fileList and prints each file or directory name in color-coded output using chalk.
- `fs.readFile(path, "utf-8", (err, data) => {...})`: This reads the file at the specified path. The utf-8 encoding ensures the file is read as a string.
-	The `if (err)` block handles errors, such as the file not being found, and prints a red error message using chalk.
Now we can run our app and see the result.
```bash
pnpm run dev --list
pnpm run dev --show README.md
```
Pretty neat, right? It's as easy as that!
But wait, there is more.
Now that we have the basics, we want to add a prompt on the `--list` option to ask the user to select a directory/file to show the content of the directory/file.
Let's see this in action.
```ts
import fs from 'fs';
import chalk from 'chalk';
import inquirer from 'inquirer';

const options = program.opts();

// Previous code here ...

// separate the logic for reading a file to a function (make this easier to read/test)
const readDirectoryFiles = (path: string) => {
    fs.readdir(path, { withFileTypes: true }, (err, files) => {
        if (err) {
            console.log(err);
            return;
        }

        const fileList = files.map((file) => {
            if (file.isDirectory()) {
                return `📂 ${file.name}`;
            }
            return `📄 ${file.name}`;
        });

        inquirer
            .prompt([
                {
                    type: "list",
                    name: "file",
                    message: "Select a file to show the content",
                    choices: fileList,
                },
            ])
            .then((answers) => {
                const file = answers.file;
                if (file.startsWith("📂")) {
                    return readDirectoryFiles(`${path}/${file.replace("📂 ", "")}`);
                }
                console.log(chalk.green(file));
                readFile(`${path}/${file.replace("📄 ", "")}`);
            });
    });
};

// if the list option is passed, we list the content of the directory
if (options.list) {
    readDirectoryFiles(process.cwd());
}
```
In the above code

1.Mapping Files and Directories:

  - `const fileList = files.map((file) => {...})`: This part of the code maps through the files array obtained from `fs.readdir` and creates a new array called `fileList`. Each file or directory is prefixed with an icon (📂 for directories and 📄 for files) to visually distinguish them in the prompt.


2.Prompting the User:


  -	`inquirer.prompt([...]).then((answers) => {...})`: The `inquirer.prompt` method is used to display a prompt to the user. The prompt method takes an array of questions, and each question is an object. Here, we have one question:
  -	type: "list": This specifies that the input type is a list, which will display a list of choices for the user to select from.
  -	name: "file": This assigns a name to the answer. The answer can be accessed using this name.
  -	message: "Select a file to show the content": This is the message displayed to the user.
  -	choices: `fileList`: This provides the list of choices that the user can select from, which we created earlier.



3.Handling User Selection:


  -	`then((answers) => {...})`: Once the user makes a selection, the .then method is called with the answers object, which contains the user’s selection.
  -	`const file = answers.file;`: This extracts the selected file or directory from the answers object.
  -	`if (file.startsWith("📂")) {...}`: This checks if the selected item is a directory (starts with 📂). If it is, the function calls readDirectoryFiles recursively with the new path to list the contents of the selected directory.
  -	`console.log(chalk.green(file));`: If the selected item is a file, it logs the file name in green using chalk.
  -	`readFile(${path}/${file.replace(“📄 “, “”)});`: This calls the readFile function to read and display the content of the selected file, removing the 📄 prefix from the file name.


In this new way, we should be able to iterate over directories to list files and select files to view the content.
We can run our app and see the result.

```bash
pnpm run dev --list
```
You should see something like this:
![list](/assets/blog/folder-list.png)

Now you can navigate through the directories and select a file to view the content.

### Conclusion

In this blog, we have learned how to build a simple CLI app with Node.js. We have learned how to use commander to define commands and options for our app. We have also learned how to use chalk to style the output to the console and inquirer to build interactive command line interfaces. You can find the source code for this blog [here](https://github.com/henoktsegaye/file-viewer).
 

A CLI app is a great way for developers and technical people to interact with your application. In this article, we will learn how to build a CLI app with Node.js.

Building a CLI app with Node.js


Welcome to **Understanding Javascript basics** series. On this blog we will try to understand number types in Javascript.

let's get to it 🙂

---
Any numeric value in javascript is expressed by the **Number** primitive data type and its represented as a floating point number.

This is regardless the size of the number( how many bits the number take to store the value), the number sign (positive or negative ) whether or not the number has
decimal point. In general Whole numbers and floating numbers are all represented as **Number**.
which might be strange coming from stablished programming languages like Python, Java and C++.
For example in Python, number data values are represented as **_Integer_** , **_Float_** or **_Complex_** types, according to the value.

Number is are mostly expressed as Numeric literals.
Numeric literals can be written in decimal, hexadecimal, octal, and binary forms.

```javascript
// Decimal
let decimal = 10;

// Hexadecimal prefix 0x
let hex = 0xf00d;

// Octal prefix 0o
let octal = 0o744;

// Binary prefix 0b
let binary = 0b1010;
```

Note that when staring with 0 when expressing numeric literals the number would be interpreted as octal when each number digit is between 0 and 7, if not it would be interpreted as decimal.
When expressing a numeric literal if there is a problem with the literal expression javascript would throw a **SyntaxError**.

Exponential notation is also supported.

```javascript

// exponential notation

2 ** 2; // 4
2 ** -2; // 0.25

/*
 * exponential base 10 
*  notation denoted as  BeN
 * where B is the base and N is the exponent
 * while e is the exponentiation notion - which is the same as 10^N
 */

let exponential = 1.5e3; // 1500
let negativeExponential = 1.5e-3; // 0.0015

```

---

In Javascript numbers are stored as binary with the [IEEE 754 standard](https://en.wikipedia.org/wiki/IEEE_754) with binary64 or double precision format.

Each _Number Data type have 64 bit memory space_ which is equivalent to maximum number value of 2^64 which is equal to 18 quintillion. That is a huge number
but one bit has to be used to represent the sign of the number , since both positive and negative numbers are represented in **Number** data type, we call that a sign bit. 
If a sign bit is 0 it means the number is positive and if it's 1 its a negative number.
Also more bit has to be used to represent the decimal point / exponent in a number which has 11bits in it, we call those exponent bits, its because of those bit that we say in javascript every number is represented as a decimal number.
The fraction / mantissa bits holds the actual value in the number, which is 52 bits in size which gives us about 9 quintillion including the sign bit, which is still a huge number and should be enough for common mathematical operations but if you are in need of a bigger integer you can use [bigInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt)

<ImageBox
  url="/assets/blog/Numbers/bit-representation-in-javascript.png"
  alt="bit representation of numbers in javascript"
  noPopup
/>

IEEE 754 standard define behaviors in javascript number like **_Infinity_** and **_NaN_** which we will look in section below.
The standard has 5 exceptions which we should be aware of

- Invalid Operation:

```javascript
// Invalid operation example
// this is invalid operation because the result is not a real number but a complex number

sqrt(-1); // NaN
```

- Zero division

```javascript
// zero division example

5 / 0; // Infinity
```

- Overflow

```javascript
// overflow example

1.7976931348623157e308 + 2; // Infinity

```

- Underflow

```javascript
// Underflow example

-1.7976931348623157e308 * -2; // -Infinity

```

- imprecise values

```javascript
// imprecise value example

0.1 + 0.2; // 0.300000000009

9007199254740992 + 1; //9007199254740992
```

In javascript all decimal fractions can't be precisely represented which causes problems while operating on decimal point numbers.
The above example with the imprecise value is caused by this issue.
It is sometimes hard to get precise values from decimal point computation / expression and its always safe to assume that values are approximation instead of precise value.

For Integer numbers its always safe to assume precise value as long as we don't overpass / underpass the safe integer limit `Number.MAX_SAFE_INTEGER` or `Number.MIN_SAFE_INTEGER` which is about 9 quintillion.

To read more about why that is, I recommend reading this [blog](https://2ality.com/2012/04/number-encoding.html)

In javascript we have two zeros 0 and -0. 0 is a positive number and -0 is a negative number.
0 and -0 are equal but not identical.

```javascript

// 0 and -0 are equal but not identical

0 === -0; // true

4 * -1 * 0; // -0
4 * 1 * 0 // 0
0 + -0 // 0
- 0 - 0; // -0
0 - 0  // 0
0 * -0  // -0
-0 / 0; // NaN

```

---

## Number Object

Javascript has a wrapper object for Number data type named **_Number_** which defines some static values and methods.
More about primitive wrapper objects <Link href="/blogs/javascript-primitives/" > here </Link>

```javascript
const numberObj = Number("32");
// numberObj is an object

console.log(numberObj);
// 32

numberObj.valueOf(); // 32
```

Javascript Number object define two important static values named **_NaN_** and **_Infinity_**.

---

### Infinity

Infinity is also a member of the global scope object.
A global object always exist in the global scope. It's because of this object that we can access Windows object in browsers and global in Nodejs.
As the name suggests Infinity is a number that is greater than any other number.

```javascript
// Infinity is a static value of the Number object

Infinity; // Infinity in the global scope
Number.POSETIVE_INFINITY; // Infinity
Number.NEGATIVE_INFINITY; // -Infinity
```

As mentioned above **_Overflow_** and **_underflow_** exceptions will return positive and negative Infinity respectively.


<img src="https://media.giphy.com/media/3o7ZesJdQccI0sO3fy/giphy.gif" />

Infinity is reached when your expression returns more than the actual limit javascript numbers can hold and that is 1.7976931348623157e+308 or -1.7976931348623157e+308.

```javascript
// Underflow example

-1.7976931348623157e308 * -2; // -Infinity

// Overflow example

1.7976931348623157e308 + 2; // Infinity
```

To check if a number value is not Infinity we can use the `Number.isFinite()` function which returns true if the value is finite and false if the value is `Infinity` or `NaN`.
The global `isFinite()` function is similar to `Number.isFinite()` but it will try to convert the value to a number before checking if it's finite.
To use this function `Number.isFinite` we need to make sure that the value is a number if its not, it will always return false, we can use the `typeof` keyword to check if the value is a number.

```javascript
// check if a number is finite

if (typeof value === "number" && Number.isFinite(value)) {
  // do something
}
```

To specifically check if a value is Infinity we can use the combination of `Number.isFinite()` and `Number.isNaN()` functions.

```javascript
// check if a number value is Infinity

if (typeof value === 'number' && !Number.isFinite(value) && !Number.isNaN(value)) {
  // value is Infinity / -Infinity
}

// we can also check if the value is infinity using equality operator

if (value === Infinity || value === -Infinity) {
  // value is Infinity / -Infinity
}
```

Here are some properties of the Infinity value

Infinity arithmetic with a finite number is always Infinity when Infinity is in the left side of the operation , but the result might have a different sign.
when using the modulo operator with Infinity the result is always NaN since that doesn't make sense.

```javascript
// Infinity arithmetic with a finite number

Infinity * 3; // Infinity
Infinity * -3; // -Infinity
Infinity + 3; // Infinity
Infinity - 3; // Infinity
Infinity / 3; // Infinity

// modulo operator with Infinity is always NaN

Infinity % 3; // NaN
```

Infinity operation with finite numbers when Infinity/-infinity is on the right hand side of the operation.

```javascript
// Infinity arithmetic with 0

0 / Infinity; // 0
0 / -Infinity; // -0
Infinity / 0 // Infinity
-Infinity / 0 // -Infinity

4 / Infinity // 0
-4 / Infinity; // -0
4 - Infinity; // -Infinity
4 + Infinity; // Infinity
4 * Infinity; // Infinity
4 % Infinity; // 4

```

---

### NaN

NaN is a special number type in javascript. NaN like Infinity is a member of the global scope object and also a static value of the Number class.
NaN stands for **_Not a Number_**.


There are four operations that will return NaN.

1. Failed number conversion
2. Math operations where result is not a real number.
3. Indeterminate calculation
4. Operation with NaN

```javascript
// Failed number conversion

Number("hello"); // NaN
Number("32hello"); // NaN

// Math operations where result is not a real number

Math.sqrt(-1); // NaN , i.e this operation would result in a complex number not a real number
Math.log(-1); // NaN

// Indeterminate calculation

0 / 0; // NaN
0 * Infinity; // NaN
Infinity / Infinity; // NaN
Infinity - Infinity; // NaN

// Operation with NaN

NaN + 1; // NaN
NaN - 1; // NaN
NaN * 1; // NaN
NaN / 1; // NaN
//hello would be converted to NaN and then the operation would be performed
4 * "hello"; // NaN
```

Here are some behaviors of NaN.

- NaN is not equal to any value including NaN itself.
- NaN when used with arithmetic operators will always return NaN.
- NaN when used with comparison operators will always return false.

```javascript
// NaN is not equal to any value including NaN itself

NaN === NaN; // false
NaN !== NaN; // true

// NaN when used with arithmetic operators will always return NaN

NaN + 1; // NaN
NaN - 1; // NaN
NaN * 1; // NaN
NaN / 1; // NaN

// NaN when used with comparison operators will always return false

NaN > 1; // false
NaN < 1; // false
NaN >= 1; // false
NaN <= 1; // false
NaN == 1; // false
NaN === 1; // false
NaN != 1; // true
NaN !== 1; // true

```

`Number.isNaN()` function is used to check if a value is NaN.
This function is different from the global `isNaN()` function which will try to convert the value to a number and then check if it's NaN.
`Number.isNaN()` will only check if the value is NaN and will not try to convert it to a number. If the value being checked is not a number it will return false.

```javascript
// check if a value is NaN

Number.isNaN(NaN); // true
Number.isNaN(1); // false
Number.isNaN("hello"); // false

// isNaN() will try to convert the value to a number and then check if it's NaN

isNaN(NaN); // true
isNaN(1); // false
isNaN("hello"); // true

```

This has been a long article, We will carry on our journey of understanding primitive types in javascript. I hope you enjoyed this one. Until next time ***✌🏽***.

Deep dive into Javascript Numbers are primitive types and represent all number types in Javascript that include integer and floating numbers but in reality every number is represented as floating number in javascript.

Deep dive into Number types in Javascript

Welcome to the **Understanding Javascript basics** series. On this blog we will try to understand primitive types in Javascript. 

let's get to it 🙂

---


Javascript has primitive types (primitive values) that are directly represented at the lowest level of the language implementation.
Javascript in general has two types of data types - **primitive** and **non-primitive** (Object).
Anything other than primitive types in JavaScript is an object. Functions, classes, arrays and **user defined types** are all objects.
You can tell this by using the **typeof** operator which might not be accurate at a time but it's a good enough approximation.

```
typeof 'hello' // string
typeof true // boolean
typeof 1 // number
typeof {} // object
typeof null // object
typeof undefined // undefined
typeof function () {} // function
typeof Symbol('hello') // symbol
```

But here `typeof null` is an object which is not actually true since null is a primitive type.

```
typeof null // object
```

This is considered a bug in javascript.
Javascript primitive types are not objects and their values are immutable. but variables can be reassigned to a new value.
Doing so will create a new variable and the garbage collector will clean up the old one.

example of primitive type immutability
```
let a = 1;
let b = a;
// changing a will not change b
a = 2;
console.log(a); // 2
console.log(b); // 1
```
As both `a` and `b` are primitive types, they are not related to each other.
when copying `b` from `a` Javascript **will copy the value of `a` and assign it to `b`** , so changing one will not change the other.


Let's dive deep into this
<CodeAndImageBox url={"/assets/blog/JP1.jpg"} code={`
let a = 1;
`}
/>


Initializing a variable with a primitive type will create a new value in **stack** and assign the variable to it. JavaScript creates primitive types in stack with fixed space while **Objects** are created in **heap** memory, This is because objects are mutable and can be changed at any time taking up more memory.
This is true because you can mutate objects adding new properties or changing existing ones.


<CodeAndImageBox url={"/assets/blog/JP2.jpg"} code={`
let a = 1;
let b = a;
`}
/>


Copying a primitive type will create a new value in **stack** and assign the variable to it.At this point both `a` and `b` are pointing to different values in the stack.


<CodeAndImageBox url={"/assets/blog/JP3.jpg"} code={`
let a = 1;
let b = a;
a = 2;
`}
/>


Changing the value of `a` will not change the value of `b` since they are pointing to different address in the stack.At this point **GC( Garbage Collector)** will remove unreferenced addresses from the stack.

---
Comparing primitive types to object 👇🏾
```
let a = {
    value: 1
};
let b = a;
// changing a will change b as they have the same reference
a.value = 2;
console.log(a.value); // 2
console.log(b.value); // 2
``` 
As you can see in the above example, Objects variables don't hold values but references, so changing `a` will change `b ` as they have the same reference.

Well if primitives are not Objects you might ask how are we accessing properties off them like this example below ?
```
'hello'.length // 5
```

<img src="https://media.giphy.com/media/3o7btPCcdNniyf0ArS/giphy.gif" />
<br />


This is not a **bug in javascript 😄.**


This is actually one of the features of javascript. Primitives are not Objects but they **act like they are** 🤔 ? Well here is how it works

Javascript maps out primitive types to **_Wrapper Objects_** which is the reason we can see the `length` property of a string.
Which will actually create a new object with value `"hello"`, so you can access the length property ( or any-other String property ) off that object. This is actually true for Other two Primitive types **Boolean** and **Number** .

```
let strObj = new String('hello')
typeof strObj // object
strObj.length // 5

// access the value of the object , which is the primitive value
strObj.valueOf() // hello
typeof strObj.valueOf() // string
```

Boolean Object
```
let boolObj = new Boolean(true)
typeof boolObj // object
boolObj.valueOf() // true
typeof boolObj.valueOf() // boolean
```
Number Object
```
let numObj = new Number(1)
typeof numObj // object
numObj.toFixed(2) // 1.00

numObj.valueOf() // 1
typeof numObj.valueOf() // number
```

But once we had access to the property of the object, garbage Collector will remove unused objects from memory.

Javascript has 7 primitive types:

- undefined
- null
- boolean
- number
- string
- symbol - es2015
- bigint - es2020


The `symbol` data type is new in es6.
`bigint` is new in es2020.

JavaScript is different in the way it treats **Numbers** and **Strings** ( they are represented as a primitive type on their own) which 
is not as common in stablished programming languages like Java, Which for example represent numbers differently according to their size and properties.
Float numbers have a **float** type in **Java** and integers as **int** while in javascript they are both just represent as **Number**.


We will dive deeper into those primitive types and javascript implementation difference with other programming languages in the next blog of this series.

Big thanks for the people whom helped me review the wording in this blog.

Javascript Primitive types are the basic building blocks of Javascript. Primitive types act like objects even if they are not, We will try to understand how they work.