Khóa học javascript

Arrow function trong JavaScript

0 phút đọc

Ngoài function declarationfunction expression, JavaScript còn có arrow function. Trong bài viết này, mình sẽ trình bày về arrow function là gì và cách sử dụng arrow function cơ bản.

Arrow function trong Javascript là gì?

Arrow function trong JavaScript là hàm sử dụng kí hiệu => để định nghĩa, với cú pháp cơ bản như sau:

js Copy
let func = (arg1, arg2,..., argN) => expression;

Hàm trên nhận danh sách tham số là (arg1, arg2,..., argN), sau đó thực hiện biểu thức expression rồi return về kết quả của biểu thức expression.

Arrow function trong Javascript

Nói cách khác, đây là cách biểu diễn rút gọn của biểu thức hàm:

js Copy
let func = function(arg1, arg2,..., argN) {
      return expression;
    }

Ví dụ sử dụng arrow function trả về tổng của hai số:

js Copy
let sum = (a, b) => a + b;
console.log(sum(1, 2)); // 3

Hàm sum nhận vào hai tham số là ab. Sau đó, hàm này tính tổng a + b rồi trả về giá trị tổng đó.

Nếu arrow function có một tham số thì bạn có thể bỏ qua cặp dấu (), ví dụ:

js Copy
let square = (n) => n * n;

Trường hợp, arrow function không có tham số nào, thì bạn nên viết cặp dấu ():

js Copy
let sayHello = () => console.log("Hello!");

Sử dụng arrow function

Arrow function có thể được sử dụng giống như function expression.

Ví dụ khởi tạo hàm dựa trên điều kiện:

js Copy
let isVietnamese = confirm("Bạn có phải người Việt Nam không?");
let welcome = isVietnamese
  ? () => console.log("Chào bạn!")
  : () => console.log("Hello!");
welcome();

Ví dụ sử dụng arrow function làm hàm callback:

js Copy
function ask(question, handleYes, handleNo) {
  const answer = confirm(question);
  if (answer) {
    handleYes();
  } else {
    handleNo();
  }
}

ask(
  "Bạn muốn tiếp tục thực hiện chương trình không?",
  () => console.log("Bạn đã chọn Yes!"),
  () => console.log("Bạn đã chọn No!")
);

Arrow function với nhiều dòng code

Trong các ví dụ trên, thành phần expression chỉ là một dòng code. Tuy nhiên, bạn cũng có thể viết nhiều dòng code bằng cách đặt chúng vào trong cặp dấu {} và sử dụng từ khóa return để trả về giá trị.

Ví dụ arrow function tính tổng hai số với nhiều dòng code:

js Copy
let sum = (a, b) => {
  return a + b;
};

console.log(sum(1, 2)); // 3

Tổng kết

Vậy arrow function là gì?

Arrow function là hàm sử dụng kí tự => để khai báo hàm, giúp việc khai báo hàm trở nên ngắn gọn hơn.

Cú pháp cơ bản là:

js Copy
let func = (arg1, arg2,..., argN) => expression;

Arrow function trên nhận vào danh sách tham số (arg1, arg2,..., argN), thành phần expression được xử lý và trả về giá trị của expression.

Trường hợp có dấu {}, bạn cần sử dụng thêm từ khóa return để trả về giá trị của hàm.

js Copy
let func = (arg1, arg2,..., argN) => {
      expression;
      return something;
    }

Arrow function có thể được sử dụng giống như function expression.

Thực hành

Bài 1

Viết arrow function trả về giá trị nhỏ nhất của hai số (giả sử giá trị truyền nào luôn là số).

Xem đáp án

js Copy
let min = (a, b) => (a < b ? a : b);

min(2, 5); // 2
min(4, -1); // -1
min(3, 3); // 3

Trường hợp hai số truyền vào bằng nhau thì dĩ nhiên kết quả là giá trị của hai số đó.

Bài 2

Viết arrow function kiểm tra xem một số có phải là số nguyên tố hay không. Nếu là số nguyên tố thì trả về true. Ngược lại, trả về false.

Sau đó, in ra các số nguyên tố từ 1 đến 10.

Xem đáp án

js Copy
// Hàm kiểm tra số nguyên tố
const isPrime = (number) => {
  if (isNaN(number)) return false;

  if (number < 2) return false;
  if (number === 2) return true;

  for (i = 2; i * i <= number; i++) {
    if (number % i === 0) return false;
  }

  return true;
};

// Duyệt từ 1 đến 10 để in ra số nguyên tố
for (let i = 1; i <= 10; i++) {
  if (isPrime(i)) {
    console.log(i);
  }
}

// 2
// 3
// 5
// 7

Trong đó:

  • Hàm isNaN(number) dùng để kiểm tra giá trị của biến number xem có phải là NaN hay không. Nói cách khác, nếu isNaN(number) trả về false thì giá trị của number là số.
  • Vòng lặp for dùng để duyệt các số từ 1 đến 10.
Avatar
Được viết bởi

Admin Team

Gợi ý câu hỏi phỏng vấn

Không có dữ liệu

Không có dữ liệu

Gợi ý bài viết
Không có dữ liệu

Không có dữ liệu

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào