DEV Community

Cover image for 10‌ ‌Crucial‌ ‌JavaScript‌ ‌Concepts‌ ‌Every‌ ‌Developer‌ ‌Should‌ ‌Know‌
Sam Dias
Sam Dias

Posted on • Edited on

10‌ ‌Crucial‌ ‌JavaScript‌ ‌Concepts‌ ‌Every‌ ‌Developer‌ ‌Should‌ ‌Know‌

JavaScript is a phenomenal language and that’s why it has managed to stay popular for years on end. The features make sure they are ever-evolving and stay up to date. As a developer in JS, it is very important to stay on top of certain concepts.

Here are some concepts you as a JavaScript developer are bound to know:-

1. IIFE

In JavaScript, a feature called IIFE runs as soon as it is defined. IIFE or Immediately-invoked Function Expression has no name and is not stored in a variable.
Now, it is a design pattern that has 2 important parts:-

  • The first part is an anonymous function with lexical scope located in the Grouping Operator (). This stops the variables from the library to clash with variables outside the library. IIFE is used to create closures and to avoid declaring variables in the global scope.
  • The second part immediately creates the function expression () through which the JS directly interprets a function.

2. Hoisting

Generally, many developers are unclear with the idea of Hoisting and hence get unexpected results. You won’t get an error of ‘Uncaught ReferenceError’, while calling a function before it is defined. It happens because the JS interpreter moves all variable and function declarations to the top of the current scope. This is called Hoisting, and it happens before the code execution.

3. Closures

A function inside a function that has access to the outer function variable is defined as a closure. This feature relates to scope, where only the nested function has an entry to the outer function’s variables and scope and not vice versa. Here the closure aka the inner function can get into the variable defined in its scope. It can gain entrance to the scope of its parent function and the global variables.

The closure is a pretty important feature as it helps keep the variables safe. It keeps the variables inaccessible by other objects that could potentially cause damage.

4. Var, const & let!

JavaScript has some reserved words like var, const, and let that allow you to name & declare variables. The addition of new reserved words took place in 2015 by introducing const & let.

  • Here var lets you declare a variable in any scope and is initialized, hoisted. Since it is hoisted, the variable can be accessed without throwing any error during code. This helps you declare a variable without a value. Redeclaration & reassigning the value of the variable is possible with var.
  • Like var, even ‘let’ permits you to reassign or redeclare the value at any point. You even get to name a variable without a value. Let only evaluates the variable at the time of execution. So now you will only get an error if the variable is referenced before writing it in code.
  • In const, the variable should be initialized with a value. This value should never be changed or be redeclared. Any attempt to change the value will generate an error immediately. It can be used to declare the variable in any scope.

5. Scope

We have been talking a lot about scope in the concepts above, so I felt the need to clarify its definition. Scope in short means access to variables when a code is running.
So the scope is a box of boundaries for functions, variables & objects. To set restrictions on variables boundaries are present. They even determine the access to the variable & limit the availability of a variable to the other parts of the code. This concept forms the basis for many other important concepts and hence having a clear understanding is necessary.

There are two types of Scope:

  • Local Scope gives you access to everything within the box of boundaries.
  • Global Scope gives you access to everything outside the box of boundaries.

Note: The global scope does not give you access to a variable defined in the local scope. This is because the variable is enclosed from the outer world. It can only be done if you return it.

6. Inheritance

  • Classical Inheritance:

This determines how an instance of a class inherits the attributes & functionality of any parent classes or that class in particular. Here methods from the base are copied into the derived class. A class is a descriptive model of the object to be created.

  • Prototypal Inheritance:

A working object instance is defined as a prototype. Objects inherit directly from other objects. This states when objects inherit methods that are available to all instances. Whether it is for the original object or the parent object.

7. Destructuring

Destructing is one of the few ways to extract properties from an object. The method allows for a clean extraction of the properties of an object. It even assigns properties from an object to variables and assigns values from an array. The best part is that it makes multiple extractions properties possible in a single statement. One can assign default values to properties if they do not exist. This feature even gains access to properties from nested objects.

8. Array Methods

The array methods provided by JavaScript provide a clean, elegant solution for data transformation in arrays.

  • Map

Here each element in the array is transformed according to the specified function and. This method returns the array.

  • Some

If some element in the array passes a test specified by the given function it returns true and vice versa for false. It is very useful in finding elements in an array that comply with specific conditions.

9. Callbacks

The callback is a function that is passed as a parameter to another function. Later, it is invoked inside the other function. A function needs to wait until another function executes or returns a value. It makes a chain of functionalities. This is commonly used in asynchronous operations to provide synchronous capabilities.

10. Syntax

  • Spread syntax

This lets an iterable such as a string or an array be expanded into an individual element. The spread operator creates copies of objects with a different reference but with the exact same content.

  • Rest Syntax

It uses the same convention as that of spread syntax. This is used when one wants to retrieve all the remaining elements.

Conclusion

As a JavaScript developer, one needs to be familiar with the concepts mentioned above. The more in-depth knowledge about the subject, the more concepts you will find are important.

Top comments (0)