With the release of TypeScript 5.5, working with type predicates has become more intuitive now because it can infer them automatically in many cases. But if you're navigating slightly older code-bases, you're likely to encounter handwritten type predicates more often.

In this article, we will briefly explore what type predicates are and why they are useful. Let's start by looking at the problem they solve.

The Problem

The best way to understand the usefulness of type predicates, I believe, is by noticing the problems that arise when we don't have them:

function isString(value: unknown): boolean {
  return typeof value === "string";
}

function padLeft(padding: number | string, input: string) {
  if (isString(padding)) {
    return padding + input;
        //   ^
        // string | number
  }
  return " ".repeat(padding) + input; // Opps type error here
                 //   ^
                 // string | number
}

Here, the return type of isString is set to boolean, and we use it in a function called padLeft to add padding to the left of an input string. The padding can be either a given string or a specified number of space characters.

You might be wondering why I hard-coded the return type to boolean. This is to illustrate the problem. If you don't add any return type annotation and use the latest version of TypeScript, you won't notice any issue here. For now, bear with me – we'll discuss the version-related differences shortly.

The function will work smoothly at runtime, but TypeScript cannot perform any type narrowing with isString. As a result, the type of padding remains string | number both inside and outside the if statement. This leads to a conflict with repeat's expectation for its first argument, causing the type error.

The Solution: Enter Type Predicates

Even if you are unfamiliar with the term predicate, you have likely used them before. Predicates in programming are simply functions that return a boolean to answer a yes/no question. Several JavaScript built-in array methods, such as filter, find, every, and some, use predicates to help with decision-making.

Type predicates are a way to make predicates more useful for type narrowing. We can fix the problem by using a type predicate as the return type:

function isString(value: unknown): value is string {
  return typeof value === "string";
}

Here the type predicate is value is string. It is saying three things:

• The function is a predicate. So TypeScript will show an error if you try to return anything other than a Boolean value.

• If it returns true, then value is of type string.

• If it returns false, then value is not of type string.

Type predicates let you create user-defined type guards. Type guards are logical checks that let you refine types to more specific types, aka narrow them. So, the above function is also a user-defined type guard.

Here is the full code:

function isString(value: unknown): value is string {
  return typeof value === "string";
}

function padLeft(padding: number | string, input: string) {
  if (isString(padding)) {
    return padding + input;
        //   ^
        // string
  }
  return " ".repeat(padding) + input;
                 //   ^
                 // number
}

Here, TypeScript correctly narrows the type of padding inside the if statement and outside of it.

Now let's briefly look at how type predicates worked before TypeScript 5.5 and what this version has improved.

Type Predicates Before TypeScript 5.5

In our previous example, if we don't specify any return type, it will be inferred as boolean:

function isString(value: unknown) {
  return typeof value === "string";
}

function padLeft(padding: number | string, input: string) {
  if (isString(padding)) {
    return padding + input;
        //   ^
        // string | number
  }
  return " ".repeat(padding) + input; // Opps type error here
                 //   ^
                 // string | number
}

As a result, we have the same error as when we manually wrote the return type boolean. Here is the TypeScript playground link for the above code fragment. Go and hover of the functions or variables for a better feeling of the types. Then see how writing the type predicate solves the problem.

If we don't specify the type predicate, using methods like filter can also result in incorrect type detection:

function isString(value: unknown) {
  return typeof value === "string";
}

const numsOrStrings = [1, 'hello', 2, 'world'];
//      ^
//    strings: (string | number)[]

const strings = numsOrStrings.filter(isString);
//      ^
//    strings: (string | number)[]

Now let's see how TypeScript 5.5 improves the situation.

Type Predicates After TypeScript 5.5

One of the top features of TypeScript 5.5 is it can infer type predicates by analyzing the function body. So if you are using TypeScript 5.5 or later, you don't have to write the type predicate as the return type of isString. TypeScript does it for you, and code like what you see in the example below works perfectly fine:

function isString(value: unknown) {
  return typeof value === "string";
}

function padLeft(padding: number | string, input: string) {
  if (isString(padding)) {
    return padding + input;
        //   ^
        // string
  }
  return " ".repeat(padding) + input; // Opps type error here
                 //   ^
                 // number
}

const numsOrStrings = [1, 'hello', 2, 'world'];

const strings = numsOrStrings.filter(isString);
//      ^
//    strings: string[]

const numbers = numsOrStrings.filter((v) => !isString(v));
//      ^
//    numbers: number[]

I haven't yet found a situation where I'm unhappy with the automatic inference of type predicates. If you do find one, you can always write your own manually.

Further Study

In this article, we briefly explored type predicates in TypeScript. If you're interested in learning more and understanding the edge cases, here are the official guides:

• What's New → TypeScript 5.5 → Inferred Type Predicates

• Handbook → Narrowing → Using type predicates

Thanks for reading! See you next time!

