Closure, example with object inside function

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

"borderRadius":"1rem",
   "variant":"primary",
   "color":"red"

is it because of returning a function? why and how arguments of function apply to that newProps object
thank You in advance

Hello, I debugged this on replit and its missing a closing bracket. Hope the helps!

So, the definition of closure is:

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.

ok but how parameter of function(borderRadius) can be connected to object’s(newProps) property(borderRadius), is it usual?

The function createVariantButtonProps has access to this parameter since it was created inside the function with the parameter borderRadius.

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

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.