Modern JavaScript for everyone: Mastering Modern JavaScript The Right Way
Tags: javascript, 100daysofcode, frontend, webdev
Published: 2022-03-04 21:46:00

Coucou! I'm going to briefly share what I know about modern JavaScript and the necessary concepts that you need to master in ES6.

ECMAScript 2015/ ES2015(ES6) was the first major update to JavaScript since ES5.

Let's look at the new ES6 syntax.

## let, const
ES6 came with `let` and `const` as an addition to the good old `var`. Any variable declared with `var` outside a function block is available in the whole window.

`let` is now more preferred for variable declaration. It is block-scoped, meaning anything within the curly `{}` is a block and cannot be accessed outside of the block.
`let` can be **updated** but not **re-declared **

```
let name = "John";
name = "Jane"
```
this will work

```
let name = "John"
let name = "Jane"//error:identifier 'name' has already been declared
```
However, if the same variable is declared in different scopes there will be no error because they are treated as different variables.

`const` is used to declare constant variables. It is also block-scoped but then it **cannot** be **updated** or **re-declared**.

```
const name = "John"
name = "Jane" //error: Assignment to constant variable.
```
Objects declared with `const` cannot be updated however, the **properties can** be updated.

```
const human = {
name: "John",
gender: "male"
}
```

```
human.name = "Justin" //is updated without errors
```

## Rest Parameter `(a, b...args)`
in ES6, a function definition's **last** parameter can be prefixed with `...` which allows all the remaining _'the rest'_ parameters to be placed within a standard JS array.

```
function myFunc(a, b, ...more){
console.log('more', more) //output: ['c','d','e']

```
In layman's, `...rest` bundles all the extra parameters into a single array.

## Spread Operator (...)
Spread allows an iterable such as an array expression or string to be expanded in places where zero or more arguments or elements are expected, or an object expression to be expanded in places where zero or more key-value pairs are expected.

```
function sum (x, y){
return x + y;
}
const numbers = [1, 2];
console.log(sum(...numbers)); //output: 3
```
Spread syntax can be used when all elements from an object or array need to be included in a list of some kind.

## Template Literals
Template literals are enclosed by backticks character instead of quotes. They are used to allow embedded expressions called **substitutions**
They can contain placeholders indicated by the dollar and curly braces. 
`${expression}`
These expressions in the placeholders and the text between the backticks get passed to a function.
To escape a backtick in a template literal, put a backslash  `\` before the backtick

```
`\`` === '`' //true

```

## Arrow function
This is a compact alternative to the traditional function expression, but is limited and cannot be used in all situations.

```
//Traditional
function (a){
return a + 10;
}

//Arrow Function
(a) => {
return a + 10;
}
//Also
a => a + 10;

```
**Differences and limits**

- Doesn't have its own bindings to `this` or `super` and **cannot** be used as a **method**.

- Doesn't have a `new.target` keyword.

- It is not suitable for `call`, `apply` and `bind` methods.

- Cannot be used as **constructors**.

- Cannot use `yield` within its body.

## For Of Loop
With for of, you can iterate over iterable data structures such as arrays, strings, maps etc.

```
var num = [0, 1, 2, 3, 4];
for (let i of num)
{
console.log(i); // 0 1 2 3 4
}
```

## Array Methods
Some new array methods were introduced in ES6 that are needed to master. They include:-

- 
**`Array.from()`** Converts array-like values and iterable values into arrays.

- 
**`Array.of()`** Creates an instance from a variable number of arguments instead of the number of arguments or types.

- 
**`Array.prototype.copyWithin()`** Copies the part of an array to a different location within the same array.

- 
**`Array.prototype.find()`** It finds a value from an array, based on the specific criteria that are passed to this method.

- 
**`Array.prototype.keys()`** It returns an array iterator object along with the keys of the array.

- 
**`Array.protorype.values()`** it provides the value of each key.
Try to understand these (among Other) new array methods.

To fully master Javascript you should have a good knowledge of ES5 as ES6 just polishes up to give more functionality to the JavaScript language.

## Libraries and Frameworks
Once you are conversant with vanilla JavaScript, it is only right to go into Frameworks and Libraries.
A JavaScript framework is a collection of pre-written code built to support applications and provide benefits that plain JavaScript does not offer on its own.

-  **Node.js** - is an open-source, runtime environment built to execute JavaScript outside of a browser, which distinguishes it from the front-end focused frameworks.

It is designed to build network applications at scale.

- **React** -  is a fast, scalable, and reusable framework for building interactive user interfaces (UIs). Like Vue, React supports incremental use and uses the virtual DOM model for expedited updates of web page content. Naturally, it mainly supports the View piece of the Model-View-Controller (MVC) paradigm.


- **Vue.js** - Vue is a front-end JavaScript framework that is designed to be approachable, versatile, and fast with a core focus on building single-page applications (SPAs).
Vue's central library focuses on the View layer of the MVC architecture and uses the virtual DOM model for fast updates without needing to reload the page.


- **Angular** - Angular uses data binding, which automatically synchronizes data between the database and the client, saving developers from having to define requests and responses when a user interacts with the UI. The framework also supports dynamic rendering with its JSON-based processor. 

## Conclusion
An Ideal JavaScript roadmap will require one to up-skill from the basic JavaScript, ES6 and finally working with Framework(s) to build modern web products.

I recommend [freecodecamp](freecodcamp.org) and the MDN web docs 
 [MDN web docs](https://developer.mozilla.org) as great resources, among others, for you to master JavaScript from the ground up. I Hope this is helpful.
_Let's code,
Cheers! _