Web Dev Streaks Day- 36 (Milestone 6: Intermediate Javascript, API

Module 30: JS Recap, ES6 & ES2015

1. Simple Recap of JavaScript Six-Core Parts

Recap the most six-core parts of Javascript which are

1. Variables

2. if-else statement (Conditional Operators)

3. Array (Different Array Operations)

4. Loop (while, for, for…of)

5. Function

6. Object

If you have any problem with any of this topic, please go through previous modules and make sure your concepts are crystal clear.

2. Recap of DOM Manipulation & Event Handler

For recaping the DOM, you’ve to design something to use the event handler.

You may follow the following file,

PH-es6-intro/dom.html at main · mhnarfth/PH-es6-intro

Now it’s time to add some styles while clicking all the buttons using javascript.

Make the Add border button working by adding a 3 px yellow border around the container when it’ll be clicked.

Add Background Color - Add some colors as background of friends.

Try to use all of the types of adding an Event while making these buttons work.

If you can’t. Just take help from here,

PH-es6-intro/dom.js at main · mhnarfth/PH-es6-intro

3. Start Using ‘let’ & ‘const’

let

The ‘let’ keyword was introduced in ES6 (2015).

Variables defined with ‘let’ cannot be Redeclared.

Variables defined with ‘let’ must be Declared before use.

Variables defined with ‘let’ have Block Scope.

const

The “const” keyword was introduced in ES6 (2015).

Variables defined with “const” cannot be Redeclared.

Variables defined with “const” cannot be Reassigned.

Variables defined with “const” have Block Scope.

PH-es6-intro/let-const.js at main · mhnarfth/PH-es6-intro

4. If no values are provided in the function default parameter

If no values are provided while calling the function then, it could result in undefined.

You can handle this type of situation with a simple if condition. Like

if (num2 == undefined) {do this; }

or, you can also take care of this problem using a logical OR operator (||)

num2 = num2 || 0;

But the latest solution in “ES6” to handle this type of situation is to assign some values of the parameter while defining the function. Thus you can easily handle this.

PH-es6-intro/default-parameter.js at main · mhnarfth/PH-es6-intro

5. Template String, Multiple Line String, Dynamic String

Template literals are enclosed by the backtick (` `) character instead of double or single quotes.

To escape a backtick in a template literal, put a backslash (‘\’) before the backtick.

Any newline characters inserted in the source are part of the template literal.

Using normal strings, you would have to use (‘\n’) syntax in order to get multi-line strings. Using template literals, you can do the same without any hassle.

Without that, if you use the backticks then the string becomes dynamic. In that case, you can easily use a variable inside a string just like this,

PH-es6-intro/template-string.js at main · mhnarfth/PH-es6-intro