JS Concepts

Question 1

CLOSURE

Answer 1

The ability for inner functions to remember variables defined in outer functions, long after the outer function has returned. Useful for encapsulating logic and private variables.

Question 2

IIFE

Answer 2

Immediately Invoked Function Expression
A function which is invoked immediately. Used for encapsulating variables and functions in a scope, preventing them from being manipulated or accessed from outside.

Question 3

PROTOTYPE

Answer 3

Prototypes are mechanisms that help JavaScript objects inherit features from one another.

Question 4

The new keyword

Answer 4

The new keyword does four things:
1. Creates an empty object
2. Sets the keyword ‘this’ to be that object
3. Returns the object - return this
4. Creates a link to the object’s prototype

MDN: The new operator lets developers create an instance of a user-defined object type or of one of the built-in objects types that has a constructor function.

Question 5

This keyword

Answer 5

1. Global context: which is window
2. The function context:

Question 6

Prototypical Inheritance

Answer 6

Prototypical inheritance is a key feature of JavaScript that allows objects to inherit properties and methods from other objects. In JavaScript, each object has an internal property called [[Prototype]] that points to another object, known as its prototype. If a property or method is not found on an object, JavaScript looks up the prototype chain until it finds the property or until the end of the chain is reached.

How Prototypical Inheritance Works:
Prototype Chain:

Every object in JavaScript has a prototype, which is itself an object, forming a chain of prototypes.
The chain is traversed during property or method lookups.
Object Creation:

Objects can be created using constructor functions, object literals, or other means.
prototype Property:

Functions have a prototype property, which is used as the prototype for objects created by that function.
Object.create() Method:

The Object.create() method is used to create a new object with a specified prototype.
**********
// Constructor function
function Animal(name) {
this.name = name;
}

// Adding a method to the prototype
Animal.prototype.sayHello = function() {
console.log(Hello, I'm ${this.name});
};

// Creating objects using the constructor
const cat = new Animal(‘Cat’);
const dog = new Animal(‘Dog’);

cat.sayHello(); // Output: Hello, I’m Cat
dog.sayHello(); // Output: Hello, I’m Dog

// Prototypical inheritance
function Dog(name, breed) {
// Call the parent constructor
Animal.call(this, name);
this.breed = breed;
}

// Inherit from Animal’s prototype
Dog.prototype = Object.create(Animal.prototype);

// Adding a method specific to Dog
Dog.prototype.bark = function() {
console.log(‘Woof!’);
};

const germanShepherd = new Dog(‘Rex’, ‘German Shepherd’);
germanShepherd.sayHello(); // Output: Hello, I’m Rex
germanShepherd.bark(); // Output: Woof!

Question 7

Higher Order Function

Answer 7

A higher-order function is a function that takes one or more functions as arguments, or returns a function as its result.

Question 8

Hoisting

Answer 8

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compile phase. It’s important to understand how hoisting works with var, let and const. Variables declared with var are hoisted to the top of the function or global scope. However, variables declared with let and const are hoisted to the top of the block scope, but they remain uninitialized until the code execution reaches the declaration.

Question 9

Call-Stack

Answer 9

The call stack is a data structure in JavaScript that keeps track of the execution context of a program. It is used to manage the flow of control in a program by keeping track of function calls. Whenever a function is invoked, a new frame is pushed onto the call stack, representing the context of that function’s execution. When the function completes, its frame is popped off the stack.

Here’s a step-by-step explanation of how the call stack works:

1. Function Invocation:
   
   • When a function is called, a new frame is created and pushed onto the top of the call stack. This frame contains information such as the function’s arguments, local variables, and the return address (the position in the code where the function was called from).
2. Execution:
   
   • The function’s code is executed within the context of its frame on top of the call stack.
3. Nested Function Calls:
   
   • If the function being executed contains other function calls, new frames are pushed onto the call stack for each of those calls. The call stack maintains the order of function calls, with the most recently called function at the top.
4. Return:
   
   • When a function completes its execution, its frame is popped off the call stack, and control returns to the function that called it. The return value (if any) is passed back to the calling function.
5. Empty Stack:
   
   • When all functions have completed execution, the call stack becomes empty.
6. main is called and a frame for main is pushed onto the call stack.
7. add is called from main, and a frame for add is pushed onto the stack.
8. add completes, its frame is popped off, and control returns to main.
9. square is called from main, and a frame for square is pushed onto the stack.
10. square completes, its frame is popped off, and control returns to main.
11. main completes, its frame is popped off, and the call stack is empty.

Question 10

Reference Type

Answer 10

Reference Types
In JavaScript, reference types are a classification of data types that do not directly contain the data but instead hold a reference to the memory location where the data is stored. This is in contrast to primitive types, which directly store their values.
The primary reference types in JavaScript are:
1. Object:
* Objects are a fundamental reference type in JavaScript.
* They are used to group related data and functions together.
* Objects are created using object literals, constructors, or the Object constructor.
2. Array:
* They are objects that are for storing ordered data .
* There are numeric indices to access elements.
* Arrays have various built in methods for manipulating their content.
3. Function:
* They are also reference type in JS.
* Functions are objects with the additional ability to be invoked.
* They can be created using function declarations, function expressions, or arrow functions.
4. Date:
* The ‘Date’ object is used for working with dates and times.
* It provides methodsfor getting and setting various date and time components.
5. Custome Objects:
* Developers can create their own custom objects using constructor functions or classes.
* Custom objects allow for the creation of user-defined data structures.

Question 11

Primitive Types

Answer 11

Primitive types are the simplest data types that directly store values.Unlike reference types which store reference(memory addresses) to the actual data, primitive types directly contain the data itself.
1. Number
2. String
3. Boolean
4. Null
5. Undefined
6. BigInt
Symbol