Hàm là một trong những phần chính của chương trình máy tính.
Chúng được sử dụng rộng rãi và là một trong những khối xây dựng cơ bản của JavaScript.
Trong bài viết này, chúng ta sẽ xem xét định nghĩa hàm và lý do tại sao chúng lại quan trọng đến vậy. Tôi cũng sẽ chỉ cho bạn cách bắt đầu viết các hàm trong JavaScript.
Hãy đi sâu vào!
Hàm trong JavaScript là gì?
Hàm là một khối mã gói gọn một hành vi độc lập, riêng biệt để máy tính thực hiện.
Các chức năng là một tập hợp các hướng dẫn có tổ chức tương ứng với một nhiệm vụ nhất định hoặc chức năng cụ thể mà người dùng muốn triển khai trong chương trình của họ để đạt được một kết quả mong muốn.
Mã bên trong một chức năng chỉ chạy khi cần thiết, nghĩa là chỉ khi nó được gọi điện.
Các hàm là một phần quan trọng và hữu ích của lập trình vì chúng tạo mã có thể tái sử dụng.
Thay vì sao chép, dán và lặp lại cùng một mã trong các phần khác nhau của chương trình, bạn chỉ có thể viết mã đó ở một nơi bằng cách sử dụng một hàm. Sau đó, bạn có thể sử dụng nó nhiều lần bất cứ khi nào bạn cần.
Điều này cũng hữu ích khi bạn muốn thực hiện các thay đổi đối với chương trình của mình hoặc gỡ lỗi và cố gắng sửa lỗi.
Thay vì tìm kiếm các phần khác nhau mà mã của bạn có thể ở đó, bạn chỉ cần nhìn vào một vị trí cụ thể giúp mã của bạn dễ đọc hơn.
Cách khai báo hàm trong JavaScript
Cú pháp chung để tạo một hàm trong JavaScript trông như sau:
function name(parameter1,parameter2,...) {
// the code statements to be executed
}
Hãy chia nhỏ nó ra:
- Bạn khai báo một chức năng với
functiontừ khóa. - Tiếp theo, bạn đặt tên cho hàm mà bạn chọn. Tên hàm trong JavaScript phân biệt chữ hoa chữ thường và một quy ước cũng như cách thực hành tốt nhất là sử dụng
camelCase. - Tên hàm được theo sau bởi một tập hợp các dấu ngoặc đơn mở và đóng.
Các chức năng có thể lấy dữ liệu bằng cách lấy đầu vào. Các đầu vào này được đặt trong dấu ngoặc đơn và được gọi là thông số.
Các tham số đóng vai trò là biến giữ chỗ cục bộ cho các giá trị sẽ được chuyển vào hàm dưới dạng đầu vào khi hàm được gọi. Chúng hoàn toàn là tùy chọn và nếu có nhiều hơn một, bạn phân tách chúng bằng dấu phẩy.
- Cuối cùng là các dấu ngoặc nhọn và bên trong chúng là phần thân chính của hàm với các câu lệnh mã sẽ được thực thi khi hàm được gọi. Đây là nơi đầu vào của chức năng được xử lý.
Cách khai báo và gọi hàm đơn giản trong JavaScript
function greeting() {
console.log('Hello World!');
}
Ở trên, chúng tôi đã tạo một chức năng gọi là greeting.
Chức năng này là một chức năng rất cơ bản và bạn không thể làm gì nhiều với nó. Nó không nhận bất kỳ đầu vào nào và điều duy nhất xảy ra là văn bản Hello World! được in ra bàn điều khiển.
Việc xác định một hàm trong chính nó không chạy mã bên trong phần thân của hàm. Để mã được thực thi và để xem thông báo đó trong bảng điều khiển, hàm phải được gọi. Đây còn được gọi là một lời gọi hàm.
Để gọi một hàm không chấp nhận đầu vào, bạn chỉ cần viết tên của hàm theo sau dấu ngoặc đơn và dấu chấm phẩy ở cuối.
greeting();
//output
//Hello World!
Bây giờ bạn có thể sử dụng lại chức năng này nhiều lần bằng cách gọi chính chức năng đó nhiều lần. Điều này giúp bạn tránh lặp lại mã:
greeting();
greeting();
greeting();
//output
// Hello World!
// Hello World!
// Hello World!
Cách khai báo và gọi hàm có tham số trong JavaScript
Chúng ta có thể sửa đổi ví dụ trước để lấy đầu vào. Chúng tôi sẽ làm điều này với các tham số, như đã đề cập trước đó.
Tham số là các giá trị mà bạn chuyển vào hàm khi hàm đang được khai báo.
function greeting(name) {
console.log('Hello ' + name + ' !' );
}
Chức năng được đặt tên greeting bây giờ chấp nhận một tham số,name. Chuỗi đó đang được nối (+) với chuỗi Hello và một dấu chấm than ở cuối.
Khi gọi các hàm chấp nhận tham số, bạn cần truyền đối số vào.
Đối số là các giá trị mà bạn cung cấp khi gọi hàm và chúng tương ứng với các tham số đã được truyền trong dòng phân bổ của hàm.
Ví dụ:
greeting('Jenny');
//Output
// Hello Jenny !
Đối số là giá trị Jenny và bạn có thể nghĩ về nó như name="Jenny". nametham số, là biến giữ chỗ và Jenny là giá trị bạn truyền vào khi gọi hàm.
Các chức năng có thể chấp nhận nhiều hơn một tham số và cũng có thể trả lại dữ liệu cho người dùng chương trình:
function addNums(num1,num2) {
return num1 + num2;
}
Đoạn mã trên đã tạo một hàm có tên addNums có hai tham số – num1 và num2cách nhau bởi dấu phẩy.
Giống như cách các chức năng có đầu vào, chúng cũng có đầu ra đầu ra
Chức năng lợi nhuận như đầu ra của nó tổng của num1 và num2. Điều này có nghĩa là nó xử lý hai tham số, thực hiện phép tính được yêu cầu và trả về giá trị cuối cùng dưới dạng kết quả cho người dùng.
Khi hàm được gọi, hai đối số phải được truyền vào vì nó chấp nhận hai tham số:
addNums(10,20);
//Output
// 30
// think of it as num1 = 10 and num2 = 20
Mỗi khi hàm được gọi, bạn có thể truyền vào các đối số khác nhau:
addNums(2,2);
// 4
addNums(3,15);
//18
Phạm vi biến trong hàm JavaScript
Phạm vi biến đề cập đến cách dễ thấy các biến là các phần khác nhau của chương trình.
Một biến được xác định ở ngoài và trước một khối chức năng có phạm vi toàn cầu và có thể được truy cập từ bên trong một chức năng:
const num = 7;
function myFunc() {
console.log(num);
}
//Access the variable with a global scope from anywhere in the program:
console.log(num);
//Output
//7
//Call the function with the variable with global scope
myFunc();
//Output
// 7
Nhưng nếu biến đó được xác định phía trong chức năng, nó sẽ có phạm vi cục bộ và nó sẽ bị giới hạn và chỉ hiển thị trong chức năng nơi nó được xác định.
Bạn không thể truy cập nó từ bên ngoài chức năng:
function myFunc() {
const num = 7;
console.log(num);
}
// Try to access the variable with local scope from outside the function scope:
console.log(num);
//Otput:
//Uncaught ReferenceError: num is not defined
//Call the function with the variable defined inside the function:
myFunc();
//Ouput
//7
Biểu thức hàm
Bạn cũng có thể tạo hàm bằng biểu thức.
Các hàm này được tạo bên trong một biểu thức thay vì được tạo bằng một khai báo hàm như bạn đã thấy cho đến nay.
const name = function(firstName) {
return 'Hello ' + firstName ;
}
Ở đây, chúng tôi sử dụng biến name để lưu trữ chức năng.
Để gọi hàm, bạn sử dụng tên biến như sau:
console.log(name('Jenny'));
//Output
//"Hello Jenny"
Loại chức năng này còn được gọi là chức năng Ẩn danh vì chúng không yêu cầu tên.
Sự khác biệt giữa chức năng Được đặt tên và chức năng Ẩn danh được liệt kê bên dưới:
//named
function name(firstName) {
console.log('Hello ' + firstName);
}
name('Jenny');
//anonymous
const name = function(firstName) {
return 'Hello ' + firstName ;
}
console.log(name('Jenny'));
Các biến trong các hàm ẩn danh cũng có thể được sử dụng làm giá trị cho các biến khác:
const name = function(firstName) {
return 'Hello ' + firstName ;
}
const myName = name('Timmy');
console.log(myName);
//Ouput
//"Hello Timmy"
Phần kết luận
Và bạn có nó rồi đấy! Điều này đánh dấu sự kết thúc phần giới thiệu của chúng tôi về các hàm JavaScript và một số cách bạn có thể tạo chúng.
Nếu bạn muốn tìm hiểu thêm, các hàm mũi tên là một cách mới và hiệu quả hơn để tạo các hàm trong JavaScript và chúng đã được giới thiệu với ES6.
Nếu bạn muốn bắt đầu tìm hiểu các nguyên tắc cơ bản của JavaScript một cách tương tác và hiểu biết toàn diện về ngôn ngữ này trong khi xây dựng các dự án trong quá trình thực hiện, freeCodeCamp có Chứng chỉ cấu trúc dữ liệu và thuật toán JavaScript miễn phí.
Cảm ơn đã đọc và học tập vui vẻ!
