DEV Community: Yash K

Top JavaScript New Features for 2020!

Yash K — Sat, 08 Feb 2020 04:05:21 +0000

If you are a JavaScript developer then you might probably know that ECMAScript 2020 just released. Hence, that also brings exciting Features to JavaScript as well. I want to just make you aware of some of the features that may help you a lot in your future projects!

1) Optional Chaining:

const testing = {
    key1: "value1"
}

console.log(testing.key2.name); //throws error if the key is not defined

console.log(testing?.key2?.name); //gives undefined if the key is not defined

By looking above example, you might already understand the power of the Optional Chaining. It is just not adding syntactic sugar to the code but also gives you the power to check for the key right away. Before this, we used to use hasOwnProperty() for checking the existence of the key for avoiding errors. This is definitely one of the great features introduced in JavaScript 2020.

2) Promise.allSettled():

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));

Promise.allSettled([promise1, promise2]).
  then((results) => console.log(results));

Output:

Promise.allSettled() is newly introduced method in JavaScript 2020. JavaScript already has one method similar to this that is Promise.all(). But there is a slight difference between the working of both methods.

Promise.all(): If one of the promises fails, then all the rest of the promises fail. Then Promise.all() gets rejected.

Promise.allSettled(): It returns the status of all promises after all, promises fulfilled despite each promise resolved or rejected.

You can make it clear by looking at the above example and its output.

3) Dynamic Import:

async function doSomething(){
   const lib = await import('heavylib');

   //do something with *lib*
}

doSomething();

Dynamic import allows us to load external libraries/modules when we need. Before, we used to load libraries/modules at the top despite the fact that all modules are not required right away. Some required to have later in the program.

The main benefit of this method is we can reduce the website loading time. And that's what most of the website owners want to have. It can be a useful tool when performance is the main goal in your project.

4) Nullish Coalescing Operator:

let num = 0;

console.log(num || 10); //10 

console.log(num ?? 10); // 0

console.log(null ?? 10); // 10

It is one of my favorite features introduced in JavaScript 2020. It helps when we want to validate data existence.

Suppose, I want to check if the particular variable has no value then I want to assign it pre-defined value. We can achieve the same thing by Logical OR operator but there is one problem that it considered zero as a falsy value whereas zero can be a valid value. Actually, that's the problem solved by this new operator. It considers only null and undefined as falsy value whereas zero considers as a valid value.

Here ends, I want to let you know that that's not all. I have highlighted the features that I think will help you in future projects!

I hope you liked it and let me know your thought on this topic by commenting down below.

Follow me on twitter: https://twitter.com/ykhokhaneshiya

JavaScript Arrow Functions

Yash K — Mon, 13 Jan 2020 15:16:57 +0000

You might not familiar with this newer syntax of defining functions in JavaScript. It just not adds up syntactic sugar in code but it also comes with a default behavior that differs from old JavaScript functions in the context of this keyword. Don't worry, we will make it clear together!

Arrow Functions were introduced in ES6.

Let's look at the syntax of Arrow Functions first:

Output:

In the above example, I have defined two functions with old syntax as well with new arrow syntax. And you can see in the output, Arrow Function would not make any difference. It would work same as the old function and product output.

Also, I have demonstrated one-line syntax of arrow function and arrow function with parameters in the below example.

Now let's look at the behavior of arrow function with respect to this keyword.

Example:

Output:

In the above example, I have defined two constructor functions with regular function and arrow function within it. And, if you look at the output then, it might look confusing. How this output is produced? Let me clarify.

Until arrow functions, every new function defined its own this value. This proved to be less than ideal with an object-oriented style of programming. And, it can be verified by looking at the output of the p1 object. In that, this
not refers to Person1 object instead refers to window object. In this case, age would not be updated correctly.

On the other hand, An arrow function does not have its own this. Now, if you look at the person2 object which contains an arrow function within it. And, the output also proves that an arrow function does not have own this instead refers to parent2 object. thus, it would update the age correctly.

When to use an arrow function?

In my opinion, it shortens the syntax and code looks cleaner. But you need to be careful when you are messing with this in case of constructor function or class. It can leads to unexpected output sometimes. I personally prefer using an arrow function syntax over old syntax.

I hope you liked it and let me know your thought on this topic by commenting down below.

Follow me on twitter: https://twitter.com/ykhokhaneshiya

JavaScript == vs ===, Which one you should use?

Yash K — Fri, 10 Jan 2020 04:12:39 +0000

This tutorial is only for beginners in JavaScript. If you have a little bit of experience with JavaScript then you might be familiar with this. Otherwise, bear with me I will help you to make this clear.

If you know any other programming language then it would probably sound confused with these two operators. As most of the other programming languages have only one == comparison operator. But JavaScript gives us great control over conditions by these two keywords. It would be clear as we go through an example.

Example:

Output:

I think the above example would be enough to clear this difference.

As you can see, I have defined two variables num1 and num2 but note that num1 is assigned with "1" (String) and num2 is assigned with 1 (Number).

