Block Binding in ES6

This writing is all about binding variables to scopes. So I assume you have basic programming sense with any language. Otherwise, this may seem a bit hard to grasp. Because I am going to discuss things that are a little bit foggy. Let us start with the definition of binding.

What is Binding?

Variable is more formally known as binding. When we declare and/or initialize a variable, we actually bind a value to a name inside a scope. Scope usually refers to a specific part of a program.

So binding occurs whenever we declare and/or initialize a variable using one of these keywords: var, let and const in JavaScript.

For example:

var x

let y

const last = z

ES6 offers some best approaches for block bindings using var, let and const. But there are some indistinct things that JavaScript engine does behind the scene. First I would go with var binding:

VAR Binding: Confusion

function getValue(condition) {

    if (condition) {
        var value = "blue";

        // other code

        return value;
    } else {

        // value exists here with a value of undefined

        return null;
    }

        // value exists here with a value of undefined
}

Loops and block-level declarations

Many developers never realized that for-loop declarations were one of the areas that required block-level variable declarations the most. Take the following for example:

for (var i = 0; i < 10; i++)
{
    // code goes here
}
console.log(i);   // still works!

In this case, the ‘i’ variable is still accessible outside of the for loop! Which pollutes our variable namespace in the long term. This could also have issues if you had multiple for loops in a given function, in which case you would end up re-declaring the ‘i’ variable, which might not be the intended effect.

for (let i = 0; i < 10; i++)
{
}
console.log(i);    // error!

Loops and ‘const’ declarations

While you are free to declare a ‘const’ inside of a for loop initializer, if the variable is at all modified, it will throw an error.

for (const i = 0; i < 5; i++)
{
    // will only run one time before error
}

If however, you choose a function that does not modify the initializer, such as a for-in loop, then you are just fine.

var car = {
    make: 'Honda',
    model: 'Fit'
};
for (const key in car){
    console.log(key);    // totally fine
}

Summary

Block-bindings allow for cleaner and more scalable code and is the default behavior for many of today’s programming languages. It’s a great addition to the JavaScript language, and while the adoption rate is a slow process, the best time to start using these concepts is today.

2. AsyncFunction

An async function is a function declared with the async keyword. Async functions are instances of the AsyncFunction constructor, and the await keyword is permitted within them. The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.

Async functions may also be defined as expressions.

async function f() {
  return 1;
}

The word “async” before a function means one simple thing: a function always returns a promise. Other values are wrapped in a resolved promise automatically.

For instance, this function returns a resolved promise with the result of 1; let’s test it:

async function f() {
  return 1;
}

f().then(alert); // 1

…We could explicitly return a promise, which would be the same:

async function f() {
  return Promise.resolve(1);
}

f().then(alert); // 1

3. awaitFunction

The await operator is used to wait for a Promise. It can only be used inside an async function.

// works only inside async functions
let value = await promise;

The keyword await makes JavaScript wait until that promise settles and returns its result.

Here’s an example with a promise that resolves in 1 second:

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });

  let result = await promise; // wait until the promise resolves (*)

  alert(result); // "done!"
}

f();

4.typeof()

typeof funcation use one check what type data we use

for Example :

console.log(typeof 42);
// expected output: “number”

console.log(typeof ‘blubber’);
// expected output: “string”

console.log(typeof true);
// expected output: “boolean”

console.log(typeof undeclaredVariable);
// expected output: “undefined”

5.Equality (==)

Comparison operators are used in logical statements to determine equality or difference between variables or values.

for Example :

console.log(1 == 1);
// expected output: true
console.log('hello' == 'hello');
// expected output: true
console.log('1' ==  1);
// expected output: true
console.log(0 == false);
// expected output: true

6.Spread Operator

Spread operator allows an iterable to expand in places where 0+ arguments are expected. It is mostly used in the variable array where there is more than 1 values are expected. It allows us the privilege to obtain a list of parameters from an array. Syntax of Spread operator is same as Rest parameter but it works completely opposite of it.

for Example :

const inputValue = [...value];

7. Arrow functions

Arrow functions — a new feature introduced in ES6 — enable writing concise functions in JavaScript. While both regular and arrow functions work in a similar manner, yet there are certain interesting differences between them, as discussed below.

for Example :

const multify = (x) => {
return (x*x);
};
console.log(multify(9));
------------------------
const nums = [
  '100',
  '2003',
  '30004',
  '4005'
];
console.log(nums.map(num => num.length));
//expected output:Array [3, 4, 5, 4]

8. Anonymous Functions

An anonymous function is a function without a name. An anonymous function is often not accessible after its initial creation.

The following shows an anonymous function that displays a message:

let show = ()=> {     
     console.log('Anonymous function'); 
};  
show();

Summary

• Anonymous functions are functions without names.
• Anonymous functions can be used as an argument to other functions or as an immediately invoked function execution.

9.JavaScript prototype

By default, the JavaScript engine provides the Object() function and an anonymous object that can be referenced via the Object.prototype.

console.log(Object);
console.log(Object.prototype);

ƒ Object() { [native code] }

{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}

constructor: ƒ Object()

hasOwnProperty: ƒ hasOwnProperty()

isPrototypeOf: ƒ isPrototypeOf()

propertyIsEnumerable: ƒ propertyIsEnumerable()

toLocaleString: ƒ toLocaleString()

toString: ƒ toString()

valueOf: ƒ valueOf()

__defineGetter__: ƒ __defineGetter__()

__defineSetter__: ƒ __defineSetter__()

__lookupGetter__: ƒ __lookupGetter__()

__lookupSetter__: ƒ __lookupSetter__()

get __proto__: ƒ __proto__()

set __proto__: ƒ __proto__()

10. What is https

HyperText Transfer Protocol Secure

HTTPS HTTPS (HyperText Transfer Protocol Secure) is an encrypted version of the HTTP protocol.…How to fix a website with blocked mixed content If your website delivers HTTPS pages, all active mixed…Mixed content An HTTPS page that includes content fetched using cleartext HTTP is called a mixed content…The Strict-Transport-Security: HTTP header lets a website specify that it may only be accessed using HTTPS…or Worker for which there is reasonable confidence that the content has been delivered securely (via HTTPS/en-US/docs/Web/Security)