Cover photo background is from Mona Eendra on Unsplash

According to its creator, Zoltan Kochan, pnpm "allows you to save gigabytes of disk space."

Many popular projects including Next.js, Vite, Svelte, and even freeCodeCamp use pnpm. So now is a great time try out this tool if you haven't yet. I'm sure your time will not be wasted.

In this article, I won't go into details of why pnpm is faster and more efficient than npm. You can check out the official documentation if you want to know more about that.

The goal of this article is to quickly get you started with pnpm so you can perform your day to day tasks that you previously did with npm or yarn. Grab your favorite cup of tea or coffee ☕️, and let's dive right in! 🚀

How to Install pnpm

I assume you already have a modern version of Node.js installed on your machine. These modern versions come with a command called corepack. It let's you manage your Node package managers.

Yes you read that right! It's an experimental feature of Node but it works pretty well.

So to start using it, you first need to enable it by entering the following command from your terminal, which has the effect of installing pnpm (and also yarn) on your system:

corepack enable

It's that simple. Now if you run pnpm --version you will see the version you have just installed. But this might not be the latest version of pnpm. If this is the case, you can install the latest version of pnpm using this command:

corepack prepare pnpm@latest --activate

Keep in mind that there are many ways to install pnpm on your system, and you can read about all of them in the installation docs. My favorite is the corepack formula I've shown above.

How to Configure your Shell for Efficiency (Optional)

Well, you now have pnpm installed. But the default command line experience can be improved to save you some effort.

Note that this section is optional. If you want you can skip to the next section. But if you are serious about setting it up so that the CLI experience is pleasant, let's learn how to do it.

pnpm is Hard to Type – So Set Up an Alias

If you find pnpm hard to type like I do, you can set up an alias to to save you some effort. If you're on Linux or MacOS, just put the following in your shell config (.bashrc, .zshrc, or config.fish):

alias pn=pnpm

If you want to set up your alias in Powershell (Windows) you can see this doc.

How to Setup Tab-Completion

There are two ways you can do this in pnpm. Both have their pros and cons.

First I will share with you my favorite method. It's a shell plugin called pnpm-shell-completion and is available for zsh, fish shell, and Powershell core. It only covers the most commonly used commands. If you are Arch Linux and zsh user, you can install it with any AUR helper. For example, if you use yay, run the following command to install it:

yay -S pnpm-shell-completion

Then add the following line in your .zshrc file to load it:

source /usr/share/zsh/plugins/pnpm-shell-completion/pnpm-shell-completion.zsh

Now it should work. If you use any other supported shell, follow the plugin's doc to learn how to install it.

The second method comes built-in with pnpm. To setup this style of auto-completion, run the following command:

pnpm install-completion

And then follow the steps it gives you. This method covers more commands than the first approach. But it has some limitations – for example it can't auto-complete your package.json scripts. It also, for example, can't auto complete any dependency name that you want to uninstall.

How to Use pnpm

Now, you should have pnpm installed with an alias and tab-completion. No more delay – let's see how to use pnpm.

How to Initialize a New Project using pnpm

To get the default package.json in the current directory, run the following command:

pnpm init

Unlike npm, it will not create it interactively and you don't need to specify the -y flag for this.

How to Install a Package

To install a package as a dependency, the syntax is:

pnpm add <pkg>

To install a package as a dev dependency, you have pass the -D (or --save-dev) flag:

pnpm add -D <pkg>

To install a package globally, use the -g flag:

pnpm add -g <pkg>

How to Install All Dependencies

Suppose you cloned a project from GitHub. It does have a package.json file but no node_modules (you should not track node_modules with Git). Now to install all the dependencies in that package.json, the command is very similar to npm:

pnpm install

or

pnpm i

How to Run a package.json Script

This process is also very similar to npm. The explicit way to do it is to use the run command. If you have a script named build, you can execute it with this command:

pnpm run build

You can also use pnpm build to do the same thing. This is a shorthand format that can do other things as well. We'll learn more about shorthand very soon in this article.

How to Run Commands that Come with Dependencies

You can run commands that come with dependencies using pnpm exec.

When you install a package, if it has commands specified by the bin field in its package.json, you will get an executable of the same name in your node_modules/.bin directory. Its purpose to execute the corresponding file.

pnpm exec prepends ./node_modules/.bin to the PATH (that is, PATH=./node_modules/.bin:$PATH) and then executes the given command.

The following is an example that shows installing typescript as a dev dependency and then running the tsc command to create a tsconfig.json file:

pnpm add -D typescript
pnpm exec tsc --init

Similar to the pnpm run command, you can also omit exec and just use pnpm tsc to do the same thing. This works when you don't have a conflicting tsc script in your package.json. In the next section we will take a close look at this shorthand syntax.

Note that since pnpm exec has access to all commands resolved by the paths specified in PATH, you may have access to many system commands for example rm, ls, and so on.

How pnpm <command> Works

