Functional Programming in JavaScript



There are different "paradigms" (just a fancy word which means "ways of programming"!) in JS programming like Object Oriented, Functional, Imperative etc

Object Oriented involves all the OOPS concepts as we all know like Inheritance, Abstraction, Encapsulation, Polymorphism

Imperative programming involves coding in an imperative way, like first do this, then do that etc



Functional Programming

Everything is expressed in the program in terms of “functions”. This function takes an input and returns the transformed data as output

  •   Avoid side effects in functions, Use PURE functions: Any function that computes its output purely from the inputs it receives as arguments (should not modify other global data, change any other variable). Printing something to the console is also not “returning” an output.

Basically, the function has to read the input, take that, and only that to compute an output.


Functional programming means thinking of functions as purely as possible

  •  Use Higher Order Functions: Functions can be inputs/outputs to other functions.


  • Do not iterate (for loops). Instead use map/filter/reduce: Pass on variables/functions to map/reduce/filters and also get back functions as output

  • Data is immutable: In functional programming, we should not modify/change any variable’s value. Instead, we create copy and use this modified variable
Mutated: Bad

Not Mutated: Good!

However, with this style of programming we end up with lot of copies of “almost” same data, and unintended change to data might occur which might introduce bugs. So, libraries like immutable.js, Mori etc is used

Overall idea of what it does is:

Original Data-structure:

“size”

“color”

“length”

“type”

Array is represented as a bunch of tree nodes. A new node is created containing “category”. Other nodes are not repeated but re-used. The tree now points to this new node instead of previous “type” leaf node


This design is known as “Persistent Data Structure”. This is “structural sharing”, where parts of old versions are shared to the new version so we now have much more efficient code

Comments

Post a Comment

Popular posts from this blog

Inside the JavaScript Memory Box: Visualizing Variables, References, and Copies

Image
There is a difference in the way JavaScript refences variables based on whether they are primitive or non-primitive Primitive Types: string, number, bigint, Boolean, symbol, null, undefined Non-Primitive: Arrays, Objects Each variable in JS is stored in a memory “box” Assignments: But when another variable tries to assign this value, JS thinks “wait, is this a primitive or non-primitive? Because if it is primitive, I will create a new box for this new variable with the same content. But if it’s not, I will just create a refence to the existing box” PRIMITIVE: Analogy: Let's say you have a note that says 5. You give a copy of this note to your friend.  Friend now updates this copy to 10. But your copy still says 5 let a = 5; let b = a; b = 10; //a remains unchanged NON-PRIMITIVE: Analogy: Let's say you have a note with address "123 Elm Street". In that house lives a cat named "Tom". You give a copy of this note to your friend. Friend now goes t...
Read more

React & State Management: All Concepts

Section 1: Fundamentals 1. Counter with increment, decrement, reset — useState Remember: prev is needed when the new state depends on the old state. When you're setting a hardcoded value like 0, you just pass 0 directly. Why:  reason prev matters — if multiple state updates happen in the same render cycle, React batches them. Using prev guarantees you're working off the latest state, not a stale snapshot. 2. Toggle show/hide paragraph — useState Remember: onClick={toggle} — pass the function reference, not the call. onClick={() => toggle()} — also fine, arrow function that calls toggle when clicked. onClick={toggle()} — calls toggle immediately during render, setVisible triggers re-render, toggle calls again, infinite loop. Why: JSX evaluates expressions inside {} during render. toggle() is an expression that executes immediately. React doesn't get a chance to attach it as a handler — it just runs it right there, state updates, component re-renders, runs again. ...
Read more

React: Communication between components

Parent to Child: Props Child to Parent Callback Props (advanced props) Controlled Components useImperative hook  Nested Tree: useContext Sibling: Lift State Up PARENT TO CHILD: Props App.jsx Users.jsx <User name ={user} /> function User({ name }) {  return <h1> {name} </h1> } CHILD TO PARENT a) Callback Props (Advanced Props) Parent.jsx Child1.jsx export function Parent() {   function sayHello () {     alert(“hello triggered”)   }   <Child1 onSayHello ={ sayHello } /> } function Child1({ onSayHello }) {   return <button onClick={ onSayhello() }>          Click       </button> } b) Controlled Components Usually used in forms. Controlled components mean the parent owns the state, the child renders inputs, and every ch...
Read more