I understand definition of closure, function binded to its lexical environment,function inside function, also understand scope chain, when inner function reffer to parent function and so on till it comes to memory of global scope, understand simple examples of it, but here is example I need help with
let buttonProps = (borderRadius) => {
const createVariantButtonProps = (variant, color) => {
const newProps = {
borderRadius,
variant,
color
};
return newProps;
}
return createVariantButtonProps;
let primaryButton = buttonProps("1rem")
let primaryButtonProps = primaryButton("primary", "red")
console.log(primaryButtonProps)
buttonProps is a function with parameter borderRadius
and have inner function createVariantButtonProps with two parameters… my question is how is parameter of outer function reffered to newProps object, by how is it reffered to it…when function buttonProps is called we get
A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment ). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.
When you create a “child” function inside the other one. A child func kinda captures environment (activation object that contains parameters of the parent func) of the parent func and thus have access to params and local vars of the parent func.
let buttonProps = (borderRadius) => {
// borderRadius is available inside the function body
// you can refer to it wherever you want inside
// as long as you dont override it
}
// here we dont have access to borderRadius