Cách nhập và xuất hàm trong JavaScript

Trong thời buổi hiện tại, JavaScript đóng một vai trò rất lớn trong việc phát triển trang web. Các nhà phát triển front-end sử dụng JavaScript để tạo các ứng dụng web tương tác. Do đó, nhu cầu tuyển dụng các nhà phát triển JavaScript ngày càng tăng.

Qua nhiều năm, JavaScript cũng đã phát triển mạnh mẽ. ES6 đã giới thiệu nhiều tính năng mới cho ngôn ngữ này. Một trong những tính năng nổi bật nhất đó là khả năng chia sẻ code dễ dàng giữa các file JavaScript.

Nhập và xuất hàm trong JavaScript là những tính năng mới, chúng chắc chắn sẽ giúp bạn trở thành một nhà phát triển tốt hơn. Dưới đây là cách hoạt động của những tính năng này.

Mô-đun JavaScript là gì?

Mô-đun JavaScript là một file JavaScript chứa một bộ sưu tập code để bạn sử dụng. Mô-đun thường được viết trong các file riêng biệt và được nhập bằng từ khóa nhập. Do có thể sử dụng lại sau này, nó giúp bạn tiết kiệm rất nhiều thời gian và công sức.

Hình ảnh minh họa từ nguồn gốc

Ví dụ: Nếu bạn có một hàm được gọi là mathSum(), bạn có thể đưa nó vào một file khác và cho nó xuất hiện ở bất kỳ đâu trong dự án của bạn bằng cách xuất và nhập các hàm JavaScript mà không gặp bất kỳ phiền phức nào.

Một trong những lợi ích của việc sử dụng mô-đun là nó giúp cho code của bạn có tổ chức hơn. Nó cũng làm cho code của bạn dễ quản lý hơn và dễ gỡ lỗi hơn.

Để sử dụng file JavaScript làm mô-đun, bạn cần tạo lệnh trong tài liệu HTML của mình với type="module".

Có hai loại mô-đun:

• Mô-đun ECMAScript: Mô-đun JavaScript tiêu chuẩn và được hỗ trợ bởi tất cả các trình duyệt chính.
• Mô-đun CommonJS: Đây là loại mô-đun cũ và không còn được sử dụng rộng rãi.

Cách xuất hàm trong JavaScript

Trong JavaScript, các hàm là các đối tượng hạng nhất (first-class) có thể được truyền dưới dạng đối số ngoài việc được sử dụng riêng. Xuất hàm là một cách hữu hiệu để di chuyển chúng vào các chương trình khác. Ngoài ra, xuất hàm còn có thể được sử dụng khi bạn muốn tạo ra các thư viện có thể tái sử dụng.

Xuất hàm trong JavaScript được thực hiện bằng cách sử dụng chức năng xuất. Hàm được xuất ra sẽ có thể được sử dụng bởi file hoặc script khác. Bằng cách xuất các hàm của riêng mình, chúng ta có thể thoải mái sử dụng chúng trong các file hoặc script khác mà không cần lo về vấn đề giấy phép, bản quyền.

Có hai cách để xuất hàm. Chúng ta sẽ xem xét từng cách một với các code mẫu.

Giả sử bạn có một file getPersonalDetails.js có chức năng trả về tên đầy đủ của người dùng sau khi nhận dữ liệu từ đầu vào. Hàm có dạng như sau:

function getFullName(fullName){
    fullName = prompt('What is your First Name');
    console.log(fullName);
}

Bạn có thể xuất hàm này bằng cách sử dụng từ khóa export sau đó tới tên của hàm trong ngoặc nhọn. Nó trông như thế này:

export {getFullName};

Phương thức thứ hai là thêm từ khóa export ngay trước khi khai báo hàm:

export function getFullName (fullName){...}