pnpm <command> works like this:

• If <command> is a pnpm command (that is add, install and so on), execute that command.
• Else if <command> is a script found in package.json, execute pnpm run <command>.
• Else execute pnpm exec <command>.

So pnpm <command> serves as a convenient shortcut where pnpm exec and pnpm run are explicit commands without fallback.

How to Update Packages

To update packages to their latest versions based on the specified range in package.json, run this command:

pnpm up

To update all dependencies to their latest versions, ignoring ranges specified in package.json, run this:

pnpm up --latest

How to Remove a Package

To remove a package from both node_modules and your package.json, you can use pnpm rm. For example if you installed express, you can remove it using:

pnpm rm express

To remove a globally installed package, use the -g flag. Below is an example of removing the globally installed package nodemon:

pnpm rm -g nodemon

Is There an npx Alternative?

Yes – it's the pnpm dlx command. It's very similar to npx. It downloads the specified package from the registry without installing it as a dependency and then runs whatever default command binary it exposes.

For example, you can run the command that cowsay package exposes like below to print ASCII art of a cow saying a string that you pass:

pnpm dlx cowsay hi freeCodeCamp

Now you might be wondering, if a package exposes multiple command binaries, what command pnpm dlx chooses as the default? Or how can you explicitly specify a command binary?

Let's see how the default command binary is determined first:

• If the bin field of package.json has only one entry, then that is used.
• Else if there is a command name in the bin field of package.json that matches the package name, ignoring the scope part if any, then that command is used.
• Else pnpm can't determine the default command and throws an error with a helpful error message that most likely will answer the second question.

To explicitly specify a particular command, you will need to install the package first using the --package option and specify that command after dlx.

For example the package typescript exposes to command binaries tsc and tsserver. Now if you want to run tsc --init to create a tsconfig.json file without having typescript in your node_modules or package.json, you can use pnpm dlx like below:

pnpm --package=typescript dlx tsc --init

Conclusion

In this tutorial, you've learned what pnpm is and how to install it. We've also covered several common pnpm commands that you will most likely need on a daily basis.

I hope this article helped you get up and running with pnpm. Check out the documentation of pnpm to learn more about it.

If you want you can follow me on LinkedIn and Twitter where I share useful coding related things.

Happy coding!

They could've relied on plain English, but that would not be a good solution because of the potential verbosity and ambiguity. So they used specially designed languages for it.

In this article, you'll learn about two of these widely used languages: BNF and EBNF.

Another fascinating aspect of these special languages or notations is that you can write the grammar of your own language using them and give it as input to some magical computer programs called "parser generators". These can output other programs capable of parsing any text according to the grammar you used. How amazing is that?

This feature can save you a lot of time since manually writing such programs is challenging and time-consuming.

Before learning (E)BNF, it's helpful to be able to distinguish between syntax and semantics. So let's start from there.

Syntax vs Semantics in Programming Languages

Syntax refers to the structure of the elements of a language based on its type. On the other hand, semantics are all about the meaning.

Something written syntactically correctly in a language can be completely meaningless. And no text can be meaningful if its syntax is incorrect.

Two of the most famous sentences regarding syntax and semantics are composed by Noam Chomsky:

1. Colorless green ideas sleep furiously.
2. Furiously sleep ideas green colorless.

The first sentence's syntax is correct but it's meaningless. And since the second one is syntactically wrong, it is far from being meaningful.

The same is true for programming languages too. Let's look at the following two JavaScript code snippets to see what I mean.

The following code is syntactically correct but semantically wrong because it's not possible to reassign something to a constant variable:

const name = "Palash";
name = "Akash";

The following is syntactically incorrect and thus does not even have any chance to be semantically correct.

"Palash" = const name;
"Akash" = name;

You check the syntax of your JavaScript code online with a tool like the Esprima Syntax Validator.

There are two more concepts you need to understand before learning to read BNF/EBNF.

Terminals and Non-Terminals

BNF/EBNF is usually used to specify the grammar of a language. Grammar is a set of rules (also called production rules). Here language refers to nothing but a set of strings that are valid according to the rules of its grammar.

A BNF/EBNF grammar description is an unordered list of rules. Rules are used to define symbols with the help of other symbols.

You can think of symbols as the building blocks of grammar. There are two kinds of symbols:

• Terminal (or Terminal symbol): Terminals are strings written within quotes. They are meant to be used as they are. Nothing is hidden behind them. For example "freeCodeCamp" or "firefly".
• Non-terminal (or Non-terminal symbol): Sometimes we need a name to refer to something else. These are called non-terminals. In BNF, non-terminal names are written within angle brackets (for example <statement>), while in EBNF they don't usually use brackets (for example statement).

The whole language is derived from a single non-terminal symbol. This is called the start or root symbol of the grammar. By convention, it is written as the first non-terminal in the BNF/EBNF grammar description.

