Know these fundamental concepts to become JavaScript developer.
Tags: javascript, webdev, interviewjs, beginners
Published: 2022-12-04 12:41:40

## JS fundamental part-1
These are the important topics that accelerate JavaScript concept.
Some of the questions with answers for the JS interview.

## Why do we call JavaScript a dynamic language?

JavaScript is a dynamic language that means data types of the variables can change during the runtime.

> example
> 

```
var x = 90;
x++;
console.log(typeof (x)); // number
x = "string";
console.log(typeof (x)); // string
... so on.
```

## how does JavaScript determine data types?

JS determines data types depending on the value assigned during run time.

> Example
> 

```
let x = true;
let datatype1 = typeof (x);

let y = "string";
let datatype2 = typeof (y);

let z = 0;
let datatype3 = typeof (z);

console.log("1." + datatype1, "2." + datatype2, "3." + datatype3);
```

## What are different datatypes in JavaScript?


![different types of data types](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tj3s9jzn91gc5fxvzsug.jpg)

## Explain Undefined Data types and null?

Undefined means the variable has been declared but no value is assigned to it.

> Example
> 

```
var x = 100;
var word = "Hello";
// These above are defined with some values
var y;

console.log(x);
console.log(word);
console.log(y);

output:
100
Hello
undefined
```

Null indicates the intentional absence of data. Null indicates its not ZERO, it's not empty it's just an absence of data.

> Example
> 

```
var x = 100;
var word = "Hello";
// These above are defined with some values
var y = null;

console.log(x);
console.log(word);
console.log(y);

output:
100
Hello
null
```

## Undefined Vs Null

> clear with example
> 

```
var x = 100;
var word = "Hello";
// These above are defined with some values
var y;
var n = null

console.log(x);
console.log(word);
console.log(y);
console.log(n);

output:
100
Hello
undefined -> Here variable has been created but the value is not assigned.
null -> we assign the value Null, which indicates an absence of data.
```

## What is Hoisting?

It’s a mechanism where variable and function declarations are at the top of the scope.

> Demo
> 

```
console.log(y); // before execution: undefined
var y = "Ram";
console.log(y); // after execution: Ram

// for a function
getName(); // fuction declared here
console.log(getName);
function getName() {
    console.log("Curry");
}

```

## var VS let

