Shoutout Haskell Curry and Moses Schonfinkel.

They are credited with the invention of currying functions.
I heard about currying because... well... I'm a programmer. And of all the programming buzzwords, currying was my favorite.
Naturally, I had to figure out what currying is, hence this page.

Currying is the process of taking a function that takes multiple arguments, and turning it into a series of functions that each take one argument.

I was curious how this could be useful in a frontend environment, so I asked chatGPT:
"Currying can be particularly useful in a React application for passing down functions to components with partial application. This can be helpful in scenarios where you have a base function that is often called with the same first argument but needs to remain flexible for other arguments."

Ok, so that makes sense. However, I am making a very important pointless thing here, so my use-case is slightly different at the moment.

Now, here is what I cooked up for the sake of currying:
(but sadly, you cant see the exact code file, so I'll add a code block down below).

Currying in Action

The function below is our basis for currying in this example. It takes an initial value and returns a function that takes an increment value. The returned function increments the counter by the increment value and returns the new counter value.

const createCounter = (initialValue: number) => (incrementBy: number) => {
	let counter = initialValue;
	return () => {
		counter += incrementBy;
		return counter;
	};
};
Counter: 0
Click the button to start counting!

curried function:
const incrementCounter = createCounter(0)(1);

Ten Counter: 10

Click the button to start counting!


curried function:
const incrementFromTen = createCounter(10);
const incrementTenByThree = incrementFromTen(3);
The Code that powers this example

FUN FACT: if you do not create the incrementCounter function outside of the CurryPage component, 
the counter will not increment correctly.
If the function is created inside the CurryPage component, 
the function is essentially recreated each time the component is rendered, 
so incrementCounter will be recreated with an initial value of 0 almost each time the button is clicked.
The reason it is not *always* reset to 0 has to do with the way React re-renders components.
Creating incrementCounter outside of the page component creates a closure 
that keeps the counter value safe from re-renders.
Rerendering is different from Reloading the page, which would reset the counter to 0.

const createCounter = (initialValue: number) => (incrementBy: number) => {
	let counter = initialValue;
	return () => {
		counter += incrementBy;
		return counter;
	};
};

// Currying all in one line
const incrementCounter = createCounter(0)(1);

// OR you could do this to take advantage of currying and the closure created by the createCounter function
const incrementFromZero = createCounter(0);
const incrementZeroByOne = incrementFromZero(1);

const incrementFromTen = createCounter(10);
const incrementTenByThree = incrementFromTen(3);

const getZeroCounterMessage = (val: number): string => {
	if (val < 5) {
		return "Keep going!";
	} else if (val < 10) {
		return "You're halfway there!";
	} else {
		return "Great job, you've reached 10!";
	}
};

const getTenCounterMessage = (val: number): string => {
	if (val < 5) {
		return "Keep going!";
	} else if (val < 10) {
		return "You're halfway there!";
	} else {
		return "Great job, you've reached 10!";
	}
};

// Function to handle the button click
const handleCounterClick = (incrementFoo: ()=>number, setCounter: React.Dispatch<React.SetStateAction<number>>, getMessageFoo: (val: number) => string, setMessage: React.Dispatch<React.SetStateAction<string>>) => {
	const newCounterValue = incrementFoo();
	setCounter(newCounterValue);
	// Update the message based on the new counter value
	setMessage(getMessageFoo(newCounterValue));
};

const CurryPage = () => {
  // State to hold the current counter value
  const [counter, setCounter] = useState(0);
  const [tenCounter, setTenCounter] = useState(10);

  // State to hold the message
  const [message, setMessage] = useState("Click the button to start counting!");
  const [tenMessage, setTenMessage] = useState("Click the button to start counting!");

THE END... well not actually because there is more code under the hood, 
but if I keep trying to type the code that is on the page we will reach an infinite loop