Finally, you are ready to learn BNF. It's easier than you might think it is.

What is BNF?

BNF stands for Backus–Naur Form which resulted primarily from the contributions of John Backus and Peter Naur.

The syntax of BNF/EBNF is so simple that many people adopted their styles. So in different places, you will most likely see different styles. If the syntax is different from conventional ones, that's usually documented there. In this article I will use one particular style, just to keep things simple.

Below is an example of a simple production rule in BNF:

<something> ::= "content"

Each rule in BNF (also in ENBF) has three parts:

• Left-hand side: Here we write a non-terminal to define it. In the above example, it is <something>.
• ::=: This character group separates the Left hand side from Right hand side. Read this symbol as "is defined as".
• Right-hand side: The definition of the non-terminal specified on the right-hand side. In the above example, it's "content".

The above <something> is just one thing fixed thing. Let's now see all the ways you can compose a non-terminal.

How to compose a non-terminal

BNF offers two methods to us:

• Sequencing
• Choice

You can just write a combination of one or more terminals or non-terminals in a sequence and the result is their concatenation, with non-terminals being replaced by their content. For example, you can express your breakfast in the following ways:

<breakfast> ::= <drink> " and biscuit"
<drink> ::= "tea"

It means the only option for breakfast for you is "tea and biscuit". Note that here, the order of symbols is important.

Let's say someday you want to drink coffee instead of tea. In this case, you can express your possible breakfast items like below:

<breakfast> ::= <drink> " and biscuit"
<drink> ::= "tea" | "coffee"

The | operator indicates that the parts separated by it are choices. Which means the non-terminal on the left can be any such part. Here the order is unimportant, that is there is no difference between "tea" | "coffee and "coffee" | "tea".

That is really all you need to know about BNF to read and understand it and even express the syntax of your own language using it. Believe it or not, it's that simple. And yet it can be used to describe the syntax of many programming languages and other kinds of coding languages.

The thing that makes it possible to break down complex syntax programming languages easily is the ability to define non-terminal symbols recursively.

As a simple example let's see how you express one or more digits in BNF:

<digits> ::= <digit> | <digit> <digits>
<digit> ::= "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"

If you want to see a simple real-world example of BNF grammar checkout: Semver notation.

What is EBNF?

BNF is fine, but sometimes it can become verbose and hard to interpret. EBNF (which stands for Extended Backus–Naur Form) may help you in those cases. For example, the previous example can be written in EBNF like below:

digits = digit { digit }
digit = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"

The braces above mean that its inner part may be repeated 0 or more times. It frees your mind from getting lost in recursion.

One interesting fact is that everything you can express in EBNF can also be expressed in BNF.

EBNF usually uses a slightly different notation than BNF. For example:

• ::= becomes just =.
• There are no angle brackets around non-terminals.

For concatenation, instead of juxtaposition, some prefer `,` to be more explicit. However, I will not use it here.

Don't assume that these styles to be universal. There are several variants of them and they are usually clear from the context. The more important thing to focus on is the new operations it offers like the braces we've seen above.

EBNF extends BNF by adding the following 3 operations:

• Option
• Repetition
• Grouping

Option

Option uses square brackets to make the inner content optional. Example:

thing = "water" [ "melon" ]

So the above thing is either water or watermelon.

Repetition

Curly braces indicate the inner content may be repeated 0 or more times. You have already seen a good example of it above. Below is a very simple one just to make the idea solid in your mind:

long_google = "Goo" { "o" } "gle"

So "Google", "Gooogle", "Gooooooogle" are all valid long_google non-terminal.

Grouping

Parentheses can be used to indicate grouping. It means everything they wrap can be replaced with any of the valid strings that the contents of the group represent according to the rules of EBNF. For example:

fly = ("fire" | "fruit") "fly"

Here fly is either "firefly" or "fruitfly".

With BNF we could not do that in one line. It would look like the following in BNF:

<fly> ::= <type> "fly"
<type> ::= "fire" | "fruit"

The BNF Playground

There is a very nice online playground for BNF and EBNF: Playground.

I recommend you check it out and play with it. It uses a slightly different notation so read the "Grammar Help" section beforehand.

It can test if a string is valid according to the grammar you entered. It can also generate random strings based on your grammar!

For fun this is the syntax of a poem-like text (credit goes to chatGPT):

<poem> ::= <line> | <line> "\n" <poem>
<line> ::= <noun_phrase> " " <verb_phrase> " " <adjective>
<noun_phrase> ::= "the " <adjective> " " <noun> | <noun>
<verb_phrase> ::= <verb> | <verb> " " <adverb>
<adjective> ::= "red" | "blue" | "green" | "yellow"
<noun> ::= "sky" | "sun" | "grass" | "flower"
<verb> ::= "shines" | "glows" | "grows" | "blooms"
<adverb> ::= "brightly" | "slowly" | "vividly" | "peacefully"