Then, I have put log statements with those operators. And you can see in the output that == operator gives true and === operator gives false as output.

Let me explain why this output produced because, == operator always compares values of given operands. It will not check the types of the given operands. Whereas, === operator always compares values plus type of the given operands. Here in our example "1" and 1, both are equals in terms of values but they are of different types.

Which one should you use?

The answer can be varied from different perspectives. In my opinion, if you can you should use === operator. Because it will give you more control then == operator.

I hope you liked it and let me know your thought on this topic by commenting down below.

Follow me on twitter: https://twitter.com/ykhokhaneshiya

JavaScript Primitive vs Reference types

Yash K — Sun, 05 Jan 2020 06:53:37 +0000

JavaScript has two data types:

Primitive types
Reference types

1) Primitive types

It consists of Number, String, Boolean, null, and undefined.
If we assign a primitive type to a variable, we can think of it as we putting that particular value in a particular memory box.
When we assign a value of one variable to another it will be copied into that new variable.

Let me make it more clear for you by an example:

Look at an above simple example, There I have defined name variable by assigning String primitive type. In order to demonstrate the above-stated points about primitive types, I have created the second variable with name anotherName and copied the value of the name variable into it. Then, I changed the value of anotherName variable to something else. Then, I have printed both variables.

As you can clearly see, Both values are different that clearly proves that values are copied in the case of Primitive types.

2) Reference types

Now you can probably guess about Reference types. It consists of Array, Object, and Function.
In the case of Reference types Variables actually don't have the actual values but it contains a reference to that particular value.
Here, Reference simply means a pointer to another memory location that holds particular value. This might be sound confusing for you at first glance but bear with me. Once you go through it would be very clear to you.

Example:

In the above example, I have used an array to demonstrate the working of Reference types in JavaScript. First, I have defined arr1 with three elements in it. Then, I have defined arr2 by copying arr1 into it. Now, let me reveal the magic by changing one of the elements in arr2. And then, I have printed both arrays and surprise, both are having that updated value though I have not touched the arr1.

This result produced because of the default behavior of Reference types in JavaScript. As I stated above that Reference types are not copying the actual values rather they are just keeping the reference to that particular value in the memory.

You might have a question that Why Reference types created although we could simply just copy the values:
Answer: It is not always optimal to just copy the values when we are assigning value to a variable. Because copying the values would cost large overhead as it needs to allocate a new memory block and copies the values from that location to this newly allocated memory location. It would be easy in the case of Primitive types as it would not contain many values as arrays or objects.

So this behavior is implemented to save time and memory both. :)

Here ends the topic, primitive types vs reference types. Sometimes developers might think that this is not an important topic. But It always makes you technically sound developer as you know the fundamentals of the particular language.

I hope you liked it and let me know your thought on this topic by commenting down below.

Follow me on twitter: https://twitter.com/ykhokhaneshiya

JavaScript Hoisting for beginners

Yash K — Fri, 03 Jan 2020 07:17:02 +0000

Hoisting might be difficult for you to understand as a JavaScript beginner. Let me simplify that for you!

In simple words, Hoisting is the default behavior of JavaScript of moving variables declarations at the top of script or function.

Note: JavaScript only hoists the variable declarations at the top, not the initialized variables. It will be clear once we go through examples.

Important: JavaScript hoisting only works with variables declared with var keyword not let/const keywords.

Let's make it clear by examples.

1) Hoisting of variable declarations:

Output:

Look at the above example, the output produced because JavaScript hoists the variable declaration at line 16 to the top of the script. So if you try by putting that declaration of line 16 to line 11, it will produce the same output.

2) Hoisting of variable initializations:

Output:

As stated in the above note, JavaScript will not hoist variable initializations. So in the output, it gives undefined at line 12 because at line 14 I have initialized variable x with value 5 not just declared.

you might have a question that why x is undefined instead of giving me an error. look at the below snippet.

Behind the scene, JavaScript will make the code like the above snippet by hoisting declaration of variable x. That's why it will give the value of x undefined instead of an error.

Now I hope, that note makes sense that JavaScript only hoists declarations not the initializations of variables.

Hoisting is the default behavior that might cause unexpected results. And it would be very hard to find this kind of problem. So to avoid this follow below rules:

Always use new ways of declaring and initializing variables using let/const keywords.
Always declare variables at the top of scope (Global or Function or block Scopes).
If you really want to use var keyword enable strict mode in the script. You can refer to this article about strict mode in JavaScript: https://www.w3schools.com/js/js_strict.asp

Here Ends, I hope Hoisting makes sense to you. Also, comment down below your thoughts on it.

Good Luck!

JavaScript var vs let. Which one should you use?

Yash K — Thu, 02 Jan 2020 06:07:12 +0000

If you are a JavaScript developer you would probably know about var and let. But those who are not familiar with it let me introduce it to you.

Before ES2015 in JavaScript, you have to use var keyword in order to declare/define variables. But in ECMAScript 2015 two new keywords introduced those are let and const.

