ES6 Fundamentals: Variables and Parameters

Hiten Pratap Singh
TechCret Software
Published in
4 min readApr 19, 2020

In this post we will look at the new features in ES6 for Variables and Parameters. These features were designed to make JavaScript code easier to read, easier to write and also make code more maintainable.

Some of these features were designed to avoid some of the strange and dangerous behaviours of JavaScript. So, let’s get started with these new features without a further ado.

1.let: The first new feature, we will look at is the new let keyword. Let allows us to define variables. We have always had the ability to do the same but with var keyword. However, the var keyword has some limitations especially when it comes to scopes. With var keyword, there is no block scope and it’s what makes programming with var keyword confusing and error prone. So, we should use let keyword to define variables as using it we get block level scoping.

let keyword

2. const: The const keyword is another addition in ES6 and it is used to define variable which are constant in nature and cannot be changed once defined. It also has block level scoping just like the let keyword.

const keyword

3. Destructuring: When we declare variables with let, var and const, we typically also want to initialize the variable by assigning a value and one of the new features of ES6 is the ability to use a destructuring assignment. Destructuring operation allows us to assign values to a set of variables by destructuring and pattern matching a complex data structure like an array or an object full of properties.

Destructuring Operation/Assignment

4. Default Parameters: In JavaScript, if a function takes two parameters, we’ve always had the ability to invoke that function and pass in two parameters or pass in one parameter or pass in no parameters. But in that cases where we invoke that function and do not pass enough parameters, the author of that function might want to specify a default value instead of working with undefined.

Default Parameters

5. Rest Parameters: Rest Parameters make it easy to work with an unknown or variable number of arguments in a function. Those who are familiar with programming in Java then they must have also known about varargs as it’s exactly similar to what’s varargs in Java.

Rest Parameters

6. Spread Operator (…spread): Similar to the Rest Parameters is the Spread Operator. They are similar as spread also uses the just like we use it to prefix a rest parameter, but when used outside of a function argument list, the means we want to spread an array across individual parameters. Those who are familiar with Groovy language then would find it fairly similar with * operator in Groovy language.

Spread Operator

7. Template Literals: Template literals is a very beautiful feature of ES6 as it really helps us in building a string value which we may want to assign to a variable. Again, it’s fairly similar to GString in Groovy language so those who knows about Groovy then they will feel right at home here. Template literals are string literals allowing embedded expressions. we can use multi-line strings and string interpolation features with them. They were called “template strings” in prior editions of the ES2015 specification.

Template Literals

We are done here with the second entry to our ES6 blog series. More blog posts are coming with some awesome features from ES6.

If you haven’t read the first post in this blog series then you can find it here.

Stay Inside and Stay Safe.

--

--