Go ahead and copy-paste it into the playground and press the "Generate Random" button to get some mostly meaningless lines of a grammatically correct poem.

Conclusion

BNF and EBNF are simple and powerful notations to write what computer scientists call context-free grammar.

In simple terms it means the expansion of a non-terminal is not dependent on the context (surrounding symbols), that is it's context-free. It is the most widely used grammar form to formalize the syntax of coding languages.

Here are some resources you might find interesting:

• EBNF: How to Describe the Grammar of a Language
• The language of languages
• Parser generators:
  • ANTLR, a very powerful parser generator capable of writing parsers in many languages.
  • If you are a JavaScript person like me and want to get started with a parser generator, take a look at nearly.js for a gentle start.

Below are some real-world grammars written using BNF/EBNF or similar notations that you might find interesting:

• Lisp
• Lua
• Semver
• JavaScript
• JSX
• Python
• Value Definition Syntax in CSS

Thanks for reading. Let me know on Twitter if you have any questions or found this article helpful. Happy learning!

Photo by Ryan Wallace on Unsplash

In this article, I'll show you how to use these helpful array methods.

1How every() and some() Work – an Overview#

First we need some data to test. For simplicity let's consider an array of numbers:

const nums = [34, 2, 48, 91, 12, 32];

Now let's say we want to test if every number in the array is less than 100. Using every we can easily test it like below:

nums.every(n => n < 100);
// true

Short and sweet! You can think about what happens here like this:

• every loops over the array elements left to right.
  • For each iteration, it calls the given function with the current array element as its 1st argument.
  • The loop continues until the function returns a falsy value. And in that case every returns false – otherwise it returns true.

some also works very similarly to every:

• some loops over the array elements left to right.
  • For each iteration, it calls the given function with the current array element as its 1st argument.
  • The loop continues until the function returns a truthy value. And in that case some returns true – otherwise it returns false.

Now let's use some to test if some number in the array is odd:

nums.some(n => n % 2 == 1);
// true

That's really true! 91 is odd.

But this is not the end of the story. These methods have some more depth. Let's dig in.

2Parameters of every and some#

The way to use every and some array methods is exactly the same. They have the same set of parameters and those parameters also mean identical things. So it's very easy to learn them at once.

We have already worked with first parameter of these methods which is a function. We call this function predicate.

In computer science, a predicate is a function of a set of parameters that returns a boolean as an answer. JavaScript treats the function we give to every/some as a predicate. We can return any type of value we wish, but those are treated as a Boolean, so it's common to call this function a predicate.

They also have an optional 2nd parameter to control this inside of non-arrow predicates. We call it thisArg.

So you can call these methods in the following ways:

arr.every(predicate)
arr.every(predicate, thisArg)

arr.some(predicate)
arr.some(predicate, thisArg)

Let's see the predicate and the optional thisArg in detail below.

2.1predicate#

Through the predicate, every/some not only gives us access to the current array element but also its index and the original array through its parameters like below:

• 1st parameter: The current array element.
• 2nd parameter: The index of the current element.
• 3rd parameter: The array itself on which every/some is called.

We have only seen the first parameter in action in earlier examples. Let's catch the index and the array by defining two more parameters. This time, let's say we have some T-Shirt data to test if all of them have freeCodeCampe logo:

let tshirts = [
  { size: "S", color: "black", logo: "freeCodeCamp" },
  { size: "S", color: "white", logo: "freeCodeCamp" },
  { size: "S", color: "teal",  logo: "freeCodeCamp" },
  { size: "M", color: "black", logo: "freeCodeCamp" },
  { size: "M", color: "white", logo: "freeCodeCamp" },
  { size: "M", color: "teal",  logo: "freeCodeCamp" },
  { size: "L", color: "black", logo: "freeCodeCamp" },
  { size: "L", color: "white", logo: "freeCodeCamp" },
  { size: "L", color: "teal",  logo: "freeCodeCamp" },
];

tshirts.every((item, i, arr) => {
  console.log(i);
  console.log(arr);
  return item.logo == "freeCodeCamp";
})

Try this out in your console to see the output. And don't forget to play around with some too.

2.2Optional thisArg#

If in any case you need to have a particular this value inside your predicate, you can set that with thisArg. Note that is only applicable for non-arrow predicates because arrow functions have no this bindings.

If you omit this argument, this inside the predicate (non-arrow function) works as usual, that is:

• In strict mode this is undefined.
• In sloppy mode this is the global object which is window in browser and global in Node.

I can't think of any good use case of thisArg. But I think it's good that it exists because now you have control over this inside your predicate. So even if someday there is a need for it you will know that there is a way.

If you have any good ideas for uses of thisArg, please let me know on Twitter :)

3Edge cases for every and some#

3.1What happens when every and some is called on an empty array?#

Sometimes the array you want to test might be empty. For example, you fetched an array from an API and it can have an arbitrary number of elements at different times including zero.

