Giải thích các hàm viết tắt trong JavaScript?

Các hàm mũi tên còn được gọi là hàm viết tắt đã được giới thiệu trong ES2015 và cho phép chúng ta viết hàm theo cách ngắn hơn. Họ không có ràng buộc riêng với điều này và lấy điều này từ bối cảnh xung quanh.

Sau đây là đoạn mã hiển thị các hàm viết tắt 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: 18px;
      font-weight: 500;
      color: rebeccapurple;
   }
</style>
</head>
<body>
<h1>Shorthand function in JavaScript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to invoke arrow and normal function</h3>
<script>
   let resEle = document.querySelector(".result");
   let objYear, obj1Year;
   let obj = {
      name: "rohan",
      age: 20,
      birthday() {
         function birthYear() {
            objYear = new Date().getFullYear() - this.age;
         }
         birthYear();
      },
   };
   let obj1 = {
      name: "Shawn",
      age: 22,
      birthday() {
         let birthYear = () => {
            obj1Year = new Date().getFullYear() - this.age;
         };
         birthYear();
      },
   };
   document.querySelector(".Btn").addEventListener("click", () => {
      obj.birthday();
      obj1.birthday();
      resEle.innerHTML += " Without arrow function : Birth Year = " + objYear + " ";
      resEle.innerHTML += " With arrow function : Birth Year = " + obj1Year + " ";
   });
</script>
</body>
</html>