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
Pipe using reduce
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));
OUTPUT :- 400
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
*********************************************
compose using reduceright
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
OUTPUT :- 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
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 ?
key points
⦿ function can be treated as variable
⦿ function can be passed as arguments
⦿ function can return functions
⦿ function can be passed as arguments
⦿ function can return functions
//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
HOF:- FUNCTIONS THAT TAKES OTHER FUNCTIONS AS ARGUMENTS
- Calculator is Higher order function – which takes function as arguments. It takes operator function as argument.
HOF:- RETURNS FUNCTIONS AS ARGUMENTS
- JavascriptLearning is returning function. so it is higher order function.
CALLBACK FUNCTIONS :- GETS PASSED AS AN ARGUMENT TO ANOTHER FUNCTIONS
- 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
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
old trophy count is :: 10
I am won so far 35 trophies
I am won so far 35 trophies