Before ES2015, JavaScript had only two types of scope: Global Scope and Function Scope. After ES2015, those two keywords support of Block Scope. You probably arise a question about what do you mean by this scopes.

Let me tell you about the scope first: In simple words, the Scope of variable means in which block of code it would be available to use.

Global Scope: Variables declared Globally (outside any function) have Global Scope. Global variables can be accessed from anywhere in a JavaScript program.

Function Scope: Variables declared within any function would be bound to that particular function and have Function Scope. It would not be available outside of that function.

Block Scope: Variables declared inside a block {} can not be accessed from outside the block. With var keyword can not have Block Scope. It would be also available outside of that block. But if you declare variable with let or const keyword it would not be accessible outside of that particular block.

Let me give you some examples so that it would be clear to you:

1) Using var keyword

I have prepared a small function test to demonstrate to you the behavior of var keyword in JavaScript. Please, take a look at the above snippet and think about the output of the program.

Output:

Now, let me tell you what is going on in this example and how this output is produced.

As stated before, var does understand the function and global scopes and doesn't understand block scope.

I have defined the name variable globally and variable inside of function test with the same name.

So at line 26, it refers to the global name variable.

Now if you refer the name variable inside the function test then it would point to the global variable if the local variable does not exist with that particular name.

But in the above example, I have declared name inside the function so if I refer the name inside the function it would give me the value of that local variable.

In the function, I have also used block and again defined name variable at line 18. But that would overwrite existed name variable because var doesn't understand block scope. so it produced that output of the console statement at line 21.

2) Using let keyword

Now let try the same program but by using the let keyword instead of the var keyword.

Now think about output based on above all rules.

Output:

Now I hope it would be totally clear by just seeing the above output.

If you use let keyword then you variable would be bound to global, function or block scope, not just global and function scope.

So at line 26, it refers to the global name variable.

But at line 21, it would not be overwritten by that block variable, and still refers to that name variable defined at line 15. And variable defined at line 18, would be only available inside that particular block and not outside of that block.

You can also refer to this great article about let keyword:
https://www.w3schools.com/js/js_let.asp

Which one should you use?

After comparing var and let, I highly recommend you to use let instead of var unless you have a strong reason to use var keyword. Because using var, it may produce unexpected output and it would be hard to find errors in large programs. It would be a headache sometimes. While using let, you do not need to mess with the scopes. It would not lead to unexpected outputs.

I hope now it would be very clear to you why you should use let and how it works.

Please comment down below your thoughts about it.

Top 3 Courses to Learn NodeJS in 2020

Yash K — Tue, 31 Dec 2019 12:20:17 +0000

Hi, I wish you a happy new year. I hope you will have a great year ahead. If you want to become a Backend developer in 2020, then NodeJS would be a great choice as it is dominating the space of backend development currently.

Let me first talk about why you should be a backend developer. Backend is essential in any kind of application like a web app, mobile app, desktop app, etc. As you can see everything needs to have backend for maintaining so many things under the hood. So I think, it is a great choice to become a Backend developer.

You can become a Backend developer by learning other technologies like PHP, Python(Django), Ruby(Ruby on Rails). But there are many advantages of NodeJS over these technologies. I will not go into details as it is not for that. Probably a topic for another post!

Now, let me walk you through the courses for becoming a very sound NodeJS developer.

1) NodeJS - The Complete Guide (incl. MVC, REST APIs, GraphQL)

This course is designed by an amazing teacher and experience web developer Maximilian Schwarzmüller. He is one of my favorite teacher. I highly suggest that you should definitely start with this course. This course is packed with great content that starts from level zero to more advanced topics. I personally learned NodeJS by following this course.

You can go to the course by the following link:
https://www.udemy.com/course/nodejs-the-complete-guide/

2) Node.js: The Complete Guide to Build RESTful APIs (2018)

This course is designed by a wonderful teacher named Mosh Hamedani. Mosh is my most favorite teacher. If you want to learn NodeJS fundamentally you can follow this course. It is also packed with great content that includes basics like how node js architecture, how node works etc. It also includes how to built RESTful APIS from scratch. It also comes with concepts like error handling, unit testing, and integration testing. Especially, these testing sections that you would not found generally in other courses.

You can go to the course by the following link:
https://www.udemy.com/course/nodejs-master-class/

3) Node.js, Express, MongoDB & More: The Complete Bootcamp 2020

This course is designed by Jonas Schmedtmann. I have put this course on the list because I have personally watched this course along with the above two courses. And I found out that it should be essential for beginners in NodeJS as well as in Backend development. Because Jonas gives a very detailed explanation about how things work behind the scenes. In general, how NodeJS works, what is event loop in NodeJS and fundamental concepts of how the web works in general. I highly suggest this course if you want to get a better idea about backend development plus NodeJS itself.

You can go to the course by the following link:
https://www.udemy.com/course/nodejs-express-mongodb-bootcamp/

Here Ends, I have suggested the courses that I have personally followed during my NodeJS learning days. I got great values out of these courses. So I hope, You will like it.

Good luck with your journey to Backend development!