Advance JavaScript concepts beginners should know about

Hi, my name is Naeem Dadi. I'm a self-taught MERN stack developer. I completed my bachelor's in Mechanical Engineering. In 2019 I didn't even knew the difference between code editor and command prompt and now I am developing full-stack apps of my own.

So Why Javascript

The simple answer is because it's everywhere. If you're building for the web even for the smallest interaction you'll need JavaScript. Be it for implementing small functionality like click event or making entire apps with this language. You can do mobile as well as desktop apps with javascript as well. So yes it's everywhere and it powers almost 95% of the web as per Stack Overflow survey.

Why these advanced concepts are important for beginners

Because JavaScript is complex and weird. If you're starting with javascript understanding these concepts will make you less prone to errors. These concepts will help you in the long run because libraries and frameworks will come and go but the fundamentals will always be the same.

1. Variable Assignment (Value vs. Reference)

In JavaScript, data types fall into two categories: primitive data types and objects and they behave very differently. JavaScript's five primitive data types are String, Number, Boolean, null and undefined which are inmutable. When the assigned value is one of the primitive types then the actual value will be assigned but when it's Objects, Functions, or Array the reference in the memory will be assigned which will be mutable.

Understood? ok let's see an example

Here we are assigning friend1 equal to friend1 which will return "Jack"

let friend1 = "Jack"
let friend2 = friend1

console.log(friend1 );
// 'Jack'
console.log(friend2);
// 'Jack'

But when we will assign a new value to friend2 it won't have an effect on friend1.

let friend2 = "Jone"

console.log(friend1 );
// 'Jack'
console.log(friend2);
// 'Jone'

Let's do same for objects assignment

let obj1 = { name: 'Jack' }
let obj2 = obj1

obj2.name = 'John'

console.log(obj1)
// { name: 'John' }
console.log(obj2)
// { name: 'John' }

As seen in the above example we are able to mutate the value of the obj1 based on obj2 because it holds reference in the memory.

The other difference we need to understand is comparison operator === works differently when comparing references.

let obj1 = { name: 'John' }
let obj2 = { name: 'John' }
console.log(obj1 === obj2) // return false;

Here the two identically same objects are not the same. The reason is both have a different reference in memory which is not the same. To check equality in objects we can stringify objects but even that is not a suitable option. We need a library like loadash which can do deep checking with its isEqual() function.

2. Hoisting

In JavaScript functions and variables are moved to the top of the current scope. So the function you have defined after the code can be called before it is defined and in that case you won't get an error and that's what Hoisting is.

welcome(John);
function welcome(name) {
        console.log('Welcome ' + name)
}
// return Welcome John

In the above example, we have called our function before it's defined and it ran perfectly. That's Hoisting in JavaScript.

3. Scope

The scope is simply meant access and in javascript, the scope is variable scope. Which variable do we have access to when the code is running? With this, all variables are not available at any time. The scope is a simple box with boundaries for variables, function, and objects and that boundaries put restrictions on accessing the variables.

The scope definition is:

Scope is the accessibility of variables, functions, and objects in some particular part of your code during runtime. In other words, scope determines the visibility of variables and other resources in areas of your code.

The scope is defined in two ways:

Local Scope allows access to everything within the boundaries (inside the box) Global Scope is everything outside the boundaries (outside the box). A global scope can not access a variable defined in local scope because it is enclosed from the outer world, except if you return it.

let name = 'John'
function welcome() {
       console.log(name)
}
welcome();
// Output: John // Because welcome function has access to variable name because it is in global scope.

Now let's see different examples.

function welcome() {
      let name = 'John'
}
console.log(name);
// Output: Uncaught Reference error

In the above example, we will get an error because name variable can't be accessed globally it can be executed within the function or if we return the name than we can access this globally.

4. Identity Operator (===) vs. Equality Operator (==)

Be sure to know the difference between the identify operator (===) and equality operator (==) in JavaScript! The == operator will do type conversion prior to comparing values whereas the === operator will not do any type conversion before comparing.

== will only compare value

=== will compare type and value

console.log(1 == "1")
// return true

console.log(1 === "1")
// return false

5.Closures

If you have a function inside another function that will have access to outer function variables is then the inner function is called closure.

The closure is a simple yet powerful feature because it has to access to all of the variables of parent function as well as global variables. But parent function does not have access to child functions variables as we have discussed same in Scope.

function User(name){
  var displayName = function(greeting){
   console.log(greeting+' '+name);
  }
return displayName;
}
var myFunc = User('John');
myFunc('Welcome '); //Output: Welcome John
myFunc('Hello '); //output: Hello John

In this code, We have an outer function User() which returns an inner function as displayName(), The inner function will have access to the variables in the outer function scope, even after the outer function has returned.