Hàm mũi tên ngắn gọn và béo trong JavaScript

Mũi tên đồng ý là dạng hàm mũi tên béo được xếp theo dòng hơn đối với các hàm một dòng. Nếu thân hàm chỉ có một dòng mã, thì không cần dấu ngoặc nhọn {} cho thân hàm vì các hàm mũi tên có ý thức có trả về ngầm định. Ngoài ra, nếu chỉ có một tham số thì nó có thể được viết mà không có dấu ngoặc đơn () nhưng nếu không có tham số thì dấu ngoặc đơn là cần thiết.

Cú pháp

Hàm mũi tên béo -

let add = (a,b) =>{return a+b;}

Hàm mũi tên cố ý:

let add = (a,b)=>a+b;

Nếu chỉ một tham số -

let add = a=>a+22;

Sau đây là mã cho các hàm mũi tên ngắn gọn và béo trong JavaScript -

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 20px;
      font-weight: 500;
      color: blueviolet;
   }
</style>
</head>
<body>
<h1>Fat vs concise arrow functions</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to call the add() and multiply() arrow function</h3>
<script>
   let resEle = document.querySelector(".result");
   let add = (a, b) => a + b;
   let multiply = (a, b) => {
      return a * b;
   };
   document.querySelector(".Btn").addEventListener("click", () => {
      resEle.innerHTML = "Sum of 32 and 19 = " + add(32, 19) + "<br>";
      resEle.innerHTML =
      "Multiplication of 32 and 19 = " + multiply(32, 19) + "<br>";
   });
</script>
</body>
</html>

Đầu ra

Hàm mũi tên ngắn gọn và béo trong JavaScript

Khi nhấp vào nút 'BẤM VÀO ĐÂY' -

Hàm mũi tên ngắn gọn và béo trong JavaScript