🌠 Pure functions
This function computes a result only based on the input it receives. In other words, there are no side effects, and no global variables are used (outer variables).
When the same arguments are passed to pure functions, the result will always be the same.
Some other examples of pure functions in JS: sqrt() , pow() , abs() …
🔃 Closure
In the grand scheme of things: access to outer functions from inner functions.
How is it possible?
We saw that pure functions are using only what’s within the function’s scope. Those kind of functions are stored on the call stack and are popped immediately after execution; they are short-lived.
As opposed to non-pure functions that are long-lived as they are stored in the heap and collected by the garbage collection sometime after execution.
Due to the use of outer variables outside of the scope of the current function, closures are not pure. Quite a bit of memory and processing power is required, but this is good for data encapsulation since there is no access from outer to inner functions, only from inner to outer.
👀 Closures are less scary than we think.
func has access to the outer variable person as they are both stored on the heap for the closure.
👀 Closures always take the “latest” value.
👀 Here a more complex example where the “inner/outer” terminology is used. outer returns function inner which we store in variablefuncinner expects an argument hence we call it like so: func("Lara")
When inner executes, it will have access to the latest value of a which is hi (line 6)
🍛 Currying
Yummy name :)
Currying is when we don’t want to pass all parameters at once, instead we break it down to smaller functions.
Suppose we have a function that prepares a meal that takes 3 ingredientsrice, chicken, spices → cook("rice", "chicken", "spices")
Currying the function will result in cook("rice")("chicken")("spices")
As each function takes in a parameter, it returns the next function until the value is returned. Eventually, the functions get the arguments they need and the last function returns some output.
To sum up:cook("chicken")→ returns a function that accepts "rice"→ then returns a function that accepts "spices"→ that finally returns just the meal :)
This is especially useful when we need easy access to partials. This allows us to gradually build the result we want throughout the app.
📝Note: the last closure example is an example of currying ;)
🥶 Immutability/ Deep and Shallow Copy
An immutable object is an object that can’t be modified after its created.
In the Objectclass a method called freeze() can be used to create read-only (immutable) objects.
To modify the object, we will have to create a new object using the spread operator to keep all previous keys and values in the object.
freeze performs a deep copy on the “first” layer of elements. However, if one of the keys was storing an array, elements within the array are considered modifiable as they are within the second layer.
We can use deepFreeze() which will recursively freeze “each layer” of the object.
📝Note:
Deep copy: Will create an entire new reference
Shallow copy: Only copies the structure (reference), not the element.
⚡ HOC (High Order Components)
High-order functions take a function as an argument and return another function or variable that’s “enhanced”.
Ex: map , reduce , forEach , filter
In React, HOC’s take in a component and returns another component that’s “enhanced”. Its also used to share functionality between components.
Follow me to read more about React HOCs in an article ill post soon!
✔️ Conclusion
HOCus Pocus 🌟! We are done!
Do we have a closure with pure functions, immutability and some of those other topics?
Go have some curry(ing) + rice and please leave a comment if you have any questions :)
P.S I really tried hard to have a nice conclusion, maybe a bit to much☺️
Until next time,
Lara Mo
