Javascript Fundamentals Part-2

1.Block Bindings in ES6

Generally, bindings occur whenever we declare or set a value in a variable. For example, we use var, let, and const to assign a variable.

Now I will explain how var and hoisting occur and how to use ES6 for block bindings using var, let, and const.

2.Var Declarations and Hoisting

When variables declared with var they are hosted to the top of the function or global scope if declared outside a function. var declarations are treated as if they are hoisted to the top of the function as enclosing block or to the global scope if they are declared outside a function. Consider the following function:

3.Block-Level Declarations

Block-level declarations are those that declare variables that are inaccessible outside of given block scope. Block scopes are created:

  • Inside a function or function block
  • Inside a block (wrapped with curly { } braces)

Variable declarations using let or const are not hoisted to the top of the enclosing block which can limit the variable’s scope to only the current code block. But if you want the variables are available to the entire block then you can declare the variable using let or const first in the block. consider the same example but with let:

so if let and const are used in block scope then hoisting will not occur but if var is used then hoisting will occur or variable will be accessible outside the block scope.

4.Types In JavaScript

There is two basic groups of Data Types in JavaScript. (Primitive, Reference)

Primitive / Value Types

In JavaScript, Primitive Data Type is data that is not an object and has no methods. When We Say Primitive, it basically means -

  • They Don’t Have any associated functions to perform operations on them.
  • They are immutable, so you can’t mutate them as you do in objects.
  • They are not an object and they don’t have any methods.

Let’s see this through an example:

As You can see, Primitives are immutable. when we write b = a, value of a is copied into b. So, value of b is now 10. ( b = 10 ). It doesn’t matter if we reassign a. Because a and b both are independent variables. As long as we aren’t reassigning the value of b, value of b will be 10.

Reference Types

There are mainly 3 reference types in JavaScript = arrays, objects, functions. Arrays and Functions are a special type of objects. Reference types are not immutable like Primitive Types. Lemme show you an example

5.Takeaway

  • Primitives (number, string, Boolean, symbol) are copied by their value.
  • Primitives are immutable.
  • Objects (functions & arrays are also Objects) are copied by their reference.
  • Objects are mutable.

6.Why using const or let is best instead of var

Basically, unlike other language there is no way to create scope in JavaScript except function block. So, for loop and if… else..else don’t create scope. That’s creates a lot of unexcepted bug in our code. But const and let (That is Es6 features) solve this problem completely. If you declare with const or let inside a just curly braces, it is not accessible from out this block. So do not use var forget about it.

7.What does “new “ keyword do while creating an instance

  1. It creates at first a new empty object and assign “this “to this empty object.
  2. It returns that object from the constructor function.
  3. It makes prototype of empty object as the prototype of constructor function therefor we can access methods or variable declared in constructor prototype from newly created object.

8. Comments

Every programming code has a comment system. It’s the main thing to understand the functionality summary in one/more lines of comments. So the comment is a line of summary text which is not affecting our main code. That is not run in our compiler.

9.Spread Operator

Spread Operator takes in an iterable (array) and expands it to a list of arguments. The … spread operator is useful for many different tasks including the following:

Copying an existing array, Merge or combine arrays, Call function without apply, Use in Math Functions, Use in restructuring, Use an array as arguments, adding to state in React, Convert arguments or NodeList to Array

some of the code example:

10.Block-Level Functions

In Javascript, ES6 allows block-level functions which are hoisted on top of the function or hoisted into the global scope. For example:

A Passionate Web technology enthusiast. Curious to know new technology every day.