Tag: Frontend

Whether you plan to become a frontend developer, work on a backend project, or decide to go down the full stack development path, JavaScript is a crucial programming language to learn. For aspiring developers, some essential JavaScript concepts form the core functionality of the language.

The goal of this article is to provide a brief introduction of some essential concepts to help you write quality JavaScript code effectively and efficiently. We have kept the introduction to these concepts concise and relevant and provided practical application examples.

1. Destructuring

In JavaScript, there are several ways to extract properties from an object. Destructuring is one of the best methods to achieve this. One of the reasons why destructuring is used is because it can extract multiple properties from an object in a single statement. It can also assign values from an array of properties from an object to a variable. Another reason to use destructuring over other methods is that it can access properties from even the nested objects. You can use it to assign default values to properties if they do not exist already.

Here is an example object:

const profile = {
 name: “Harry”,
age: 15,
country: “UK”
};

You can easily extract one or more properties of this object with a single line of code. Here’s how:

const { name, age } = profile;
console.log(name, age);

Output: Harry 15

Another use of the destructuring JavaScript method is to assign a default value to a property. Any non-existent property will also return the given default value. For ex:

const { name, age, school = “Hogwarts” } = profile;
console.log(school);

Output: Hogwarts

One primary application of this method is in array destructuring. It is a popular method for assigning default values to variables in an array and swapping values among variables. If you want to write cleaner code, destructuring is one of the instrumental JavaScript concepts you must learn.

2. Immediately Invoked Function Expression or IIFE 

Immediately Invoked Function Expression is a critical JavaScript function declaration that every developer must understand. IIFE is a function that runs as soon as it is declared. Its most common syntax is as follows:

(function ()
{// logic here })
 ();

The syntax might appear to be confusing, but it is pretty simple. The pattern within the function is immediately invoked.

In JavaScript, functions can be created through function declaration or a function expression. Most of the time, you might create a function using the function declaration method. However, when you want to create a function that returns a value as a function, you can use function expression.

IIFE is used in code when you want to invoke the function expression immediately after it is declared. You can easily create function expressions by adding a couple of parentheses at the end of the function declaration. Here’s an example:

(function ()
{ var foo = “hello”;
console.log(foo);
  })
();
console.log(foo); 

Output: Error: foo is not defined

As you can see, the code throws an error because the variable foo cannot be used outside the scope of the JavaScript function. The primary reason to use IIFE is that it provides extreme data privacy.

3.Hoisting

Hoisting is a JavaScript mechanism to improve the performance of the code. Here the variables and function declarations are moved at the beginning of their scope before code execution.

Let’s understand hoisting with a code example:

console.log(Hoist);
 var Hoist = ’The variable Has been hoisted’;

Output: undefined

The JavaScript has hoisted the variable declaration, which will result in the variable Hoist moving to the top of the scope.

This is how the interpreter sees the above quote:

var Hoist; //variable is moved at the top
console.log(Hoist);
Hoist = ’The variable Has been hoisted’;

In JavaScript, you can only hoist declarations, not initializations.

You can use JavaScript’s hoisting function to move a function or a variable at the top of their scope no matter where they are declared within the code. It works with both local and global areas.

This detailed tutorial explains more about Hoisting Functions and Hoisting classes.

4. Spread syntax

Before the spread operator was introduced in ES6, passing an argument to a function using an array was complicated. Also, concatenating arrays was a tedious task. However, spread syntax has made the life of JavaScript developers much more effortless. It is one of the essential JavaScript concepts that you must learn.

In simple terms, a spread operator is used on iterable elements such as arrays and strings in JavaScript. It helps to expand such elements into individual components. The syntax of this operator is three dots ( … ).

Let’s understand this with an example. Suppose we have a function that expects three arguments and an array with three elements. We can easily pass the values from the arid to the function arguments using the spread syntax without any complicated code. Here’s how:

function sum (a, b, c) {
   return a + b + c;
 }const numbers = [1, 2, 3];console.log(sum(…numbers));

Output: 6

We can also concatenate arrays with the same ease using the spread operator. For instance, to concatenate the following two arrays:

const vegetables = [“carrot”, “pumpkin”];
const fruits = [“apple”, “pear”];

We just have to use the spread syntax as follows:

const newArray = [ …vegetables, …fruits ];console.log(newArray);
Output: [“carrot”, “pumpkin”, “apple”, “pear”]

Before the introduction of the spread syntax, the JavaScript developers had to use the array.concat method, but now their life is much easier with the spread operator.

5. Rest syntax

The rest syntax is an extension of the spread syntax. It is another essential JavaScript concept. The difference between the spread syntax and the rest syntax is that while the former is used to copy and assign values, the latter retrieves all remaining elements that are not copied.

Here’s an example:

const numbers = [1, 3, 2, 6, 8];const [1, 3, …rest] = numbers;
console.log(rest);

Output: [2, 6, 8]

It is a crucial JavaScript concept when working with extensive data. It makes it easy to retrieve the unassigned values.

Conclusion

JavaScript is one of the essential programming languages to learn. Once you master the basics, you should know these top five JavaScript concepts to boost your developer skills.

Talent500 is a platform for JavaScript developers to discover high-paying opportunities with global companies. Join our elite pool of talent today.