There are many versions of JavaScript. But today I gonna discuss about special ES6 or ECMAScript 6 as well as some advance features of JavaScript .
01. What is ES6 ?
ES6 is modern JavaScript version, Which released 17 June 2015 by ECMA International. ES6 is currently the most preferred version of JavaScript developers. But the problem is that it is not yet fully supported in all browsers. However, most of the features are supported now. But even then, since it’s not fully supported, you have to be very careful in using it. Occasionally using a transporter, the code of ES6 needs to be taken to ES5.
02. Arrow Function definition.
Another new addition to JavaScript ES6 is the arrow function. Also known to many as the Fat Arrow function. It’s not really new, just syntactically nice to look at and a lot cleaner. There is a saying in the world of programming language called Syntactic Sugar. Which means it’s about to be the most delusional time of the year, as well. Although the functionality of the arrow function is much the same as the function of ES5, there are some differences.
Let’s See the Example:
-We write the ES5 function expression such as :
var myFunction = function() {
console.log(‘A Normal Function’);
}
-If you write the code in the arrow function:
const myFunction = () => console.log(‘ ES6 Arrow Function’);
03. How works spread operator and what it is ?
Another smart thing in spread operator JavaScript ES6. It seems like a complicated thing many people don’t want to use. But if you notice a little or after using it a few times, you will understand how useful it is. To be honest, it is also a kind of synthetic sugar. The real job of a spread operator is to scatter any repetitive data such as arrays or strings within their own position. Just like the Bengali meaning of spread.
If I say in one line, what is spread operator ?
The spread operator is actually (…) these three dots.
04. block binding JavaScript.
Variable declarations in variables are considered to be at the top of the function but this is called lifting. For example of how lifting work, consider the function blow:
function myFunction(condition) { if (condition) {
var value = 321; return value;
} else { // statement
} // value will exists with a value of undefined
}Block-Level:
lock-level declarations are that declare variables that are inaccessible outside of given block scope.
- Inside of a function
- Inside of a block (indicated by the { and } characters.)
05. ES6 MAP.
We haven’t seen anything new in JavaScript’s ES6, except for the syntax difference, or the synthetic sugar. But this time we will discuss something completely new. Yeah……..that sounds pretty crap to me. It did not exist in any previous version of JavaScript. That is the map.
Don’t make mistake to think this map is Google map.
The map we will talk about here today is a data structure. Introduced to developers in the ES6 version of JavaScript. But it is a little different from the object type data structure. It has its own method, some features of its own. Maps can simultaneously accept all kinds of data such as functions, booleans, integers, characters and strings.
06. “this” is very confusing in JavaScript.
(“this”) keyword is one of the most tricky and confusing topics in JavaScript.(“this”) is a reserved keyword in JavaScript, meaning you can no longer use this name for any variables or functions.
The value of “this” is usually determined based on how a function is being called. And its value is determined at the time of execution.
Still Feeling confusing?
Just remember the following four rules that can be used to determine the value of this:
1. Global Rules
2. Object Rules
3. Clear Rules
4. new Keyword Rules
Global Rules: If you use “this ”keyword anywhere, except inside any of your custom defined objects, it will always indicate your global object. In the case of browsers, the global object is the window object. In other environments such as node JS, the object is global.
Object Rules: Now if you custom define an object and use this keyword inside it, its value will not indicate the global object anymore. Here its value will change.
Clear Rules: You may have heard of call, bind, apply method. These are actually used to set the value of this keyword explicitly. If you see that these have been used somewhere, you can easily catch who this keyword is indicating. Because using these call, bind, apply methods, it is possible to set who this keyword will indicate in the first parameter.
New Keyword Rules: Another keyword that is final but widely used can determine the value of new and this keyword. If this is somehow under this new keyword, its value may be different.
07. JavaScript function Constructor.
Although JavaScript is object oriented, it works a little differently from other languages such as C ++ or Java. Although those languages are class based, JavaScript is basically a prototype based language. Unlike other languages, JavaScript does not put everything inside the class, but here one object is linked to another object with a prototype. Basically, the prototype chains are linked to each other in such a way that the link becomes null in the end. Null has no prototype, meaning it is the end of the prototype chain. In JavaScript, all objects have such prototype chains
“The function constructor is also used to create a blueprint of the object in the same way as the class.”
08. JavaScript Inheritance details.
“Inheritance” is very important and a thing of work in object oriented programming. With the help of this, the feature of one object can be easily taken to another object.
Inheritance can be of several types:
01. Prototype based inheritance.
02. Constructor Inheritance etc.
09. Some Extra thing about ES6.
The first thing I personally liked about JavaScript was that there was no type data, so everything had to be declared with a keyword var. Due to being a high-level programming language We don’t have to specifically mention whether the type of data we’re taking is an integer, a character, or a string JavaScript can automatically determine. We can solve the problem of declaration only by using var.
However, two more new keywords are coming to ES6, let and const. There is no reason to be afraid of adding more new keywords, as they have nothing to do with the data type as always. You can use them to declare any type of data. But the main difference is in their behavior. In the first two new keywords, we can say that it is a bit like var. But const is a little different. For example, if we want, we can declare a variable with var and then we can change its value if we want, which is also possible in the case of let.
10. What is cross browser testing and Why?
Cross browser testing way to make sure that the web sites and web apps which you create work across an acceptable number of web browsers. As a web developer, it’s very importen job to make sure that not only work your local machine, but it work for all others user.
You need to work about:
- All other browsers that you use regularly on your devices, including older version browsers such as Internet Explorer, Opera mini that some people might still be using, which not support all the latest update, Such as CSS and all of JavaScript features.
