Function Composition

Lesson content

🎯 Goal By the end of this lesson, you'll understand: What is Function Composition? Why do we use it? How does it work? Real-world examples Interview questions What is Function Composition? Function Composition means combining two or more functions to create a new function . Instead of writing one large function, you break it into smaller functions and connect them. Simple Definition: The output of one function becomes the input of another function. Real-Life Example 🏭 Imagine a car factory. A car goes through different stages: Raw Material │ ▼ Build Body │ ▼ Paint Car │ ▼ Quality Check │ ▼ Ready Car Each stage performs one job. Function Composition works the same way. Example 1: Without Function Composition function processNumber ( num ) { num = num + 5 ; num = num * 2 ; num = num - 3 ; return num ; } console . log( processNumber ( 10 )); Output 27 Everything is inside one function. Example 2: With Function Composition Create small functions. function add5 ( num ) { return num + 5 ; } function multiply2 ( num ) { return num * 2 ; } function subtract3 ( num ) { return num - 3 ; } const result = subtract3 ( multiply2 ( add5 ( 10 ))); console . log( result ); Output 27 Flow 10 │ ▼ add5() │ ▼ 15 │ ▼ multiply2() │ ▼ 30 │ ▼ subtract3() │ ▼ 27 Why Use Function Composition? Instead of writing one huge function, write many small reusable functions. Benefits: ✅ Easy to read ✅ Easy to test ✅ Easy to reuse ✅ Easy to maintain Real-Life Example 🛒 Shopping Website Product Price │ ▼ Apply Discount │ ▼ Add GST │ ▼ Round Price │ ▼ Final Price Each step is a separate function. Create a compose() Function Instead of writing: subtract3 ( multiply2 ( add5 ( 10 ))); Create a reusable compose() . function compose ( f1 , f2 ) { return function ( value ) { return f1 ( f2 ( value )); }; } Example function double ( x ) { return x * 2 ; } function square ( x ) { return x * x ; } const doubleAfterSquare = compose ( double , square ); console . log( doubleAfterSquare ( 5 )); Output 50 Flow 5 │ ▼ square() │ ▼ 25 │ ▼ double() │ ▼ 50 Compose Multiple Functions const compose = (... functions ) => { return ( value ) => functions . reduceRight(( acc , fn ) => fn ( acc ), value ); }; Example function add2 ( x ) { return x + 2 ; } function multiply3 ( x ) { return x * 3 ; } function square ( x ) { return x * x ; } const calculate = compose ( square , multiply3 , add2 ); console . log( calculate ( 5 )); Output 441 Flow 5 │ ▼ add2() │ ▼ 7 │ ▼ multiply3() │ ▼ 21 │ ▼ square() │ ▼ 441 compose() vs Normal Functions Normal square ( multiply3 ( add2 ( 5 ))); Composition const calculate = compose ( square , multiply3 , add2 ); calculate ( 5 ); Cleaner and reusable. compose() vs pipe() compose() Runs Right → Left compose(f3, f2, f1) Input │ ▼ f1 │ ▼ f2 │ ▼ f3 pipe() Runs Left → Right pipe(f1, f2, f3) Input │ ▼ f1 │ ▼ f2 │ ▼ f3 Difference compose() pipe() Right → Left Left → Right Uses reduceRight() Uses reduce() Functional programming Functional programming Interview Question What is the output? function add10 ( x ) { return x + 10 ; } function multiply2 ( x ) { return x * 2 ; } console . log( multiply2 ( add10 ( 5 ))); Output 30 Explanation 5 │ ▼ add10() │ ▼ 15 │ ▼ multiply2() │ ▼ 30 Where is Function Composition Used? ✅ React ✅ Redux ✅ Express.js Middleware ✅ RxJS ✅ Functional Programming ✅ Data Transformation Key Points ✅ Function Composition combines multiple functions into one. ✅ The output of one function becomes the input of the next. ✅ It encourages small, reusable, and testable functions. ✅ compose() runs right to left , while pipe() runs left to right . 🧠 Easy Formula Input │ ▼ Function 1 │ ▼ Function 2 │ ▼ Function 3 │ ▼ Output Remember: Function Composition = Small Functions + Chained Together = Cleaner Code 🚀