Lưu ý: Sử dụng phương pháp thứ nhất bạn có thể xuất nhiều hàm. Bạn có thể làm điều đó bằng cách thêm tên của hàm muốn xuất vào trong ngoặc nhọn. Các hàm sẽ được phân cách với nhau bằng dấu phẩy.

Ví dụ: Giả sử bạn có ba hàm trong file getPersonalDetails.js là getFullName(), getEmail(), getDob(). Bạn có thể xuất tất cả các hàm đó bằng dòng code:

export {getFullName, getEmail, getDob};

Cách nhập hàm trong JavaScript

Để sử dụng các mô-đun thì trước tiên bạn phải nhập chúng vào code của mình. Bất kỳ hàm nào cũng có thể được nhập bằng cách tham chiếu đầy đủ đường dẫn.

Nhập hàm là công việc khá đơn giản. JavaScript có sẵn một tính năng để bạn nhập các hàm của bạn từ các file khác. Nếu bạn muốn truy cập các hàm đó từ các mô-đun khác, bạn nên đưa vào khai báo hàm cho từng tiện ích của mình.

Lưu ý: Một hàm cần nhập phải đã được xuất trong file gốc của nó.

Bạn có thể nhập các hàm từ một file khác bằng cách dùng từ khóa import. Nhập cho phép bạn chọn tải phần nào của file hoặc mô-đun.

Đây là cách nhập hàm getFullName của chúng ta từ getPersonalDetails.js:

import {getFullName} from './getPersonalDetails.js'

Điều này sẽ giúp hàm này có sẵn để sử dụng trong file hiện tại của chúng ta.

Nếu muốn nhập nhiều hàm, các hàm cần nhập phải được thêm vào trong ngoặc kép, các hàm được phân tách với nhau bởi dấu phảy.

import {getFullName, getEmail, getDob} from './getPersonalDetails.js'

Có một cách khác để sử dụng chức năng nhập hàm. Phương pháp này cho phép bạn nhập tất cả các hàm đã xuất trong một file cụ thể. Bạn có thể thực hiện điều này bằng cách sử dụng cú pháp import*.

Ví dụ: Bạn có thể nhập tất cả các hàm đã xuất trong getPersonalDetails.js bằng cách thêm vào dòng code sau:

import * as personalDetailsModule from './getPersonalDetails.js'

Dòng code trên sẽ tạo ra một đối tượng có tên là personalDetailsModule.

Lưu ý: Đó chỉ là một tên biến, bạn có thể đặt tên cho nó như thế nào cũng được.

Đối tượng này có chứa tất cả các hàm đã xuất trong getPersonalDetails.js. Các hàm được lưu trong đối tượng này và có thể truy cập được theo cách mà bạn truy cập các đối tượng khác.

Ví dụ: Chúng ta có thể truy cập hàm getFullName bằng cách thêm dòng code sau:

personalDetailsModule.getFullName();

Mặc định xuất là gì?

Mặc định xuất là một chức năng xuất đặc biệt. Nó được sử dụng nếu chỉ một biến đang được xuất từ một file. Nó cũng được sử dụng để tạo giá trị dự phòng cho một file hoặc mô-đun.

Dưới đây là một ví dụ mà chúng ta sẽ sử dụng hàm getFullName làm mặc định:

export default function getFullName (fullName){...}

Lưu ý: Bạn không thể có nhiều hơn một giá trị là mặc định trong mỗi mô-đun hoặc file.

Một hàm được sử dụng làm mặc định sẽ được nhập theo cách khác. Đây là cách nhập hàm getFullName của chúng ta khi được sử dụng làm mặc định:

import fullName from './getPersonalDetails.js'

Dưới đây là những khác biệt:

• Không cần ngoặc nhọn xung quanh giá trị đã nhập là fullName.
• fullName ở đây chỉ là một tên biến. Nó lưu trữ giá trị của bất kỳ hàm mặc định nào.

Hy vọng bài viết này sẽ giúp các bạn nâng cao được kỹ năng JavaScript.