5 JavaScript concepts that every Front End Developer should know

JavaScript is a complex language. Understanding how it works and how to use it correctly can be challenging. Frameworks like Angular, React, and Vue make things a lot easier; however, we believe that even if you’re using one of these frameworks or another, it’s essential to understand the underlying JavaScript concepts.

Consider this list of 5 JavaScript concepts that every front end developer should know as “JavaScript-101”. There are many more that could go on this list. However, these five concepts are key ones that we always recommend as starting points for a better understanding of JavaScript and hiring front-end developers.

5 Javascript Concepts that every front-end developer should know

Front End developers are the ones that write code, create interfaces and translate designs into something viewable in a browser. It takes a lot of knowledge to do this effectively and efficiently.

Which JavaScript programming concepts should you know? Learn what the most important concepts are and how they can improve your code.

The difference between == and ===

There are two types of equality operators in JavaScript. === called the strict equality operator, and == called the loose equality operator.

Strict Equality operator: ===

The strict equality operator checks whether both the operands are of the same type and value. If any of the operands are not of the same type or not equal, it returns false by default.

Loose Equality operator: ==

The loose equality operator doesn’t care about the values’ types and just checks for object reference comparison only.

The most basic difference between == and === is the fact that == doesn’t check for type, while === checks for type.

When you compare two string literals (i.e. “text” == “text”), they’re equal since not only do they have the same value but also the same type. However, the result will be false when you test whether a string literal is equal to a string variable (i.e. “text” == text) because one is a string literal while the other is a string variable.

The double equal operator == performs type coercion, whereas the triple similar operator === does not perform type coercion. If two values are not of the same type, === will return false, but == will attempt to coerce the values before performing a comparison.

Identifying the execution context

Execution context is a term that refers to the current state of your code. It’s an abstract concept that cannot be seen directly in JavaScript, but it affects how your code gets executed.

There are two types of execution context: global and local. The global context is where all the code lives, and local contexts are created when you declare a function inside of another function.

The execution context also creates a scope chain. The scope chain is essentially a collection of variables that your code has access to at any given point in time.

JavaScript execution is not dependent upon the browser’s main thread. It runs asynchronously, and execution can coincide with other tasks. This is referred to as context switching. Unfortunately, there’s no way to predict when this might happen, making it challenging to control execution order.

The only way a JavaScript developer has to control this behaviour is by using an execution context. An execution context defines where the code will execute and the available variables during that time frame. A new execution context begins when a function starts its execution and ends when it returns or when another function interrupts its code.

Understanding by value vs by reference

This is probably one of the most important concepts you will learn as a new JavaScript developer because it comes with many advantages. It’s all about how variables work in JavaScript. Sometimes, people mistakenly think that values are always passed by value when calling a function in JS, but it is not valid for all cases.

Briefly, when you refer to a variable in JavaScript, there are two ways to do it: the first is by value, and the second is by reference. By value means that changes made to the variables will only affect that variable.

On the other hand, changing a variable by reference will affect all variables that point to the original value. This can be an essential concept for JavaScript developers to understand because sometimes, side effects may occur without your knowledge. Thus, it would help if you always used values instead of references when you want to avoid such side effects and keep things clean and straightforward.

You can save yourself a lot of trouble if you understand the difference between values and references. Values are copies of something, while references are pointers to something (or someone!).

You can pass an object reference to a function or modify it from inside the function, and it will affect the original variable outside of the function! Also, if you assign a new object to the variable outside of the function, inside the function, you will have access only to that specific object reference!

Using object prototypes

To understand how JavaScript differs from other languages, it’s helpful to understand a few core concepts and how they work together:

Objects are bundles of properties, methods, and values that can be manipulated. Objects can be created by using the new operator or calling them as functions (also known as constructor functions). In JavaScript, everything is an object, including strings and numbers.

Prototypes — Prototypes are a way for one object to inherit properties and methods from another object. They’re used heavily in JavaScript development to share properties between multiple instances of an object without needing to define them.

Objects created in this way are often referred to as “classes”, which is why some people refer to prototypes as “classes” (as opposed to “constructors” or “functors”). The term “prototype-based programming” also implies that objects are created from prototypes but do not distinguish between classes and prototypes or between prototypal inheritance and classical inheritance.

The prototype pattern is a creational design pattern in software development. It is used when the type of objects to create is determined by a prototypical instance, which is cloned to produce new objects.

The basic idea of the prototype pattern is to create objects based on a prototype of an existing object and then make modifications to the newly created object based on the prototype. Using prototypes instead of classes makes adding new properties or functionality later in the program more accessible.

Understanding immediately-invoked function expressions

Immediately invoked function expressions are a powerful way to write JavaScript code that’s both clean and maintainable. Immediately-invoked function expressions (IIFE for short) are compelling.

They immediately invoke the function expression passed to them. They are also beneficial for data privacy and are one of the essential techniques from functional programming that have made their way into mainstream JavaScript.

Immediately-invoked function expressions can avoid variable hoisting from within blocks, protect against polluting the global environment and simultaneously allow public access to methods while retaining privacy for variables defined within the function.

They’re used to wrap code that needs to be executed as soon as possible to avoid polluting the global namespace. The most common use case of an IIFE is to create private variables.

When we use IIFEs, we also benefit from creating closures. Closures allow us to bind values to our functions, and these values will persist even when the function has completed executing.

It’s also a common way in JavaScript to handle scoping work in third-party libraries that you don’t have control over (so they don’t accidentally overwrite your variables with their variables with the same name).

Wrapping Up

The future of JavaScript looks very bright, and its interest only seems to be increasing. There are numerous reasons for this, but one of the biggest is the continued innovation being introduced regularly. In short, we’re not just settling around JavaScript. We’re in a state of revolution.

Leave a Comment