Function 1

  • Function declaration
function showMessage() { alert( 'Hello everyone!' ); }
Copy the code

1. Local variables

function test() { let message = "Hello, I'm test!" ; // local variable alert( message ); } test(); // Hello, I'm test! alert( message ); // <-- Error! The variable is local to the functionCopy the code

2. External variables

Functions can also access external variables. External variables are only used when there are no local variables. Look for internal variables and then look for external variables

let userName = 'John';

function test() {
  let message = 'hi, ' + userName;
  alert(message);
}

test(); // hi, John
Copy the code

And you can modify external variables

let userName = 'John';

function test() {
  userName = "Bob"; // (1) changed the outer variable

  let message = 'hi, ' + userName;
  alert(message);
}

alert( userName ); // John before the function call

test();

alert( userName ); // Bob, the value was modified by the function
Copy the code

Use arguments to pass arbitrary data to a function. In the following example, the function takes two arguments: data and text.

function showMessage(data , text) { // parameters: data, text alert(data + ': ' + text); } showMessage ('test', 'Hello! '); // test: Hello! showMessage ('test1', "test"); // test1:testCopy the code

4. You can give default values to function parameters

function showMessage(data, text = "no text given here" ) {
  alert( data + ": " + text );
}

showMessage("data"); // data: no text given here
Copy the code

This is a useful idea. Parameter checking we can check if the parameter is passed during function execution by comparing it with undefined

function test(text) {
  // ...

if (text === undefined) { // if the parameter is missing
    text = 'empty message';
  }

  alert(text);
}

test(); // empty message
Copy the code

A function can return a value as a result to the calling code

A null return or function without it returns undefined

  • Be careful never to bereturnAdd a newline character between the value and
return
 (some + long + expression + or + whatever * f(a) + f(b))
Copy the code

This doesn’t work because JavaScript is in return. This will be the same as the following:

return ; 
 (some + long + expression + or + whatever * f(a) + f(b))
Copy the code
  • So what do you do if you want to show multiple rows
return ( 
something do at this part ...
)
Copy the code

7, an important part of the function naming specification

  • "Get..."— Returns a value,
  • "Calc..."— Calculate something,
  • "Create..."— Create something,
  • "Check..."— Check something and return a Boolean, etc.
  • Very short function names are not commonly used but should be noted

The jQuery framework defines a core function named _ with $

The general can be omitted and the else can be omitted

Function checkAge(age) {if (age > 18) {return true; } else { // ... return confirm('right? '); }}Copy the code
Function checkAge(age) {if (age > 18) {return true; } / /... return confirm('Did parents allow you? '); }Copy the code
  • What’s the best way to write a simple question?

Write a function min(a,b) that returns the minimum of two numbers a and b using the solution if:

function min(a, b) { if (a < b) { return a; } else { return b; }}Copy the code

Solution with question mark operator ‘? ‘:

function min(a, b) {
  return a < b ? a : b;
}
Copy the code

2. Function expressions

1. Another way to create a function would look like this:

let sayHi = function() {
  alert( "Hi" );
};
Copy the code

This function should ask question and, depending on the user’s answer, call yes() or no() :

function ask(question, yes, no) { if (confirm(question)) yes() else no(); } function showOk() { alert( "agreed." ); } function showCancel() { alert( "canceled" ); } ask(" it?" , showOk, showCancel);Copy the code

What is the difference between a function expression and a function declaration?

Function expressions are created when execution arrives and are only available from that moment

  • But the function is available atCalled before declaration
  • Because function declarations are promoted to the top before execution

For example,

sayHi("test"); // Hello, test

function sayHi(name) {
  alert( `Hello, ${name}` );
}
Copy the code
  • When you need to declare a function, it is best to use a function declaration because it is visible before the declaration itself,But function declarations have block scope

3. Arrow function

let func = (arg1, arg2, ... , argN) => expressionCopy the code

In other words, it is a shorter version of the following:

let func = function(arg1, arg2, ... , argN) { return expression; };Copy the code

  • Further simplifying, only one argument is preceded by parentheses and only one return value is preceded by parentheses

  • Multiple lines of content need to be enclosed in curly braces