Core ES6 Features Every Beginner Should know: Blocks and Functions

Greetings. I am Mehzad Galib, a junior front-end web developer and JavaScript enthusiast. Today I’ll discuss ES6.
ES or EcmaScript is a scripting language created to standardize JavaScript, and ES6 is the 6th version of it. Beginner web developers should know some basic terminologies and best practices about ES6. So, let’s jump into it:

ES6 Blocks

1. Block Bindings: Variable Declaration and Hoisting:

In ES6, there are three types of JavaScript variables: var, let, and const. Generally, when a variable is defined, a value is defined/bind within a scope.

Variables declared with ‘var’ means the variable is hoisted up to the function scope if declared within a function or hoisted to the top of the building block if declared anywhere but outside of a function. But if a variable is declared with ‘let’ and ‘const’, the variable will not be accessible to the top, because it wasn’t hoisted by JavaScript.

2. Block-Level Declarations:

If someone declares a variable with var, it will be hoisted up as discussed before, within a function. An example should look like this:

When the getFood() is called, the terminal console should show the value of food, though food is defined after the console.log(). The food variable is hoisted up to the top of getFood() function, so we can access the variable ‘food’ from anywhere in the function.

But for ‘let’ and ‘const’ that will be slightly different. Here is a relevant example:

When addFood() is called, it will log the value of x but not y. Because y is declared after console.log(y) and declared with let keyword, so it will not be hoisted up. On the other hand, variable x is declared outside of the function addFood(), being in the block scope, so can be accessed via any function or blocks.

3. Global Block Bindings:

To get a variable value everywhere in the code block, the general guideline is to declare a variable with the ‘var’ keyword and declare it outside any building block. Then it will be accessible to any functions or block.

In the above example, variable work(declared with var keyword) is declared after walk() function and bind a value after the talk() function, but will still show value in the log because the variable ‘work’ is declared outside any scope, therefore it is accessible globally.

4. Block scope in Loops

When declaring a variable for a loop, declaring with the ‘var’ keyword is not a good practice, because it will be hoisted as always. Using the ‘let’ keyword is prominent.

5. Best Practices for Block Bindings:

We understood that we can access any variable by declaring the ‘var’ keyword outside any scope. But the best practice is defining a variable with a value first, then calling a function. This will prevent confusion as a developer for debugging and code sharing. Within a block, defining a function first is crucial. After the arrival of ES6, we should use the ‘let’ and ‘const’ keywords to declare variables when necessary, otherwise, the code will be ambiguous to other programmers. Using the ‘const’ keyword as default and the ‘let’ keyword when a value might change is a good practice.

ES6 Functions

1. The Arrow Functions:

Arrow functions are the easiest way to declare a function and return value, the function is defined as a variable, the variable name becomes a function. No need to use the ‘function’ keyword.

2. Working with Unnamed Parameters:

ES6 has a new feature to use a rest parameter to contain all parameter values within a function. This means a function can take as many parameters as it wants, and the parameters will be accumulated as an array, in the following example, as ‘args’.

3. Default Parameters in Functions:

Sometimes when someone passes parameters for a function, all the parameters may not have been found. In this case, the ES6 feature allows us to pass default parameter values.

4. The Spread Operator:

The spread operator basically takes an iterable item(either an array or an object) and expands it to a list of items. We can use the spread operator to use items of an array or object to another array or object, even in some mathematical functions. The basic syntax is […array]

5. Block Level Functions

Functions are just like variables declared with the ‘var’ keyword, if defined anywhere in the code blocks it will be hoisted to the top, and if defined within a function, it will be hoisted to the top of the function.

That’s it for today, hope you enjoyed my article. Good Day!!!

I am a junior MERN Stack developer, basically front-end focused development is my passion. I can write scalable, re-usable code for development purpose.