Javascript: What Are New Things In It?
Trouble with symbols?
Have you seen Symbol() in JavaScript? Probably yes or probably not, but there is a reason to include it after ES6. Symbol actually returns a unique “key” for every time call it. Suppose you have an e-commerce application. Your users need to add products to the cart. If you give every product an unique identity like “BHG7980” then it will never create a clash with other products which previously used to create problems with “name” and also “id”.
If you add a constructor to your product and pass it through a Symbol then it will create an unique identity for every product which will help JavaScript Robots to arrange the products properly.
Symbol('foo') === Symbol('foo') // falseit will return false because the first one has a unique identity so the name will not match further.
Why Object needs “this”?
In your object constructor, when you create a variable, you have to pass it with “this”. The question is, when we use to write without OOP, then we just assigned the var userName = “Ronaldo” and used it just like […userName] and so on. Why “this”? The answer is, in constructor we used to pass a lot of constructors with the same structure so the JavaScript Robot could not detect which constructor will it follow. That’s why we use this.userName from a particular object.
const person = {
firstName: “John”,
lastName : “Doe”,
fullName : ()=> {
console.log(this.firstName + “ “ + this.lastName);
}
};Saw The New Date Magic?
After the OOP in JavaScript, new Date() is a new addition which shows the real time event. But we can make simple digital clock with setInterval.
document.setInterval(new date(), 1000) // 7:53:22 PMit will change the time after every one second so it will run like a digital clock on your window.
Do We Use Event Loop?
The answer is Yes. But when? Every time! What? Haha..Do you use Asynchronous method in JavaScript? Yes, for every API call. Then what actually happens in an API? How it actually get data from an url? This is where event looping comes in to play.
Every JavaScript API call is asynchronous. It means it will keep on a side the idea of single-thread and start to think like a multi-thread.
Suppose you are using setTimeOut() and called an API to do something. What you are commanding from your application, it is a “call stack”, a call stack calls the browser APIs, then it searches for data. it prepares the data, then it enqueues the data to event-loop then the data comes to our fetch().then(res => res)
Do Cross Browser Compatibility effects JavaScript engine?
The answer is no ( please don’t talk about IE :-P ). Cross Browser Compatibility only issues the design now a days. If you are using flex, grid to CSS, you will see that you have a nice design in Mozilla but through checking it Chrome it looks like hell. It is not your fault, it is actually the internal design frame work incompatibility. It means they all don’t use the same Design Framework.
But the V8 engine, the SpiderMonkey, the Chakra all are commonly try to use same type of functionality with their browser experience.
What is the solution then? Use SASS. Simple answer. SASS compiles every CSS code you write. Creates compatibility for every browser.
Try…Catch! Alternate of Fetch..Catch?
If you run a program under try…catch, it will see if the application is running well or it will through an error. Now, when you write a program in your machine that is compiled through many steps and if any problem occurs then it will put an error in the console. So you actually don’t need anything extra to check. But if you try to catch any data from API how can you be sure that the API server is ok? Or no runtime error is occurring? That’s why we need try and catch. It will do as the same like fetch. This system works very well with Axios also.
What is DRY anyway?
DRY (Don’t Repeat Yourself) means don’t try to console or return every time for each result.
let players= ['Messi', 'Ronaldo', 'Iniesta', 'Xavi'];
// non DRY code
console.log(players[0]);
console.log(players[1]);
console.log(players[2]);
// DRY code
for (let i = 0; i < players.length; i++) {
console.log(players[i]);
}Is It Possible To Use A Default Function Value?
Yes, JavaScript now allows you to set default values to your functions. So how it works? Let’s see an example, suppose you have put a three value adding function. So you will keep three parameters for your function. User now can give three values to get adding result. Ok, now if any user put two values what will gonna happen?
There was a solution to use …arguments before ES6. But now it is much more easier. You can set a default value to your parameter of that function. If the user do not put that value then it will auto keep that value as a parameter so there will be no “undefined”.
function multiply(a, b = 1) {
return a * b;
}
console.log(multiply(7, 3)); // output: 21console.log(multiply(7)); // output: 7
Have You Heard About Anonymous Function?
Can function be anonymous? Yes, and JavaScript is very clever enough to introduce you with anonymous functions.
The functions with no name is called anonymous. We are familiar with function expression and declaration. If we try to combine them, then it will have no name. Look at the example.
let open= function () {
console.log('Anonymous function');
};
open();This is very useful when we try to use a timing function in the document. Document can not have any variable so as no name. So how will you openly call it without any dependency? Anonymously!
Spread On Your Morning Bread Or In JavaScript?
Spread operator also a ES6 feature. {…} it will work just like three dots. What this do? it will copy from previous array and put all data together in a new array? Interesting? Let’s check:
// previously we used to with cancat() to add many array data to a single one.
let arr = [1,2,3];
let arr2 = [4,5];arr = arr.concat(arr2);
console.log(arr); // [ 1, 2, 3, 4, 5 ]// after spread operator we just use {...}
let arr = [1,2,3];
let arr2 = [4,5];arr = [...arr,...arr2];
console.log(arr); // [ 1, 2, 3, 4, 5 ]