preface

Add (1)(2)(3)(4) The output result is 10. When I first saw this interview question, many friends felt confused! Borrow Wang Baoqiang in “people in lost Journey” performance: what what what, what is this writing? The following brother Hu for your little partners to bring the mystery of this problem.

One, core point – variant of basic function – function corrification

So let’s start at zero and look at it bit by bit. Add (1), (2), (3), (4), the output value of 10, very simple, everyone knows it is 1+2+3+4. So how does that work with the base function?

function add (a, b, c, d) {
	return a + b + c + d
}
add(1, 2, 3, 4) // 10
Copy the code

How can add(1)(2)(3)(4) also print 10? The next thing you might think is:

function add (a) {
	return function (b) {
		return function (c) {
			return function (d) {
				return a + b + c + d
			}
		}
	}
}
Copy the code

Isn’t it perfect?

But if you say that, the interviewer will immediately kill you. What if you add up to 100? (PS: Not saying 10,000 is polite)

Wang teacher classic sayings: the following is the key, circle up, must test!!

The concept of function rying: Currying is a technique that converts a function that takes multiple arguments into a function that takes a single argument, and returns a new function that takes the remaining arguments and returns a result.

Second, the solution of function Coriolization

There are two different scenarios for currification of functions, one is a function with a fixed number of parameters, the other is a function with an indefinite number of parameters.

  1. The number of parameters of the function of the fixed length of the Solution

    // Fixed length parameterfunction add (a, b, c, d) {
	return [
	  ...arguments
	].reduce((a, b) => a + b)
}

function currying (fn) {
	let len = fn.length
	let args = []
	return function_c (... NewArgs) {// Combine parameter args = [...args,...newArgs] // Determine whether the length of the current parameter set args is less than the length of the target function fn's demand parameterif(args. Length < len) {// continue to return the functionreturn _c
		} else{// Returns the execution resultreturn fn.apply(this, args.slice(0, len))
		}
	}
}
let addCurry = currying(add)
letTotal = addCurry(1)(2)(3)(4) // Support addCurry(1)(2, 3)(4) Call console.log(total) // 10Copy the code

  2. Currization solution with an indefinite number of function parameters

    Problem upgrade: then this problem upgrade again, function parameter number is uncertain, how to implement?

    functionadd (... args) {return args.reduce((a, b) => a + b)
}

function currying (fn) {
	let args = []
	return function_c (... newArgs) {if (newArgs.length) {
			args = [
				...args,
				...newArgs
			]
			return _c
		} else {
			return fn.apply(this, args)
		}
	}
}

letConsole. log(addCurry(1)(2)(3)(4, 5)()))Copy the code

Afterword.

The above is brother Hu today to share the content, like partners remember to collect, forward, click on the lower right corner of the button to see, recommended to more partners yo, welcome a lot of message exchange…

Brother Hu has words, a technology, feelings of brother Hu! The current jingdong front – end siege lion. Hu Ge has words, focus on the field of front-end technology, share front-end system architecture, framework implementation principle, the latest and most efficient technology practice!

Long press scan code attention, more handsome more beautiful yo! Pay attention to Brother Hu said the public number, and Brother Hu continue to in-depth exchanges!