Revisiting Functions & Parameters

1.基础写法

• 函数参数可以设定默认值，调用时不提供对应参数值时就会使用函数定义时指定的默认值

  function greet(userName, message = "hello") {
    return "Hi, " + userName + message;
  }
  
  const greetMsg = greet("userName");
  

2.箭头函数

• () =>

  export default (userName, message = "hello") => {
    return "Hi, " + userName + message;
  }
  

3.More on the Arrow Function Syntax

• 只有一个参数时，可以省略括号

  userName => { ... }
  

• 函数体内只有一行return语句时，可以省略花括号和return关键子

  number => number * 3;
  

• 省略写法时需要返回一个对象时，需要使用括号包裹一下

  number => ({ age: number });
  

• 参考详细说明

  When working with Arrow Functions, you have a couple of "syntax shortcuts" available.
  
  Most importantly, you should know about the following alternatives:
  
  1) Omitting parameter list parentheses
  
  If your arrow functions takes exactly one parameter, you may omit the wrapping parentheses.
  
  Instead of
  
      (userName) => { ... }
  
  you could write
  
      userName => { ... }
  
  Please note: 
  
      If your function takes no parameters, parentheses must not be omitted - () => { ... } is the only correct form in that case.
  
      If your function takes more than one parameter, you also must not omit parentheses - userName, userAge => { ... } would be invalid ((userName, userAge) => { ... } is correct)!
  
  2) Omitting function body curly braces
  
  If your arrow function contains no other logic but a return statement, you may omit the curly braces and the return keyword.
  
  Instead of
  
      number => { 
        return number * 3;
      }
  
  you could write
  
      number => number * 3;
  
  The following code would be invalid:
  
      number => return number * 3; // invalid because return keyword must also be omitted!
  
      number => if (number === 2) { return 5 }; // invalid because if statements can't be returned
  
  3) Special case: Just returning an object
  
  If you go for the shorter alternative explained in 2) and you're trying to return a JavaScript object, you may end up with the following, invalid code:
  
      number => { age: number }; // trying to return an object
  
  This code would be invalid because JavaScript treats the curly braces as function body wrappers (not as code that creates a JS object).
  
  To "tell" JavaScript that an object should be created (and returned) instead, the code would need to be adjusted like this:
  
      number => ({ age: number }); // wrapping the object in extra parentheses
  
  By wrapping the object and its curly braces with an extra pair of parentheses, JavaScript understands that the curly braces are not there to define a function body but instead to create an object. Hence that object then gets returned.