Modern JavaScript for everyone: Mastering Modern JavaScript The Right Way

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 and the MDN web docs
MDN web docs as great resources, among others, for you to master JavaScript from the ground up. I Hope this is helpful.
_Let's code,
Cheers! _

Comments

[Brayan Kai]

Great article here @munenemuriukim , Keep the good work up 👏👏👏