There are two main ways to define a method in JavaScript:

  • Function declaration
  • Functional expression

Function declaration

Declarative body is the most common and similar to other languages.

function func(a, b) {
  return a + b
}

func(1.2) / / 3
Copy the code

After all, JavaScript! It has one feature: function promotion.

Function promotion: Promotes all functions to the current scope so that they can be called “undeclared”.

(Highlight! Test later!)

Functional expression

This is probably the most common declaration used today, because you can use arrow functions to “pretend you’re programming functionally.”

const func = function(a, b) {
  return a + b
}

// Arrow function version
const funcA = (a, b) = > a + b

func(1.2) / / 3
Copy the code

However, due to variable scope, const and LET have no variable promotion capability.

funcA(1) // ReferenceError: funcA is not defined
const funcA = a= > a
Copy the code

Fire goose, this is just the beginning…

Function expressions: anonymous & named

Anonymous is the above, and named is to give the function body a new name.

const func = function funcName() {}
Copy the code

What’s the use of that? That last name doesn’t work! The answers are different.

First there is a function name inference, such as the one above, where func.name returns funcName, or [fn].name returns “if the function is anonymous (in the case of ES5, ES6 is inferred as the outer function name). Second, the name can be used internally, of course, to refer to itself.

const func = function funcName(a, b) {
  return a < 0 ? b : funcName(a+1-b, a)
}

func(431.151) / / 281
funcName(431.151) // ReferenceError: funcName is not defined
console.log(func.name) // funcName
typeof funcName === 'function' // false
Copy the code

So this works best for recursive functions.

The function expression is still a constant/variable

Keywords already determine what form this “quantity” will take, such as var and let are variables, const is constant, and let has scope.

const funcA = (a)= > console.log('A')
funcA() // A
funcA = (a)= > console.log('AA') // TypeError: Assignment to constant variable.

var funcB = (a)= > console.log('B')
funcB() // B
funcB = (a)= > console.log('BB')
funcB() // BB
Copy the code

As an aside: Then there is the old question that function expressions are “flexible” in theory, so

function funcB() {
  console.log('B')
}
funcB()
function funcB() {
  console.log('BB')
}
funcB()
Copy the code

What are the results of the two funcbs?

Arrow function

Here’s our favorite arrow function, who doesn’t want to write arrow functions now?

const func = a= > b => a + b
func(1) (2) / / 3
Copy the code

However, the arrow function has two features:

  • No context is created (none of its ownthis)
  • It has to be an anonymous function
  • There is noarguments

Isn’t it two o ‘clock? How did it get to three? At this point, you might want to go back and check that, but I’m telling you, it’s actually 3:00.

As for the arrow function itself not having this, there are many articles about this pointing correlation, you can read those articles to get the answer.

Evaluate the property function name

This should exist in the context of “objects”, after all objects can refer to any number of situations as long as they are objects.

const object = {
  ['a' + 'b'](a, b) {
    return a + b
  }
}

object.ab(1.2) / / 3
Copy the code

This implements the “function name can be temporarily unknown” case, by computing to get the function.

Other

new Function

Here’s a way to do it without knowing where: by object creation

const func = new Function('a'.'b'.'return a + b')
func(1.2) / / 3
Copy the code

The initial value of a function parameter

There may be a requirement for parameters to have initial values, but there may not be

function func(a = 1, b = 2) {
  return a + b
}

func() / / 3
Copy the code

Maybe we use these more often

const funcA = (obj = {}) = > obj

const funcB = (arr = []) = > arr
Copy the code

But JavaScript is a “function is the first citizen” language, and many higher-order functions will be written. so

const func = (fn = () = > 'YDJFE') => fn.call(null)
Copy the code

Why can’t a function as a parameter have an initial value? Of course it can!

conclusion

I just want to write a method in JavaScript… Why is it so complicated…

(About JavaScript definition methods, if there are other postures welcome to add ~)