10 Topics in a Day | Day 5| Javascript for Beginners

In this article, I’m going to discuss block binding, function, destructuring, and class. Let’s begin….

1. Var Declarations and Hoisting

If a variable is declared using var in the outside of a function, then the variable is treated as if it is at the top of the function regardless of where the actual declaration occurs. It is called hoisting. For instance,

The variable value is actually still accessible from within the else clause and it would just have a value of undefined because it hasn’t been initialized.

2. Constants vs Let Declarations

Both the keywords const and let works in the same way but there is a difference. The difference between them is that if we attempt to change the value of a variable that is declared with const then it will throw an error.

For instance,

3. Declaring Object with const

We can declare objects with const and it doesn’t prevent modification of those objects. But if we attempt to assign a value to that object then it throws an error. For instance -

It’s possible to change the property of the object without causing an error because this changes what the object contains. But if we attempt to assign a value to the object then it will throw an error because it attempts to change the binding.

Here one thing you should remember is that const prevents modification of the binding not modification of the assigned value.

4. The Temporal Dead Zone

A variable that is declared either with let or const can’t be accessed before its declaration within its scope. It causes a reference error. This situation is called the temporal dead zone.

For instance -

5. Object Destructuring

Object destructuring syntax uses an object literal on the left side of an assignment operation.

For instance -

In this code, the value of person.name is stored in a variable called name and the value of person.age is stored in a variable called age. The identifiers name and age are both declarations of local variables and the properties to read the value from on the person object.

There is one thing that should be remembered if you use destructuring to declare variables, you must supply initializer otherwise it returns a syntax error.

For instance -

6. Array Destructuring

Like the object destructuring, we can also destructure an array. Let’s see how a syntax of an array looks like -

Here, array destructuring pulls out the values “red” and "green” from the colors array, and then it stores them in the firstColor and secondColor variables. The values are chosen according to the position in the array.

7. Swapping variables

Using an array destructuring assignment, we can easily swap variables in JavaScript. Let’s see the demo -

8. Immediately-Invoked Function Expressions

Immediately-invoked function expressions (IIFEs) is a function which allows us to define an anonymous function and call it immediately without saving a reference.

For example:

In this code, the IIFE is used to create an object with a getName() method and the method uses name argument as the return value, effectively making the name a private member of the returned object.

9. Class as First-Class Citizens

In programming, something is said to be a first-class citizen when it can be used as a value, meaning it can be passed into a function, returned from a function, and assigned to a variable.

We can make classes first-class citizens as well. ES6 allows us to use classes in a lot of different ways. For example, they can be passed into functions as arguments:

The createObject() function is called with an anonymous class expression as an argument, creates an instance of that class with new, and returns the instance. The variable obj then stores the returned instance.

10. Difference Between Classes and Custom Types

Some important differences between classes and custom types are given below-

• Class declarations, unlike function declarations, are not hoisted.
• We can’t opt-out of strict mode inside classes, all the code inside of class declaration runs in strict mode automatically.
• All methods lack an internal Construct method. If we try to call them with new they will throw an error.
• If we call the class constructor without new, then it will throw an error.
• If we attempt to overwrite the class name within a class method then it will throw an error.

That’s all for today.