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:

function getFood(){
 console.log(food)
 var food = ‘apple’
 }
 getFood()

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:

let x = ‘pizza’
 function addFood(){
 console.log(x)
 console.log(y)
 let y = ‘pasta’
 }
 addFood()

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.

function walk(){
 console.log(work)
 }
 var work;
function talk(){
 walk()
 }
 work = ‘working’
 talk()

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.

for(var i = 0; i< 7; i++){
}
console.log(i)  // the last value of i will be retured, since i declared with var
for(let i = 0; i< 7; i++){
}
console.log(i)   // cannot be accessible because i was just scoped inside the block

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.

function add(a, b){
 return a + b
 } // previous method of declaring a function
const add = (a,b) => a+b; // arrow method

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’.

function add(…args){ 
 let sum = 0;
 args.forEach(value=> {
 sum = sum + value;
 
 })
 return sum 
 }
add(4,6,5,89,6548) // returns 6652

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.

function multiply(a = 1, b = 1){
 return a*b
 }
 multiply(5, 6) // returns 30
 multiply(4) // returns 4

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]

const arr1 = [12,35,356,89,554]
const arr2 = [54,68,59,21]
const combined = [25, ...arr1, 63, ...arr2]
console.log(combined)
// will return [25,12,35,356,89,554,63,54,68,59,21]

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.

if(true){
console.log(typeOf(eat))  // returns function
function eat(){
//code
}
eat()
}
console.log(typeOf(eat))  // returns function

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