JavaScript is the only native programming language to build web application frontends that work on standard web browsers. Every popular web browser adheres to the well-known ECMAScript standard and lets web developers run portable, compatible JavaScript code. As another popular programming language, the JavaScript ecosystem brings several unique programming concepts that help developers write self-explanatory, performance-first source codes. Most modern web development projects use these JavaScript concepts in their codebases. Using some of these concepts is inevitable in some development requirements.

So, there are some must-know JavaScript concepts that every web developer should know in their careers. Developers don’t need to deeply understand these concepts to write simple, experimental web apps. But, understanding these JavaScript concepts lets you use JavaScript at its full potential to write production-level web codebases productively by also understanding JavaScript internals. Understanding JavaScript’s core concepts help you to identify bugs faster and also supports you to boost your career level.

In this story, I’ll explain several core JavaScript concepts you should know as an experienced web developer.

Closures and Hoisting

We don’t typically use global variables and one primary function in JavaScript source codes — we often decompose our code execution model into several stacked segments via scoping. For example, a function may call another function that uses private variables to calculate a specific value. A closure is a function that resides inside another function that lets programmers create an inner scope. The inner function (closure) can access the primary function scope after function invocation.

Let’s understand this concept by a simple example:

function createUnitAdder(unit) {
 return (val) => `${val} ${unit}` 
}

const cm = createUnitAdder('cm');
const kg = createUnitAdder('m');

console.log(cm(120)); // 120 cm
console.log(kg(7.5)); // 7.5 m