JavaScript

This repository contains a collection of daily JavaScript coding questions or concepts along with their solutions.
And my daily learnings .

In the problem folder, you will find different questions of JavaScript Solved with Questions attached .

JavaScript Concepts....

• Implicit Type Coercion

• IIFE

• Callback Function

• Slice

• Higher order Functions

• Currying

• Call Apply Bind

• Optional Chaining

• Inheritance

Implicit Type Coercion

Implicit type coercion in javascript is the automatic conversion of value from one data type to another. It takes place when the operands of an expression are of different data types.

• String coercion

String coercion takes place while using the ‘ + ‘ operator. When a number is added to a string, the number type is always converted to the string type

 var x = 3;
 var y = "3";
x + y // Returns "33" 

When JavaScript sees that the operands of the expression x + y are of different types ( one being a number type and the other being a string type ), it converts the number type to the string type and then performs the operation. Since after conversion, both the variables are of string type, the ‘ + ‘ operator outputs the concatenated string “33” in the first example and “24Hello” in the second example.

‘ + ‘ operator when used to add two numbers, outputs a number. The same ‘ + ‘ operator when used to add two strings, outputs the concatenated string:

var name = "Riya";
var surname = " Kumari";
name + surname     // Returns "Riya Kumari" 

Type coercion also takes place when using the ‘ - ‘ operator, but the difference while using ‘ - ‘ operator is that, a string is converted to a number and then subtraction takes place.

var x = 3;
Var y = "3";
x - y    //Returns 0 since the variable y (string type) is converted to a number type

IIFE

An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined

	// Regular Function.
	function Greet() {
		console.log("Welcome to the Readme.md");
	};
	// Execution of Regular Function.
	Greet();

	// IIFE creation and execution.
	(function() {
		console.log("Welcome to Readme.md!");
	})();

• IIFEs have their own scope i.e. the variables you declare in the Function Expression will not be available outside the function.
• Similarly to other functions IIFEs can also be named or anonymous, but even if an IIFE does have a name it is impossible to refer/invoke it.
• IIFEs can also have parameters.

Use Cases Of IIFE
• Avoid polluting the global namespace
• To create closures
• Avoid conflict of variable names between libraries and programs.

Callback Function

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

    function modifyArray(arr, callback) {
    arr.push(100);
    callback();
  }
  
  var arr = [1, 2, 3, 4, 5];
  
  modifyArray(arr, function() {
    console.log("array has been modified", arr);
  });

Slice

The Javascript arr.slice() method returns a new array containing a portion of the array on which it is implemented. The original remains unchanged.

const a = [1,2,3];
let b = a.slice(0,3);
b[1] = 4;
console.log(b[1]);
console.log(a[1]);

To know more about working of Slice method refer these:

• More about slice and shallow copy
• https://www.freecodecamp.org/news/copying-stuff-in-javascript



Higher Order Functions

Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions.

function higherOrder(fn) {
  fn();
}
   
higherOrder(function() { console.log("Hello world") });  

function higherOrder2() {
  return function() {
    return "Do something";
  }
}      
var x = higherOrder2();
x()   // Returns "Do something"

To know more about working of HOF refer these:

• https://www.freecodecamp.org/news/higher-order-functions-in-javascript-explained



Currying

It is a technique in functional programming, that transforms the function of multiple arguments into several functions of a single argument in sequence. It is a method that takes one argument at a time and returns a new function that expects the next argument.

function add (a) {
  return function(b){
    return a + b;
  }
}

add(3)(4)

Why is currying useful in JavaScript?
• It helps us to create a higher-order function
• It reduces the chances of error in our function by dividing it into multiple smaller functions that can handle one responsibility.
• It helps us to avoid passing the same variable multiple times
• It is very useful in building modular and reusable code



Call Apply Bind

• Call

It’s a predefined method in javascript.This method invokes a method (function) by specifying the owner object.call() method allows an object to use the method (function) of another object.

This Concept is called Function Borrowing

var person = {
age: 23,
getAge: function(){
  return this.age;
}
}        
var person2 = {age:  54};
person.getAge.call(person2);      
// Returns 54

call() accepts arguments:

function saySomething(message){
  return this.name + " is " + message;
}     
var person4 = {name:  "Riya"};     
saySomething.call(person4, "awesome");
// Returns "Riya is awesome"   

After looking at the above codes we can say that in layperson's terms, it helps you replace the value of this inside a function with whatever value you want.

Syntax

call(objectInstance)
call(objectInstance, arg1, /* …, */ argN)

• Apply

Apply is very similar to the call function. The only difference is that call() method takes arguments separately whereas, apply() method takes arguments as an array.

  function saySomething(message){
  return this.name + " is " + message;
}        
var person4 = {name:  "Riya"};
saySomething.apply(person4, ["awesome"]);

The best part about apply is we don’t need to take care of the number of arguments that are passed to the invoking function. Because of its dynamic and versatile nature, we can use it in complicated situations.

• Bind

This method returns a new function, where the value of “this” keyword will be bound to the owner object, which is provided as a parameter.

function saySomething(message){
  return this.name + " is " + message;
}     
var person4 = {name:  "Riya"};     
let Greet = saySomething.bind(person4, "awesome");
console.log(Greet());

The only difference between the call and bind is that it gives you copy of the function which can be invoked later rather than directly invoking it .

Optional chaining

The ?. operator is like the . chaining operator, except that instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined. When used with function calls, it returns undefined if the given function does not exist. The optional chaining (?.) operator accesses an object's property or calls a function. If the object accessed or function called using this operator is undefined or null, the expression short circuits and evaluates to undefined instead of throwing an error.

Inheritance

class surname {
  constructor() {
    console.log("kumari 💫");
  }
}

class Name extends surname {
  constructor() {
    console.log("Riya");
    super();
  }
}

const user = new Name();

Explanation :

const user = new Name();

This line creates an instance of the Name class, which triggers the constructor of the Name class. Inside the constructor, "Riya" is logged to the console, and then the super() method is called, which triggers the constructor of the surname class. In the surname constructor, "kumari 💫" is logged to the console.