Back to learning ES6 JavaScript. So far, I have learned to write code in the ES5 version. I know that this is an old version of the code and I know that no one uses it now, because ES6 introduced a lot of nice ease in writing code, but you can still find applications written in ES5 and it’s worth knowing how to maintain them or rewrite them.
JavaScript variable definition
This week I’m posting a short summary of some cool features EA6 has to offer. Let’s start with the variables. First, a topic that surprises many people who have previously programmed in other languages.
In JavaScript, we don’t define what kind of a variable is. Is it a string, a number, or a boolean? There are only three kinds of variables in JS:
- const,
- let (ES6),
- var (ES5).
In JS, you cannot use variables before declaring them and assigning them a value. It is true that JS reacts differently to variables declared with no value and differently to variables not declared at all, but in both cases, an attempt to use such a variable will result in an error.
How to describe variables in JavaScript?
Below I’m throwing a short description of three types of variables in JavaScript.
- Const – variables with a constant structure, they cannot be replaced, their values cannot be changed;
- Let – variables that can be assigned multiple times, but only defined once (it is suggested to use it wherever possible).
Let and const are block variables, which means they only exist in the piece of code between {} they are not taken up. Additionally, const cannot be declared higher in the code without a value assigned, because the value will not be moved down. In the case of const, it’s best to assign a value right at the declaration.
- Var – is a variable type that allows you to change the content of a variable in the code, for example from boolean to number (known from ES5 in ES6, we rather use let).
Var is a function variable, which means that if declared anywhere in the function, it is carried throughout the function.
Build a JavaScript function easier
In ES6, we also have some simplifications when using functions. For example, we can use Rest Parameters, which allows us to pass an array variable with an indefinite number of elements to a function. By writing undefined, I mean unknown at the time of writing the code. You could do this in ES5 as well, but it required an extra variable to be entered before you could act on each argument:
function translateToMeters() {
var cmArr = Array.prototype.slice.call(arguments);
cmArr.forEach(function(cur) {
console.log(cur / 100);
})
}
translateToMeters(200, 340, 580);
In ES6, the above function will be written shorter:
function translateToMeters(…cm) {
cm.forEach(cur => console.log(cur / 100));
}
translateToMeters(200, 340, 580);
Set default values in a function constructions
The last curiosity from this week concerns the introduction of default values in parameters passed to the function.
In ES5 it was only possible to define defaults in the function body using the if condition e.g .:
cm === undefined ? cm = 100 : cm = cm;
In ES6, you can immediately specify the default value of the parameter when constructing a function, e.g.:
function translateToMeters(cm = 100){
…
};
So much for this week, I’m still learning about ES6 next week. I’ve set aside five and a half hours this week to find the difference between ES5 and ES6.
If you want to know, how tricky JavaScript can be, check this out: Tricky JavaScript