![https://www.geeksforgeeks.org/difference-between-var-and-let-in-javascript/](https://www.geeksforgeeks.org/difference-between-var-and-let-in-javascript/)

> Demo
> 

```jsx
var name = "John";
let name1 = "Doe";
```


![let vs var](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3bydqqk8ryhp0bkzzt7.jpg)

**Above confusion about function and block scope.**

First of all, What is Scope?

- Scope
    
    *‘scope’ means which variable is accessible and up to which point it is accessible.*
    
- Local scope and global scope
    - Global scope
        
        *In JS whole document is the global scope which contains other functions and variables.*
        
    - Local scope
        
        variables declared inside the functions are considered to be of the local scope and it is further divided into function scoped and block scope.
        
        - Function Scope
            
            When a variable is declared inside a function, it is only accessible within that function and cannot be used outside that function.
            
            **var** is called function scope.
            
        - Block Scope
            
            A variable when declared inside the if or switch conditions or inside for or while loops, are accessible within that particular condition or loop. To be concise the variables declared inside the curly braces are called within block scope.
            
            **let & const** are also called block scope.
            

```jsx
function Demo() {

    if (true) {
        var a = "hello";
        let b = 90;
        const c = "world";
        console.log("inside scope");
        console.log(a);
        console.log(b);
        console.log(c);
    }
    console.log("outside scope");
    console.log(a); // function scope
    console.log(b);
    console.log(c);
}
console.log(a); // outside function it is not defined
Demo();

output:
inside scope
hello
90
world
outside scope
hello
d:\Js\frontEnd\jsInterview.js:14
    console.log(c);
                ^

ReferenceError: c is not defined
d:\Js\frontEnd\jsInterview.js:15
    console.log(c);
                ^

ReferenceError: c is not defined
```

As the output shows when we try to access the variables b and c outside the if statement it gives an error as not defined. same for a variable when trying access outside the function.

## What are Closures and why do we need Closures?

Closures are functions inside function and it makes a normal function stateful. closure gives you access to an outer function’s scope from an inner function.

```jsx
function sum(a) {
  return function (b) {
    return function (c) {
      // outer functions scope
      return function (d) {
        // local scope
        return a + b + c + d ;
      };
    };
  };
}

console.log(sum(1)(2)(3)(4)); // 10
```

Closures are

1. Self-contained modules.
2. Self-contained state.

## IIFE (Immediately Invoked Function Expression)

This is nothing but an anonymous function which invoked immediately. This is also called a function without a name.

demo

```jsx
var x = 0;
(function(){
var y = 30;
console.log("I am anonymous function");
})();
// any variable within iife is local to it.
```

## What is name collision and how can you remove it?

Name collision happens when the same name function names and 
variable names are declared.

demo

```jsx
function hello(a,b){
var sum = 0;
 console.log(sum+a+b);
}
var hello = "hey result is ";
hello();
// error: hello() is not a function
```

By using the anonymous function we can easily remove it.

```jsx
(function (a,b){
var sum = 0;
console.log(sum+a+b);
})();
var hello = "hey result is ";

// error: hello() is not a function
```

## What are the various ways to create JavaScript objects?

We can create an object in three different ways:

1. Using object literal
2. By creating an instance of an Object directly
3. By using the constructor function
4. ES6 class

### 1. Using object literal

Literals are smaller and simpler ways to define objects. We simply define the property and values inside curly braces.

Example

```jsx
const student = {
                name: "xyz",
                faculty:"cse",
                department: function(){
                             console.log("from computer department");
                            }
           }

console.log(student);
console.log(student.name);
```

### 2. By creating an instance of an object directly

The Object. create() method creates a new object, using an existing object as the prototype of the newly created object.

Example

```jsx
const student = {
                name: "xyz",
                faculty:"cse",
                department: function(){
                             console.log("from computer department");
                            }
           }

const s1 = Object.create(student);
console.log(s1);
console.log(s1.name);
```

### 3. By using the constructor function

One of the easiest way to instantiate an object in JavaScript. A **constructor** is nothing but a function and with help of a **new** keyword, the constructor function allows to create of multiple objects of the same flavor as shown below:

Example

```jsx
const student = {
                name: "xyz",
                faculty:"cse",
                department: function(){
                             console.log("from computer department");
                            }
           }

const s1 = new student();
console.log(s1);
console.log(s1.department);
```

```jsx
//simple function with argument
function vehicle(name,maker,engine){
	this.name = name;
	this.maker = maker;
	this.engine = engine;
}
//new keyword to create an object
let car = new vehicle('GT','BMW','1998cc');
//property accessors
console.log(car.name);
console.log(car.maker);
console.log(car['engine']);
```

### 4. ES6 class

ES6 supports class concepts like any other Statically typed or object-oriented language.

Example

```jsx
class Student {
               constructor(name,age,faculty){
                     this.name = name;
                     this.age = age;
                     this.faculty = faculty;
}
  }

const s1 = new Student("xyz",21,"cse");
console.log(s1);
```

Remaining Concept you will learn.

- OOP Concepts
- How can we do inheritance in JavaScript ?
- What is prototype in JavaScript ?
- Explain Prototype chaining ?
- What is Let Keyword?
- Are Let variables hoisted ?

## Explain Temporal Dead Zone?
Temporal Dead Zone (TDZ) is a state of variables where variables are named in memory, but they are not initialized with any value.

```jsx
console.log(x); // error can't access 'x' before initialize
// This is TDZ
// This is TDZ
let x = 10; // End of TDZ
```

Thankyou for reading.
Your comments appreciates me to improve my writing. Hope this helpful. Next part will soon... stay tuned.