Closures in JavaScript refer to a function's lexical scope and the retained reference and state of variables and functions within that scope. This provides the ability to access an instance of a function and it’s scope (and so access it’s scoped variables and functions that were available at the time of creation) from outside of the original scope.

What are Closures in JavaScript?

Fetching data for a website is a common use case so it's a good example for exploring the different ways we can reuse common functionality in a React app, and this article covers using Higher Order Components.

How to Use the Fetch API With React Higher Order Components

When your JavaScript is being compiled, variables and function definitions are made available to the JavaScript engine. When the engine executes your code, the declared vars and functions from the compilation phase are made available before the value assignments, irrespective of the order in which they were written. This can be envisaged as “hoisting” the declarations to the top of the current scope.

What is Hoisting in JavaScript?

Lexical scope is the set of rules for how the JavaScript engine finds variables and functions when executing code, relative to where you've defined them at author-time. The &ldquo;lexical&rdquo; refers to the lexing phase of compilation which takes place before code execution. This is in contrast to dynamic scope where the rules of scope can be generated dynamically, while the code is executing at runtime.

What is Lexical Scope in JavaScript?

React doesn’t like siblings. More specifically, it doesn’t allow siblings in a return function while rendering without them being enclosed. As of React v16.2.0 you can use React.Fragment to wrap the sibling elements.

Inline Conditional Rendering JSX in React

An IIFE stands for immediately invoked function expression. I’ve also heard the term self invoked anonymous function (SIAF), but IIFE encompasses the pattern with a named function too. Here’s the code for those that want a quick copy-and-go, but we’ll run through it underneath for those who want to understand the syntax.

IIFE JavaScript Example

Instructions for setting up Prism.js in a Next.js markdown blog

Using Prism.js in a Next.js site

The ReferenceError is an error thrown by the JavaScript engine when it looks to find a variable or function within the available scope and finds nothing with that identifier name. The error will be thrown if you're trying to assign a value to an undeclared variable, or access the value of an undeclared variable.

Frendly

Front-end Articles & Code Snippets

A HTML Post