Original stamp here
Introduction to ES6 (Part 2)
Introduction to ES6 (Part 3)
In this article, I’ll introduce some of the new features in ES6. It helps if you’re new to ES6 or learning about the front-end framework. Topics I will cover in this article:
1, Let and Const
2. Arrow function
3. Default parameters
4, for of loop
5. Expand the properties
6, Maps,
7, Sets.
8. Static methods
Getters and Setters
Let
Let is similar to var but lets are scoped. Lets can only be accessed at the defined block level.
if (true) {
let a = 40;
console.log(a); //40
}
console.log(a); // undefined
Copy the codeIn the example above, the variable ‘a’ is defined in the If statement and therefore cannot be accessed outside of the function.
Here’s another example:
let a = 50; let b = 100; if (true) { let a = 60; var c = 10; console.log(a/c); // 6 console.log(b/c); // 10 } console.log(c); // 10 console.log(a); / / 50Copy the codeConst
Const is used to assign a constant to a variable. You can’t change this value, it’s fixed.
const a = 50; a = 60; Const b = "Constant variable"; b = "Assigning new value"; / / errorCopy the codeConsider another example:
const LANGUAGES = ['Js', 'Ruby', 'Python', 'Go']; LANGUAGES = "Javascript"; // Error. Languages. push('Java'); Console. log(LANGUAGES); // ['Js', 'Ruby', 'Python', 'Go', 'Java']Copy the codeThis may be a little confusing.
Think of it this way. Whenever a const variable is defined, Javascript assigns the memory address of the value to the variable. In our example, the variable ‘LANGUAGES’ actually refers to the memory allocated to the array. Therefore, you cannot change the variable later to point to another memory location. It only points to an array in the entire program.
Arrow function
The function changes a little bit in ES6. I mean grammar.
Function oldOne() {console.log("Hello World.. !" ); } var newOne = () => {console.log("Hello World.. !" ); }Copy the codeThe new language can be confusing, but I’ll try to explain.
The grammar is divided into two parts.
The first part is to declare a variable and assign a function to it (that is) (). It just says that the variable is actually a function.
The second part then declares the body of the function. The bracketed arrow section defines the body of the function.
Another example with arguments.
let NewOneWithParameters = (a, b) => {
console.log(a+b); // 30
}
NewOneWithParameters(10, 20);
Copy the codeI don’t think I need to explain that. It’s straightforward.
The default parameters
If you’re familiar with Ruby, Python, and other programming languages, then default parameters are familiar to you. The default arguments are those given by default when the function is declared. However, you can change its value when the function is called.
Example:
let Func = (a, b = 10) => {
return a + b;
}
Func(20); // 20 + 10 = 30
Copy the codeIn the example above, we pass only one argument. This function takes the default arguments and executes the function.
Consider another example:
Func(20, 50); // 20 + 50 = 70
Copy the codeIn the above example, the function takes two arguments, with the second argument replacing the default argument.
Here’s another example:
let NotWorkingFunction = (a = 10, b) => { return a + b; } NotWorkingFunction(20); // NAN. Does not work properly.Copy the codeWhen you call a function with arguments, they are allocated in order. The first value is assigned to the first parameter, the second value to the second parameter, and so on.
In the example above, the value 20 is assigned to the argument ‘a’ while ‘b’ has no value. So we don’t get any output.
However,
NotWorkingFunction(20, 30); / / 50;Copy the codeNormal work.
The For of circulation
for.. Of is very similar to for.. In, but slightly modified.
for.. Of iterates through a list of elements, such as an Array, and returns the elements one by one (not their indexes)
Let arr =,3,4,1 [2]; for (let value of arr) { console.log(value); } Output: 2 3 4 1Copy the codeNote that the variable ‘value’ prints each element in the array instead of the index.
Here’s another example:
let string = "Javascript";
for (let char of string) {
console.log(char);
}
Output:
J
a
v
a
s
c
r
i
p
t
Copy the codeYes, it applies to strings as well.
A property
As the name suggests, the expansion property helps expand the expression. Simply put, it converts a list of elements into an array, or an array into a list of elements.
An example without the expansion property:
let SumElements = (arr) => {
console.log(arr); // [10, 20, 40, 60, 90]
let sum = 0;
for (let element of arr) {
sum += element;
}
console.log(sum); // 220.
}
SumElements([10, 20, 40, 60, 90]);
Copy the codeThe above example is simple. We declare a function that takes an array as an argument and returns its sum. That’s easy.
Now consider the same example using the expand property
let SumElements = (... arr) => { console.log(arr); // [10, 20, 40, 60, 90] let sum = 0; for (let element of arr) { sum += element; } console.log(sum); // 220. } SumElements(10, 20, 40, 60, 90); // Note that we passed no array. Instead, you pass elements as parameters.Copy the codeIn the example above, expanding the attributes converts the list of elements (that is, parameters) into an array.
Here’s another example:
Math.max(10, 20, 60, 100, 50, 200); / / back to 200.
Math.max is a simple method that returns the largest element in a given list. It does not accept arrays.
let arr = [10, 20, 60]; Math.max(arr); // Error. Array not accepted.Copy the codeSo let’s use our savior.
let arr = [10, 20, 60]; Math.max(... arr); / / 60Copy the codeIn the example above, expanding the properties transforms the array into a list of elements.
Maps
Map contains key and value pairs. It’s similar to an array, but we can define our own index. The index is unique in the Map.
Example:
var NewMap = new Map();
NewMap.set('name', 'John');
NewMap.set('id', 2345796);
NewMap.set('interest', ['js', 'ruby', 'python']);
NewMap.get('name'); // John
NewMap.get('id'); // 2345796
NewMap.get('interest'); // ['js', 'ruby', 'python']
Copy the codeI think the above example is self-explanatory.
Another interesting feature of Map is that all indexes are unique. We can use any value as a key or value.
var map = new Map(); map.set('name', 'John'); map.set('name', 'Andy'); map.set(1, 'number one'); map.set(NaN, 'No value'); map.get('name'); Map.get (1); map.get(1); // number one map.get(NaN); // No valueCopy the codeSome other useful methods in Map:
var map = new Map(); map.set('name', 'John'); map.set('id', 10); map.size; Return the size of the map. Map.keys (); // Return all keys. Map.values (); For (let key of map.keys()) {console.log(key); } Output: name IDCopy the codeIn the example above, map.keys() returns the key of the map, but it returns an Iteratord object, which means it cannot be shown as is, but only iterated.
Here’s another example:
var map = new Map(); for (let element of map) { console.log(element); } output: ['name', 'John'] ['id', 10]Copy the codeThe above example is self-explanatory. for.. The of loop prints an array of key-value pairs.
Sets
Sets are used to hold unique values for any type. Simple.. !
Example:
var sets = new Set(); sets.add('a'); sets.add('b'); sets.add('a'); For (let element of sets) {console.log(element); } output: a bCopy the codeNote that duplicate values are not displayed, only unique values are displayed.
Also note that a Set is an iterable object. We have to iterate through the element to display it.
Other useful tips:
Var sets = New Set([1,5,6,8,9]); sets.size; // Return the size of 5.set.set.has (1); // Returns true.sets.has (10); / / returns false.Copy the codeIn the example above, size is self-explanatory. There is another method, ‘has’, which returns a Boolean value based on whether or not a given element exists in the set.
A static method
Most people have heard of static methods. Static methods were introduced in ES6. Defining it and using it is very easy.
Example:
class Example { static Callme() { console.log("Static method"); } } Example.Callme(); Output: Static methodCopy the codeNote that I did not use the keyword “function” in the class.
I can call this function without creating any instances of the class.
Getters and Setters
Getters and Setterss are among the useful features introduced in ES6. This will come in handy if you use classes in JS.
Examples without getters and setters:
class People { constructor(name) { this.name = name; } getName() { return this.name; } setName(name) { this.name = name; } } let person = new People("Jon Snow"); console.log(person.getName()); person.setName("Dany"); console.log(person.getName()); Output: Jon Snow DanyCopy the codeThe above example speaks for itself. In class People, we have two functions that help us set and get the name of a person.
Examples of getters and setters:
class People {
constructor(name) {
this.name = name;
}
get Name() {
return this.name;
}
set Name(name) {
this.name = name;
}
}
let person = new People("Jon Snow");
console.log(person.Name);
person.Name = "Dany";
console.log(person.Name);
Copy the codeIn the example above, you can see that in the People class, there are two functions with ‘get’ and ‘set’ properties, with the ‘get’ property used to get the value of the variable and the ‘set’ property used to set the value of the variable.
You can see that getName is called without parentheses, and setName is called without parentheses, just like assigning a value to a variable.
Thank you for your time. Hope you enjoyed this article. 🙂 🙂