HomeLập trìnhJavaScriptHướng dẫn JavaScript...

Hướng dẫn JavaScript về Hàm Mũi tên – Cách Khai báo Hàm JS với Cú pháp ES6 Mới


Có thể bạn đã thấy các hàm mũi tên được viết theo một vài cách khác nhau.

//example 1
const addTwo = (num) => {return num + 2;};

//example 2
const addTwo = (num) => num + 2;

//example 3
const addTwo = num => num + 2;
 
//example 4
const addTwo = a => {
 const newValue = a + 2;
 return newValue;
};

Một số có dấu ngoặc đơn xung quanh các tham số, trong khi một số khác thì không. Một số sử dụng dấu ngoặc nhọn và return từ khóa, những người khác thì không. Một thậm chí kéo dài nhiều dòng, trong khi những cái khác bao gồm một dòng.

Thật thú vị, khi chúng ta gọi các hàm mũi tên ở trên với cùng một đối số, chúng ta sẽ nhận được kết quả tương tự.

console.log(addTwo(2));
//Result: 4

Làm thế nào để bạn biết nên sử dụng cú pháp hàm mũi tên nào? Đó là những gì bài viết này sẽ khám phá: cách khai báo hàm mũi tên.

Một sự khác biệt lớn

Các hàm mũi tên là một cách khác—ngắn gọn hơn—để viết các biểu thức hàm. Tuy nhiên, chúng không có ràng buộc riêng với this từ khóa.

//Function expression
const addNumbers = function(number1, number2) {
   return number1 + number2;
};

//Arrow function expression
const addNumbers = (number1, number2) => number1 + number2;

Khi chúng ta gọi các hàm này với cùng một đối số, chúng ta sẽ nhận được kết quả tương tự.

Đọc thêm  5 cách xây dựng ứng dụng thời gian thực với JavaScript

console.log(addNumbers(1, 2));
//Result: 3

Có một sự khác biệt quan trọng về cú pháp cần lưu ý: các hàm mũi tên sử dụng mũi tên => thay cho function từ khóa. Có những điểm khác biệt khác cần lưu ý khi bạn viết các hàm mũi tên và đó là điều chúng ta sẽ khám phá tiếp theo.

dấu ngoặc đơn

Một số hàm mũi tên có dấu ngoặc đơn xung quanh các tham số và một số khác thì không.

//Example with parentheses
const addNums = (num1, num2) => num1 + num2;

//Example without parentheses
const addTwo = num => num + 2;

Hóa ra, số lượng tham số mà hàm mũi tên xác định xem chúng ta có cần bao gồm dấu ngoặc đơn hay không.

Một chức năng mũi tên với tham số không yêu cầu dấu ngoặc đơn.

const hello = () => "hello";
console.log(hello());
//Result: "hello"

Một chức năng mũi tên với một tham số làm không phải yêu cầu dấu ngoặc đơn. Nói cách khác, dấu ngoặc đơn là tùy chọn.

const addTwo = num => num + 2;

Vì vậy, chúng ta có thể thêm dấu ngoặc đơn vào ví dụ trên và chức năng mũi tên vẫn hoạt động.

const addTwo = (num) => num + 2;
console.log(addTwo(2));
//Result: 4

Một chức năng mũi tên với nhiều thông số yêu cầu dấu ngoặc đơn.

const addNums = (num1, num2) => num1 + num2;
console.log(addNums(1, 2));
//Result: 3

Chức năng mũi tên cũng hỗ trợ thông số nghỉ ngơi hủy diệt. Cả hai tính năng đều yêu cầu dấu ngoặc đơn.

Đọc thêm  Phương thức mảng JavaScript – Cách sử dụng every() và some() trong JS

Đây là một ví dụ về chức năng mũi tên với một thông số nghỉ ngơi.

const nums = (first, ...rest) => rest;
console.log(nums(1, 2, 3, 4));
//Result: [ 2, 3, 4 ]

Và đây là một trong đó sử dụng hủy diệt.

const location = {
   country: "Greece",
   city: "Athens"
};

const travel = ({city}) => city;

console.log(travel(location));
//Result: "Athens"

Tóm lại: nếu chỉ có một tham số—và bạn không sử dụng tham số còn lại hoặc hàm hủy—thì dấu ngoặc đơn là tùy chọn. Nếu không, hãy chắc chắn bao gồm chúng.

Cơ thể chức năng

Bây giờ chúng ta đã nắm được các quy tắc dấu ngoặc đơn, hãy chuyển sang phần thân hàm của một hàm mũi tên.

Phần thân hàm mũi tên có thể có “phần thân ngắn gọn” hoặc “phần thân khối”. Loại cơ thể ảnh hưởng đến cú pháp.

Đầu tiên, cú pháp “cơ thể ngắn gọn”.

const addTwo = a => a + 2;

Cú pháp “cơ thể ngắn gọn” chỉ có vậy: nó ngắn gọn! chúng tôi không sử dụng return từ khóa hoặc dấu ngoặc nhọn.

Nếu bạn có hàm mũi tên một dòng (như ví dụ trên), thì giá trị được trả về hoàn toàn. Vì vậy, bạn có thể bỏ qua return từ khóa và dấu ngoặc nhọn.

Bây giờ hãy xem cú pháp “thân khối”.

const addTwo = a => {
    const total = a + 2;
    return total;
}

Lưu ý rằng chúng tôi sử dụng cả hai dấu ngoặc nhọn và return từ khóa trong ví dụ trên.

Bạn thường thấy cú pháp này khi phần thân của hàm có nhiều hơn một dòng. Và đó là một điểm quan trọng: bọc phần thân của hàm mũi tên nhiều dòng trong dấu ngoặc nhọn và sử dụng return từ khóa.

Đọc thêm  JavaScript Rest vs Spread Operator – Đâu là sự khác biệt?

Đối tượng và Chức năng Mũi tên

Có thêm một sắc thái cú pháp cần biết: đặt thân hàm trong dấu ngoặc đơn khi bạn muốn trả về một biểu thức đối tượng bằng chữ.

const f = () => ({
 city:"Boston"
})
console.log(f().city)

Không có dấu ngoặc đơn, chúng tôi gặp lỗi.

const f = () => {
   city:"Boston"
}
//Result: error

Nếu bạn thấy cú pháp hàm mũi tên hơi khó hiểu, thì bạn không đơn độc. Phải mất một thời gian để làm quen với nó. Nhưng nhận thức được các lựa chọn và yêu cầu của bạn là các bước đi theo hướng đó.

Tôi viết về việc học lập trình và những cách tốt nhất để thực hiện nó (amymhaddad.com).



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status