Things to learn before learning a JavaScript framework

Image Link: https://www.deepcrawl.com/wp-content/uploads/2019/07/javascript-frameworks.png

If you are familiar with the World of JavaScript then you must have heard about the trending frameworks in JavaScript like React, Vue, and Angular. Now, before starting learning any of these JavaScript frameworks, it would be really helpful to know some of the important concepts of JavaScript which can make your life easier in learning them.

So, In this series of articles, I will try to explain some of those features and concepts which I feel are really useful for a Web Developer to learn before jumping to any JavaScript Framework. Now, since I myself is a React/Node Developer so I am sure that this series will help to learn these technologies in a much easier way.

I will be covering the following topics in this series:

Important ES6 Features (this article)
Objects and Array methods
Asynchronous JavaScript and Fetch API
NPM and import/export modules in JavaScript

Let’s start first by introducing you to some of the latest ES6 features in JavaScript which are highly used in the code examples of the frameworks so knowing these would accelerate your learning of a JavaScript framework. So, in this article, we will discuss the important ES6 features like:

Arrow Functions
Template Literals
Destructuring
Spread and Rest Operator

So, let’s start with Arrow functions first.

Arrow Functions

With Arrow functions, we can get rid of the function keyword and can write functions in a much concise manner.

Before ES6, we used to write functions like:

After ES6 introduced arrow functions:

Now, if our function is one-liner then we can also remove the return statement and can write the function in a single line, like:

This is called implicit return : values are returned without having to use the return keyword. Now, this works fine in all cases but when returning an object we should wrap the curly brackets in parentheses to avoid it being considered the wrapping function body brackets, like:

Now, we can also remove the parentheses around the functionarguments if our function has only a single argument (or parameter).

Note: Unlike normal JavaScript functions, Arrow functions don’t have their own this but they inherit it from their parents or the code that contains the arrow function. Let’s see that with a simple example:

If you are interested in learning more about arrow functions then refer to this article.

Template Literals

Before ES6 we used to concatenate strings like:

After the introduction of template literals,

So, after ES6 we started using the backtick character to define a string as we can directly use any JavaScript expression inside this${} syntax.

For Better understanding let’s see another example:

Destructuring

Destructuring, according to me is one of the most useful features introduced in ES6. It allows us to extract the properties from an Object or elements from an array. Let’s see them one by one, starting with objects.

Let’s us consider that we have an object named person,

Now, to access the elements of this object in ES5:

Now, with the introduction of destructuring, it became really easy for us to extract these object properties with the use of {} , so, let’s access the properties of the same object using destructuring:

So, destructuring really made our job easy to extract those object properties. Now let’s see how destructuring helps us in extracting the elements of an array.

Let’s consider an array named fruits,

Now, to access the elements using ES5:

But with destructuring, we can use[] to extract the array elements in a much simpler manner, so let’s consider the same array and try to access the elements using destructuring:

So, in a single line, we were able to extract all the items of the array.

Spread and Rest Operator

The spread operator is used to spread the elements of an array into individual elements or the properties of an object into individual properties.

To spread the elements we have to put the ... (spread operator) in front of the name of the array or object.

Let’s start with arrays this time and use the same fruits array from the above example in this case also:

So, we used the spread operator to spread the values of the array, let’s print the fruitsNew array into the console,

So, it worked as expected. Now let’s see how this operator works in case of an Object. Let’s consider the person object that we have already defined earlier:

Now, let’s talk about the rest operator.

As the name suggests it allows us to represent an indefinite number of arguments into an array. Here also we use the ... (called rest operator here) to place the remaining arguments into an array.

Let’s consider a simple example to understand how it works:

So, it worked as we expected.

Note: It is to be observed that bothspread and rest operator uses the same syntax that is ... but depending upon where and how you use them, makes them different from each other.

So, that’s it for this article we will discuss the rest of the topics in the upcoming articles.

Now, to end this one I will leave you guys with a simple React Component that uses the above ES6 features:

Also, check out the other parts of the series (if you haven’t):

In case you want to connect with me, follow the links below:

LinkedIn | GitHub | Twitter

A note from JavaScript In Plain English

We have launched three new publications! Show some love for our new publications by following them: AI in Plain English, UX in Plain English, Python in Plain English — thank you, and keep learning!

We are also always interested in helping to promote quality content. If you have an article that you would like to submit to any of our publications, send us an email at submissions@plainenglish.io with your Medium username and we will get you added as a writer. Also, let us know which publication/s you want to be added to.

Things to learn before learning a JavaScript framework was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.