For the case of every a true return value can mean two things:

• If the array has more than zero elements, then all elements of the array satisfies the predicate.
• The array has no elements.

So if we want we can do crazy things inside the predicate like below:

const myCatsBankAccounts = [];
myCatsBankAccounts.every(account => account.balance > elonMusk.totalWealth)

And still get true as the return value!

If the array is empty, JavaScript directly returns true without any calls to the predicate.

It's because in logic, you can say anything about the elements of an empty set and that is regarded as true or more precisely vacuously true. Such logic might seem nonsense in everyday usage but it's how logic works. Read the wiki page linked above to know more about it.

So if you get true as the the return value of every you should be aware that the array could be empty.

some on the other hand, directly returns false on empty arrays without any calls to predicate and without any weirdness.

3.2Non-existing elements are ignored#

If your array has holes in it like below, they are ignored by every/some:

const myUntiddyArry = [1,,,3,,42];

3.3Mutating the array in the predicate#

I will not discuss this case here, because mutating the original array in most cases just complicates things and makes more room for bugs.

If you really need to or are interested, please read the note in the spec for details.

4A challenge for you#

Express every with some and some with every in JavaScript.

I hope you will also feel the immense joy and wonder that I got when I discovered this relationship!

const myEvery = (arr, predicate) => !arr.some(e => !predicate(e));

const mySome = (arr, predicate) => !arr.every(e => !predicate(e));

Thanks for reading! I hope this article was helpful. Check out my other articles here. Let's connect on Twitter.

In that case, a Node version manager can help you save precious time installing and switching back and forth between different Node versions.

Today I will introduce you to fnm(Fast Node Manager), a Node version manager, written in Rust with simplicity and speed in mind. fnm also has cross platform support.

Table of contents

• 1 Installation for Linux system and zsh shell
  • 1.1Shell setup
  • 1.2 How to install the completion script
• 2 Common usage of fnm
  • 2.1 How to list all remote Node versions
  • 2.2 How to install multiple versions of Node
  • 2.3 How to set aliases for a Node version
  • 2.4 How to use a particular version of Node
  • 2.5 How to attach a Node version to a project
  • 2.6 How to uninstall a version of Node
• 3 How to remove fnm
• 4 Summary

1Installation for Linux system and zsh shell §

Here I will only cover the installation of fnm for Linux systems and the zsh shell. See the documentation for installation instructions for other platforms and shells.

First make sure curl is installed on your system. Then run the following to install fnm:

curl -fsSL https://fnm.vercel.app/install | bash -s -- --skip-shell

It will install fnm in your $HOME/.fnm/ directory.

Updating fnm is the same as installing it again with the above command.

1.1Shell setup §

There is one more important step. Just add the following to your .zshrc file:

# fnm
export PATH=/home/$USER/.fnm:$PATH
eval "$(fnm env --use-on-cd --version-file-strategy=recursive)"

1.2How to install the completion script §

Installing the completion script is optional. If you're wondering about the role of this step, here is what it does: it tries to auto-complete the partial command that you type relating to fnm when you press the TAB key. For example if you type fnm ls- and press the TAB key it will auto-complete to fnm ls-remote.

fnm comes with all the completion codes for different shells with its binary. You will have to paste that code in a file named _fnm in a directory specified in the FPATH environment variable:

fnm completions --shell zsh > <a_fpath_dir>/_fnm

See the output of echo $FPATH to get all the possible directories and replace <a_fpath_dir> with an actual directory. It is recommend to use a user local path. If there are no such path, you can set one in your .zshrc by adding this line:

fpath=(/home/$USER/your/favorite/path/here $fpath)

2Common usage of fnm §

2.1How to list all remote Node versions §

To see all the different Node versions you can install, run:

fnm ls-remote

It will print all the versions like below:

.
.
.
v16.15.0 (Gallium)
v16.15.1 (Gallium)
v17.0.0
v17.0.1
v17.1.0
v17.2.0
v17.3.0
v17.3.1
v17.4.0
v17.5.0
v17.6.0
v17.7.0
v17.7.1
v17.7.2
v17.8.0
v17.9.0
v17.9.1
v18.0.0
v18.1.0
v18.2.0
v18.3.0

2.2How to install multiple versions of Node §

Let's install Node of version v18.3.0:

fnm install v18.3.0

For installing Node of the latest LTS version, you can use the --lts option. So run the following to install it also:

fnm install --lts

fnm also supports partial version matching. fnm guesses the latest available version from your partial input. For example, if you just do:

fnm install 17

It will install the Node of version v17.9.1 which is latest available version starting with 17. So experiment with the above command.

Let's check your Node version by entering node --version in your terminal. Note that the first installed one is used by default.

Before seeing how to start using a different installed version of Node, let's see how you can set an alias(name) to a version so that you can refer to it easily.

2.3How to set aliases for a Node version §

By default, the first version of Node that you install using fnm receives the default alias.

