Interview Questions-Functions

compose and pipe

				
					const add = (x) => x + x;
const mul = (x) => x * x;
const sub = (x) => x - 2;

const compose = (add1, mul1, sub1) => (data) => add1(mul1(sub1(data)));
const pipe = (add1, mul1, sub1) => (data) => sub1(mul1(add1(data)));

const output1 = compose(add, mul, sub);
const output2 = pipe(add, mul, sub);

console.log(output1(5)); //18
console.log(output2(5)); //98



				
			
				
					compose - from right to left
compose(add, mul, sub); --> first sub , then mul then add
5-2 = 3 --> 3*3 --> 9 + 9 -->18

pipe - from left to right
compose(add, mul, sub); --> first add , then mul then sub
5 + 5 --> 10 --> 10*10 --> 100 --> 100-2 --> 98
We are hardcoding the methods as below.
const compose = (add1, mul1, sub1) => (data) => add1(mul1(sub1(data)));
  • If Division method comes again the compose method has to be changed 
  • To make it generalised method , lets use reduce and reduceright.
  • Reduce will be for pipe 
    • From left to right
  • Reduceright will be for compose
    • Function execution from right to left
				
					const add = (x) => x + x;
const mul = (x) => x * x;
const div = (x) => x / x;

const pipe = (...functions) => {
  return (arg) => {
    return functions.reduce((acc, curFunc) => {
      console.log("acc is arg first time i,e -->5 -->10(5+5)-->20(10+10) -->400(20*20)" + acc);
      console.log("curFunc will be function: add -->add-->mul" + curFunc);
      console.log("args will be always 5-->this will be used first time..." + arg);
      return curFunc(acc);
    }, arg);
  };
};

const output = pipe(add, add, mul);
console.log(output(5));
const output = pipe(add, add, mul);

first add will be called –>then add again–>then mul
*********************************************
acc is arg first time i,e –>5
acc = arg =5 for the first time

step 1–> curFunc(acc) –> add(5) –> 5 + 5 –>10–> acc is 10 now
step 2–> curFunc(acc) –> add(10) –> 10 + 10 –> acc is 20 now
step 3–> curFunc(acc) –> mul(20) –> 20 * 20 –> acc is 400 now
400 is returned now
arg is used only once –> the input 5
*********************************************

				
					const add = (x) => x + x;
const mul = (x) => x * x;
const div = (x) => x / x;

const compose = (...functions) => {
  return (arg) => {
    return functions.reduceRight((acc, curFunc) => {
      console.log(
        "acc is arg first time i,e -->5 -->10(5+5)-->20(10+10) -->400(20*20)" +
          acc
      );
      console.log("curFunc will be function: add -->add-->mul" + curFunc);
      console.log(
        "args will be always 5-->this will be used first time..." + arg
      );
      return curFunc(acc);
    }, arg);
  };
};

const output = compose(add, add, mul);
console.log(output(5)); //100
//5*5 =25--> 25 + 25 --> 50 +50 ==> 100

Guess the output (compose) ?

				
					const add = (x) => x + x;
const mul = (x) => x * x;
const div = (x) => x / x;

const compose = (...functions) => {
  return (arg) => {
    return functions.reduce((acc, curFunc) => {
      return curFunc(acc);
    }, 4);
  };
};

const output = compose(add, add, mul);
console.log(output(5));

Hover over to see the result. Attempt to guess the answer first.

256

console.log(output(5));
Here input 5 doesnt make any impact
Initial value is 4 now
4+4 =8
8+8=16
16*16 =256

Guess the output ?

				
					
const classAttendance=(principal,...teachers,students)=>{
  console.log(principal);
  console.log(students);
  console.log(teachers);
}
classAttendance("principal",["teacher1", "teacher2"],["Student1", "Student2", "Student3"]);

Hover over to see the result. Attempt to guess the answer first.

Rest parameter has to be at end

Error !!!!!

Guess the output ?

				
					const classAttendance=(principal,students,...teachers)=>{
  console.log(principal);
  console.log(students);
  console.log(teachers);
}
classAttendance("principal",["Student1", "Student2", "Student3"],["teacher1", "teacher2"]);

Hover over to see the result. Attempt to guess the answer first.

OUTPUT


principal
["Student1", "Student2", "Student3"]
["teacher1", "teacher2"]

Function Expression vs Function Declaration !!

				
					//Function Declaration vs Function Expression

console.log(functionDeclaration());
//index.js:1118 Uncaught ReferenceError: Cannot access 'functionExpression1' before initialization
console.log(functionExpression1());
//index.js:1118 Uncaught ReferenceError: Cannot access 'functionExpression2' before initialization
console.log(functionExpression2());

function functionDeclaration() {
  console.log("function declaration");
}

const functionExpression1 = function () {
  console.log("function expression1");
};
const functionExpression2 = () => {
  console.log("function expression2");
};

Functions are first class citizens. What does it mean ?

				
					//1)**function can be treated as variable**

const calculator = () => 4 * 3;
let x = calculator();
				
			
				
					//2)**function can be passed as arguments
//Calculator method is getting passed as argument to PrintCallback method

const calculator = () => 4 * 3;

const printCallback = (callback) => {
  console.log(callback());
};
printCallback(calculator);
				
			
				
					//3)**function can return functions**
function name() {
  return function (a) {
    console.log("Hello" + a);
  };
}

Higher Order Functions vs Callback functions- Differences

  • Calculator is Higher order function – which takes function as arguments. It takes operator function as argument.
  • JavascriptLearning is returning function. so it is higher order function.
  • Multiplication is callback function. Because this functions gets passed as an argument
				
					const javascriptLearning = (name) => {
  return function (topic) {
    console.log(`Hi ${name}. Are you learning ${topic} ??`);
  };
};
javascriptLearning("Anurag")("Javascript");
//output:- Hi Anurag. Are you learning Javascript ??
				
			
				
					const addition = (x, y) => {
  return x + y;
};
const multiplication = (x, y) => {
  return x * y;
};
const calculator = (num1, num2, operator) => {
  return operator(num1, num2);
};
console.log(calculator(10, 5, multiplication))
//!OUTPUT -50

Guess the output

				
					const oldGamesWon = () => {
  let count = 10;
  console.log(`old trophy count is :: ${count}`);
  return count;
};

const newGamesWon = (newcount = 0,count = oldGamesWon()) => {
  console.log(`I am won so far ${count + newcount} trophies`);
};

newGamesWon(20,50);

Hover over to see the result. Attempt to guess the answer first.

OUTPUT

I am won so far 70 trophies

Guess the output

				
					function ConvertMetreToFoot(x){
    return x *  3.28084;
}
console.log(ConvertMetreToFoot(2));//6.56168

Hover over to see the result. Attempt to guess the answer first.

OUTPUT

6.56168

Guess the output

				
					console.log(ConvertMetreToFoot(2));

function ConvertMetreToFoot(x){
    return x *  3.28084;
}

Hover over to see the result. Attempt to guess the answer first.

OUTPUT

6.56168

Guess the output

				
					console.log(ConvertMetreToFoot(2));//6.56168

let ConvertMetreToFoot =function (x){
    return x *  3.28084;
}

Hover over to see the result. Attempt to guess the answer first.

OUTPUT

error :- Cannot access 'ConvertMetreToFoot' before initialization

Leave a Comment