Detailed explanation of arrow functions in JavaScript (ES6)

Arrow function in javaScript

Arrow function is a new content in ES6. For beginners, there may be a lot of doubts. What is the difference between braces and brackets? I read a lot of blogs, and they are all ambiguous. Today I will offer you dry goods, after reading it This can definitely be masteredArrow function。

First of all, it is clear that the arrow function has two different parentheses, and the functions are different, such as the following code The arrow function followed by the parentheses has only one line of code by default and has a return by default. The default is the code segment followed by the braces, and there is no return value by default. You need to manually add return.

const f2=(a,b)=>(a+b)

const f =(a,b)=>{
    
    
   const c =a+b
   return c
}

This is the most easily overlooked place for js beginners. The functions of the two codes are the same, butThe first one is parentheses and there is no return,The second one has return and curly braces, So where is the difference? The following is an explanation for everyone. After reading this, you will have a thorough grasp of arrow functions.

Let me talk about the first

Look at the following code example

//函数功能是求a+b的值
const f2=(a,b)=>(a+b)
//也可以写成
const f2 =(a,b)=>a+b
//控制台输出
console.log(f2(2,4))

The above code console will output 6This is because there is no curly brace after the arrow function, there is only one line of code by default, and will return the value of the following expression (so only one line can also omit the parentheses)

The second

The second is completely different, it is easy to understand by comparison, see the following code

//同样求a+b的和
const f =(a,b)=>{
    
    
   const c =a+b
}
//控制台输出
console.log(f(1,2))

This time the console output is not 3, it is undefine. The reason is that the brace function is not a line of code by default, and it does not return by default. Change the code to the following

//同样求a+b的和
const f =(a,b)=>{
    
    
   const c =a+b
   return c
}
//控制台输出
console.log(f(1,2))

This time the console output is 3. The braces are code segments by default, and there is no return value. We can return the calculation result c.

The following code expands for readers

<div id="test1" ></div>
<div id="test2"></div>


const con1 =()=> (<div>
      <p >我是标签p</p>
   </div>)
const con2 =()=>{
    
    
   return(<div>
      <p >我是标签p2</p>
   </div>)
}
ReactDOM.render(con1(),document.getElementById('test1'))
ReactDOM.render(con2(),document.getElementById('test2'))

Similarly, the first one will automatically return to the component, and the second one needs to add return,If there is no return, the component cannot be loaded into test2

to sum up

• The arrow function followed by parentheses has only one line of code by default and returns by default

• The default is the code segment followed by the braces, there is no return value by default, you need to manually add return