The syntax to set an alias for a version is:

fnm alias <version> <name>

If you want to set the alias default, there is a shorthand:

fnm default <version>

You can set multiple aliases for a version, too.

The syntax to remove an alias is:

fnm unalias <name>

2.4How to use a particular version of Node §

You can use a Node of a particular version using the use sub-command:

fnm use 16

To check the current Node version, simply run:

fnm current

To list all the Node versions that you installed with fnm, run:

fnm ls

Note that you can bypass fnm and use the system wide installation of Node on your system (if any) by using the system:

fnm use system

2.5How to attach a Node version to a project §

You can create a .node-version file in the root of your project and just write the desired Node version of that project in that file like below to attach a Node version to it:

echo 'v18.3.0' > .node-version

fnm respects this file. So if you are in that directory, you can just use fnm install or fnm use to install or use that version.

fnm also respects the .nvmrc file (it is similar to the .node-version file but came from nvm land). So if you used nvm earlier, you will have smooth transition to fnm.

fnm can use these dot files to detect Node version and even start using it automatically when using cd, which is really handy in most cases, so I've already enabled them in the shell setup by adding the following flags to the fnm env command:

• --use-on-cd: This flag tells fnm that when you cd into a project root directory, it should automatically use the Node of version specified in .node-version(or .nvmrc). Cool, isn't it?
• **--version-file-strategy=recursive**: This flag and the recursive value of it basically tells fnm to use the specified Node version in .node-version(or .nvmrc) even when you are in a nested directory and using the use or install sub-command without a version. It also tells fnm to use the Node version aliased to default when you are out of any such project directory and using the use sub-command without a version. Using this flag along with --use-on-cd allows you to have the magic of automatically using or installing the Node of the relevant version(as described here) when you go deeply in and out of such project directories.

If these features interfere your workflow, you can remove these flag(s) anytime in your shell setup to turn them off.

2.6How to uninstall a version of Node §

Uninstalling a version of node is very similar to installing it. You just need to use sub-command uninstall instead of install. That's it.

3How to remove fnm §

Removing fnm is as simple as removing the .fnm directory from your home and removing its specific config that you added in your shell config file. Remember to also remove the completion script.

4Summary §

Below is a summary of all the commands we have discussed in this article:

# Listing all remote versions
fnm ls-remote

# Listing all installed ones
fnm ls

# Installing
fnm install <version>

# Uninstalling
fnm uninstall <version>

# Installing node of the latest LTS version
fnm install --lts

# Setting an alias
fnm alias <version> <name>

# Shortcut for setting 'default' as an alias
fnm default <version>

# Removing an alias
fnm unalias <name>

# Using a Node of a particular version
fnm use <version>

# Displaying the version of currently used Node
fnm current

Also, if you need quick help, fnm has built in help that you can get at any time right from your terminal like below:

• Help for the fnm command: fnm --help
• Help for any sub command fnm <sub-command> --help

If you like fnm don't forget it give it a star on GitHub. I think it deserves more stars than it has now.

Thanks for reading! If you want you can checkout my website and follow me on Twitter and LinkedIn.

Happy Coding 😄

But the very essence of these methods are as simple as the following arithmetic computations.

Suppose we have an array of numbers:

[1, 2, 3, 4]

And we want to get the sum of them.

The reduce way to get the sum is similar to:

((((1) + 2) + 3) + 4)

Whereas the reduceRight way to get the sum is similar to:

((((4) + 3) + 2) + 1)

With reduce and reduceRight, you can define your own +. Array elements can be anything too. Sounds exciting, right?

Think of reduce and reduceRight as nothing but a generalization of the above arithmetic patterns. In this article we will cover all the important details.

This article takes an easy-to-digest algorithmic approach to show you how reducing works in JavaScript.

I've also created a video to show you how these methods work. Check it out if want to learn the concepts from a more visual angle:

Table of Contents

• 1What is reduced to what?
• 2Parameters of reduce/reduceRight
• 3Understanding reduce/reduceRight with a diagram
• 4The algorithm of reduce/reduceRight
• 5Excercises
  • 5.1Flat nested array
  • 5.2Remove duplicate items from an array
  • 5.3Reverse an array without mutating it
• 6Conclusion

1What is reduced to what? §

You might be wondering, "What kind of reduction happens when using reduce or reduceRight?"

Here, reduction reflects a particular way of transforming (which we will see in detail) the elements in an array to a single value similar to the arithmetic computations we have seen above.

But note that the output value can be anything. So it can be a value that looks bigger than the original array on which the method is called.

In functional programming languages, the idea of reducing has many other names such as fold, accumulate, aggregate, compress and even inject.

2Parameters of reduce/reduceRight §

These methods both have the same rules for calling them. So it's easy to learn them together. Let's see how they can be called:

let myArray      = [/* an array */];
let callbackfn   = /* A function value */ ;
let initialvalue = /* any value */ ;

