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?

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

Demo

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

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.
      

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.

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

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

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.

(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

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

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

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

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

//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

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.

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.