myArray.reduce(callbackfn)
myArray.reduce(callbackfn, initialValue)

myArray.reduceRight(callbackfn)
myArray.reduceRight(callbackfn, initialValue)

Here the usage of the parameters of reduce/reduceRight is explained through the callbackfn and initialValue variables:

callbackfn: It must be a function. While iterating over the array, for each element, reduce/reduceRight calls callbackfn with 4 arguments. Let's assume the variables previousValue, currentElement, index and array hold the values of those arguments, respectively. So the internal call to callbackfn looks like this:

callbackfn(previousValue, currentElement, index, array)

Now let's see the meaning of those values:

1. previousValue: This is also known as the accumulator. Long story short, this value represents the "work in progress" of the return value of the method. What this value is made up of will become completely clear when you study the algorithm presented later in this article.
2. currentElement: The current element.
3. index: The index of the current element.
4. array: myArray.

Return value of callbackfn: For the last call to callbackfn, its return value becomes the return value of reduce/reduceRight. Otherwise, its return value will be given as previousValue for the next call to callbackfn.

And finally, initialValue: This is an optional initial value for previousValue (the accumulator). If it's given, and myArray has some elements in it, the first call to callbackfn will receive this value as its previousValue.

Note: The callbackfn is usually called a reducer function(or just reducer for short).

3Understanding reduce/reduceRight with a diagram §

The only difference between reduce and reduceRight is the direction of the iteration. reduce iterates over the array elements left to right. And reduceRight iterates over the elements right to left.

Let's see how you can use reduce/reduceRight to join an array of strings. Note how the final output is reached by joining the array elements step by step in both directions:

A diagram showing the differences between reduce and reduceRight

Here note that:

• acc is used to access previousValue .
• curVal is used to access currentElement.
• The circular shaped input to r represents curVal.
• The rectangular shaped input to r represents acc or the accumulator.
• Initial values are in rectangular shapes, because they are received by **_r_** as accs.

4The algorithm of reduce/reduceRight §

The 29 line algorithm below might look intimidating at first glance. But you'll likely find it much easier to understand it than digesting globs of long sentences explaining the intricate details of these methods.

Note: The algorithm described here has the context of the "Parameters of reduce/reduceRight" section. (That is, the variables myArray, callbackfn and initialValue come from that section.)

So relax, enjoy the steps, and don't forget to experiment in the console:

Note: An array can have a length greater than 0 but no elements. Such empty places in the array are usually called holes in the array. For example:

let arr = [,,,,];
console.log(arr.length);
// 4

// note that trailing comma doesn't increase the length.
// This feature enables us to add a new element quickly.

These methods only call callbackfn for elements of myArray which actually exist. For example if you have an array like [1,,3,,5], they will not consider the non-existing elements at indices 1 and 3. Try to guess what will be logged after running the following:

[,,,3,,,4].reduce((_, cv, i) => {
  console.log(i);
});

If you said 6, you are right!

⚠️ Warning: It is not recommended to modify myArray inside of callbackfn because it complicates the logic of your code and thus increases the possibility of bugs.

If you've read and understood this far, congratulations! Now you should have a solid understanding of how reduce/reduceRight works.

It's a great time to solve some problems to get used to reduce/reduceRight. Before seeing the solutions, solve them yourself or at least spend some time thinking about it.

5Excercises §

5.1Flat nested array §

Write a function flatten that can flat a nested array.

let arr = [1, [2, [3], [[4], 5], 6]];
console.log(flatten(arr));
// [1, 2, 3, 4, 5, 6]

    
const flatten = (arr) => 
  arr.reduce((acc, curVal) =>
    acc.concat(Array.isArray(curVal) ? flatten(curVal) : curVal), []);
    
  

5.2Remove duplicate items from an array §

Write a function rmDuplicates that removes the duplicate items like below:

console.log(rmDuplicates([1, 2, 2, 3, 4, 4, 4]));
// [1, 2, 3, 4]

    
const rmDuplicates = arr => 
  arr.reduce((p, c) => p.includes(c) ? p : p.concat(c), []);
    
  

5.3Reverse an array without mutating it §

There is a built-in reverse array method to reverse arrays. But it mutates the original array. Use reduceRight to reverse an array without mutating it.

    
let arr = [1, 2, 3];

let reversedArr = arr.reduceRight((acc, curVal) => [...acc, curVal], []);

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

console.log(reversedArr);
// [3, 2, 1]
    
  

6Conclusion §

When reduce/reduceRight calls callbackfn internally we can call those patterns of calling it "normal behaviors" and we can treat other scenarios as edge cases. These can be summarized in the table below:

Learning reduce/reduceRight is a little bit more involved than other higher order array methods. But it's worth your time to learn it well.

Thank you for reading! I hope this article was helpful. If you want you can checkout my website and follow me on Twitter and LinkedIn.

Happy reducing 😃