Các hàm [Function] là một trong những nền tảng nền tảng trong Javascript. Vậy bạn đã nắm hết những kiến thức về Function trong Javascript chưa?
Hàm[Hàm] là gì?
Hàm [hàm, chức năng], gọi chung là chương trình con [chương trình con] có thể được gọi ở bên ngoài hoặc bên trong chính nó
Nó bao gồm tập hợp các câu lệnh gọi là hàm body. Các giá trị có thể truyền đến một hàm và một hàm có thể trả về giá trị.
Bây giờ, với các ứng dụng hiện đại, các chức năng có thể là một chương trình hoàn chỉnh, chứ không phải là khái niệm tổng quát như ''chương trình con" nữa. Có sự khác nhau giữa hàm và thủ tục [thủ tục] rằng lý tưởng của hàm nên trả về một giá trị còn lại của thủ tục thì không [ bây giờ điều này có thể thay đổi theo ngôn ngữ lập trình]
1. Khai báo hàm
Để khai báo hàm, chúng ta sử dụng từ khóa
const hello = function sayHello[] {
console.log["Hello World"];
}
5 theo sau nó là- tên chức năng
- Danh sách các tham số truyền vào hàm, được đặt trong đơn đặt hàng và cách nhau bởi dấu phẩy
- Các câu lệnh của JavaScript để tạo ra một hàm, được đặt trong dấu ngoặc kép
6const hello = function sayHello[] { console.log["Hello World"]; }
Ví dụ, để định nghĩa một hàm bằng chữ "Hello World" trong bảng điều khiển
function sayHello [] {
console.log["Hello World"];
}
2. Biểu thức hàm [Hàm trong biến]
Trong khi khai báo hàm ở trên là một câu lệnh về mặt cú pháp, các hàm cũng có thể tạo ra bằng một biểu thức hàm [biểu thức hàm]. Một hàm như vậy có thể nặc danh; . Ví dụ, hàm sayHello ở trên có thể được khai báo như sau
const sayHello = function[] {
console.log["Hello World"];
}
Tuy nhiên, một cái tên có thể được cung cấp trong một biểu thức hàm. Lệnh cung cấp tên cho phép hàm có thể chạy chính nó hoặc có thể sử dụng hệ thống gỡ lỗi để nhận dạng hàm trong dấu vết ngăn xếp
const hello = function sayHello[] {
console.log["Hello World"];
}
3. Các ràng buộc về tên hàm
Javascript cũng giống như các ngôn ngữ khác, nó cũng có các ràng buộc về tên hàm sau đây
- Tên hàm phải được bắt đầu bằng chữ cái [a-z,A-Z] hoặc ký tự
7const hello = function sayHello[] { console.log["Hello World"]; }
- Tên hàm không được bắt đầu bằng số, các ký tự khác ký tự _
7const hello = function sayHello[] { console.log["Hello World"]; }
Các loại hàm
1. Hàm cơ bản
Đây là dạng cơ bản nhất trong Javascript, cú pháp có dạng như sau
function doSomeThing[] {
// Do Something
}
in which. doSomeThing là tên của hàm bạn muốn đặt và
const hello = function sayHello[] {
console.log["Hello World"];
}
9 là từ khóa bắt buộcVí dụ. Tạo hàm trong codelearning tên trang web trong bảng điều khiển
function getWebsite[] {
console.log["//codelearn.io/"];
}
2. Hàm có tham số truyền vào
Đây là một dạng hàm rất hay được sử dụng, cú pháp có dạng như sau
const hello = function sayHello[] {
console.log["Hello World"];
}
0in which
- funName là tên của hàm bạn muốn đặt
- thông số_1,. ,pram_n là các tham số mà bạn muốn truyền vào hàm [không giới hạn số lượng]
VD. Create function total 2 number
const hello = function sayHello[] {
console.log["Hello World"];
}
13. Default Ham has default
Đây thực ra là dạng hàm có tham số truyền và đồng thời luôn xem xét giá trị mặc định cho các tham số đó. cú pháp
const hello = function sayHello[] {
console.log["Hello World"];
}
2in which
- funName là tên của hàm bạn muốn đặt
- thông số_1,. ,pram_n là các tham số mà bạn muốn truyền vào hàm [không giới hạn số lượng]
- giá trị_1,. ,value_n là các giá trị tương ứng với các xe đẩy
VD. with function getSum ở trên mình sẽ xét tham số mặc định cho nó
const hello = function sayHello[] {
console.log["Hello World"];
}
34. Hàm có và không trả về giá trị
Trong javascript có hai loại hàm, đó là hàm có giá trị trả về và hàm không có giá trị trả về
- Đối với hàm có giá trị trả về thì phải sử dụng từ khóa
0function doSomeThing[] { // Do Something }
- And reback đối với hàm không có giá trị trả về thì không có từ khóa
0function doSomeThing[] { // Do Something }
VD. khai báo hàm getSum ở trên là hàm có giá trị trả về
const hello = function sayHello[] {
console.log["Hello World"];
}
6call a function
Định nghĩa một hàm sẽ không thực thi nó. Định nghĩa một hàm đơn giản chỉ là đặt tên cho hàm và chỉ định những công việc cụ thể sẽ thực hiện khi hàm đó được gọi
Ví dụ, nếu bạn định nghĩa hàm sayXin chào, bạn có thể gọi nó như sau
const sayHello = function[] {
console.log["Hello World"];
}
0The command on call function sayXin chào, kết quả trả về chữ "Xin chào thế giới" tại bảng điều khiển
Hàm phải đặt trong phạm vi [trong phạm vi] khi nó được gọi, nhưng hàm khai báo có thể được nâng lên [câu lệnh khai báo hàm xuất hiện bên dưới dòng gọi hàm trong mã đoạn], như ví dụ sau
const sayHello = function[] {
console.log["Hello World"];
}
1Phạm vi [phạm vi] của một hàm là khoảng không gian bên trong hàm mà nó được khai báo [hoặc là cả chương trình, nếu nó được khai báo ở mức cao nhất, tức là nó không nằm trong bất kỳ hàm nào khác]
Lưu ý. Điều này chỉ đúng khi định nghĩa một hàm bằng cách sử dụng các cú pháp ở trên [ví dụ
function doSomeThing[] {
// Do Something
}
2]. Điều này có nghĩa là hàm cẩu chỉ hoạt động với cách khai báo hàm thông thường [khai báo hàm] - hàm cẩu không hoạt động đối với hàm được khai báo bằng biểu thức hàm [biểu thức hàm]. Ví dụ, đoạn mã dưới đây sẽ không hoạt độngconst sayHello = function[] {
console.log["Hello World"];
}
2Một hàm có thể gọi chính nó
Ví dụ, đây là một hàm tính giai cấp thừa đệ quy
const sayHello = function[] {
console.log["Hello World"];
}
3Bạn có thể tính phần thưởng thừa của
function doSomeThing[] {
// Do Something
}
3 đến function doSomeThing[] {
// Do Something
}
4 như sauconst sayHello = function[] {
console.log["Hello World"];
}
4Có những cách khác để gọi hàm. Có nhiều trường hợp mà tại đó một hàm cần phải được gọi theo một cách tự động, hoặc làm thay đổi lượng đối số truyền vào một hàm, hoặc trong trường hợp mà công việc gọi hàm cần được gắn với một đối tượng nhất định đã được giải quyết
Điều đó lại hóa ra là các hàm tự bản thân chúng là các đối tượng, và kết quả là, những đối tượng này có các phương thức. Một số trong chúng, phương thức
function doSomeThing[] {
// Do Something
}
5, có thể được sử dụng để đạt được mục tiêu nàyPhạm vi của hàm [Function Scope]
Các biến được định nghĩa bên trong một hàm không thể truy cập được từ bất kỳ nơi nào khác bên ngoài hàm, bởi vì biến đó chỉ được định nghĩa trong phạm vi của hàm. Tuy nhiên, một hàm có thể truy cập đến mọi biến và mọi hàm khác trong cùng phạm vi mà nó được định nghĩa
Nói cách khác, một hàm được định nghĩa trong phạm vi toàn cầu có thể truy cập vào tất cả các biến đã được định nghĩa trong phạm vi toàn cầu. Một hàm được định nghĩa bên trong một hàm khác có thể truy cập đến tất cả các biến đã được định nghĩa bên trong hàm cha của nó, và bất kỳ biến nào khác mà hàm cha của nó có quyền truy cập đến. Các bạn có thể tham khảo ví dụ dưới đây
const sayHello = function[] {
console.log["Hello World"];
}
5Tham số của hàm
Kể từ ES6, xuất hiện 2 tham số dạng mới. thông số mặc định và thông số còn lại
1. thông số mặc định
Trong JavaScript, tham số của hàm được mặc định là
function doSomeThing[] {
// Do Something
}
6. Tuy nhiên, trong một số trường hợp, nó có thể hữu ích để thiết lập một giá trị mặc định khác. Điều này chính xác là điều mà các tham số mặc định sẽ làmKhi không có tham số mặc định [trước ES6]
Trong quá khứ, cách thông thường để thiết lập các giá trị mặc định là kiểm tra giá trị của các tham số bên trong phần thân của chức năng và gán giá trị cho nó nếu nó là
function doSomeThing[] {
// Do Something
}
6Trong ví dụ sau, nếu không có bất kỳ giá trị nào được truyền cho
function doSomeThing[] {
// Do Something
}
8, giá trị của nó sẽ là function doSomeThing[] {
// Do Something
}
6 khi thực hiện tính toán function getWebsite[] {
console.log["//codelearn.io/"];
}
0, và công việc gọi hàm function getWebsite[] {
console.log["//codelearn.io/"];
}
1 sẽ trả về function getWebsite[] {
console.log["//codelearn.io/"];
}
2. Tuy nhiên, điều này bị chặn bởi dòng thứ 2 trong ví dụ nàyconst sayHello = function[] {
console.log["Hello World"];
}
6Khi có tham số mặc định [sau ES6]
Với các tham số mặc định, việc kiểm tra thủ thuật bên trong phần thân của chức năng không còn cần thiết. Bạn có thể đơn giản chỉ là đặt
function doSomeThing[] {
// Do Something
}
3 vào giá trị mặc định cho function doSomeThing[] {
// Do Something
}
8 ngay tại chức năng của người đứng đầuconst sayHello = function[] {
console.log["Hello World"];
}
72. Thông số nghỉ ngơi
Cú pháp rest parameter cho phép chúng ta sử dụng 1 mảng để đại diện cho số lượng đối số vô hạn
Trong ví dụ sau, hàm
function getWebsite[] {
console.log["//codelearn.io/"];
}
1 sử dụng các tham số còn lại để thu thập các đối số kể từ đối số hứ hai trở về hết. Hàm này sau đó sẽ nhân những đối số này với đối số đầu tiênconst sayHello = function[] {
console.log["Hello World"];
}
8Chức năng mũi tên
Trong ES6, arrow function là một cú pháp mới được sử dụng để viết các hàm trong JavaScript. Nó giúp tiết kiệm thời gian phát triển và đơn giản hóa phạm vi chức năng [phạm vi chức năng]
Hàm mũi tên - còn được gọi là "mũi tên béo", là cú pháp được mượn từ CoffeeScript [một ngôn ngữ chuyển tiếp], cú pháp này là cách rút gọn hơn để sử dụng hàm viết. Ở đây sử dụng ký tự
function getWebsite[] {
console.log["//codelearn.io/"];
}
6, trông giống như một mũi tên "béo". Hàm mũi tên là một hàm vô danh và nó thay đổi cách function getWebsite[] {
console.log["//codelearn.io/"];
}
7 liên kết đến hàm. Chức năng mũi tên làm mã của ta tìm rút gọn hơn, giúp đơn giản hóa phạm vi chức năng cũng như từ khóa function getWebsite[] {
console.log["//codelearn.io/"];
}
7Dưới đây là 1 vài ví dụ về việc sử dụng chức năng Arrow trong Javascript
1. Trường hợp có nhiều tham số
const sayHello = function[] {
console.log["Hello World"];
}
9Ví dụ trên cho cùng một kết quả, tuy nhiên cú pháp với chức năng mũi tên thu ít dòng mã hơn. Trong trường hợp chỉ có một biểu thức thì không cần thiết phải đi tới dấu ngoặc kép. Ví dụ trên có thể viết lại như sau
const hello = function sayHello[] {
console.log["Hello World"];
}
02. Trường hợp có 1 tham số
Order Order is not started when only have 1 tham số
const hello = function sayHello[] {
console.log["Hello World"];
}
13. Trường hợp không có tham số
Ordering command is started when no tham số
const hello = function sayHello[] {
console.log["Hello World"];
}
2đóng cửa
Closures là một trong những chức năng có quyền lực nhất của JavaScript. JavaScript cho phép lồng các hàm vào nhau và cấp quyền cho hàm con, để hàm con có toàn quyền truy cập vào tất cả các biến và hàm được định nghĩa bên trong hàm cha [và tất cả các biến và hàm mà hàm cha được cấp
Tuy nhiên, hàm cha không có quyền truy cập vào các biến và hàm được định nghĩa bên trong hàm con. Điều này tạo nên một dạng bảo mật khép kín cho các biến của hàm con
Bên cạnh đó, vì hàm con có quyền truy cập đến phạm vi của hàm cha, các biến và hàm được định nghĩa bên trong hàm cha sẽ vẫn tồn tại dù việc thực thi hàm cha đã kết thúc, nếu hàm con xoay sở tồn tại . Một bao đóng được tạo ra khi một hàm con bằng cách nào đó trở nên khả thi với bất kỳ phạm vi nào bên ngoài hàm cha
Vui lòng xem các ví dụ sau đây để hiểu rõ hơn về Closures
VD1
const hello = function sayHello[] {
console.log["Hello World"];
}
3Trong ví dụ trên, hàm
function getWebsite[] {
console.log["//codelearn.io/"];
}
9 tạo ra một biến cục bộ const hello = function sayHello[] {
console.log["Hello World"];
}
00 và const hello = function sayHello[] {
console.log["Hello World"];
}
01 [một hàm in ra num trong bảng điều khiển]. Hàm const hello = function sayHello[] {
console.log["Hello World"];
}
01 không có bất kỳ biến cục bộ nào trong đó. Tuy nhiên, nó có quyền truy cập vào các biến bên ngoài chức năng, bởi vì ______99 là một sự đóng cửa. Do đó, nó có thể sử dụng biến const hello = function sayHello[] {
console.log["Hello World"];
}
00 được khai báo trong function getWebsite[] {
console.log["//codelearn.io/"];
}
9 để đăng nhập const hello = function sayHello[] {
console.log["Hello World"];
}
00 trong bảng điều khiển sau khi function getWebsite[] {
console.log["//codelearn.io/"];
}
9 được trả lạiVD2
const hello = function sayHello[] {
console.log["Hello World"];
}
4Chú ý, biến
const hello = function sayHello[] {
console.log["Hello World"];
}
08 được khai báo sau chức năng ẩn danh nhưng vẫn có thể truy cập biến const hello = function sayHello[] {
console.log["Hello World"];
}
08. Điều này là do biến const hello = function sayHello[] {
console.log["Hello World"];
}
08 đã được khai báo trong phạm vi chức năng tại thời điểm được tạo ra, làm cho nó có sẵn khi chức năng ẩn danh được thực thiChức năng gọi lại
Chức năng gọi lại có thể được hiểu nôm na như sau. gọi lại tức thời là ta truyền một đoạn mã [Hàm A] này vào một đoạn mã khác [Hàm B]. Đến một thời điểm nào đó, hàm A sẽ bị hàm B gọi lại [callback]. Javascript là một ngôn ngữ lập trình hướng sự kiện và không đồng bộ nên hàm gọi lại đóng vai trò rất quan trọng, bạn sẽ truyền một hàm gọi lại vào các sự kiện và xử lý bất đồng bộ đó
Về Chức năng Callback thì mình cũng đã có bài viết 1 bài riêng để chúng ta cùng tìm hiểu về nó. Các bạn có thể đọc thêm tại đây
pause
Như vậy trong bài viết này, chúng ta đã cùng nhau tìm hiểu những vấn đề cơ bản về Hàm trong Javascript. Bạn thấy thế nào về JS, hãy đưa ra những ý kiến trong quá trình sử dụng js nhé. Nếu các bạn thấy bài viết hữu ích hãy đánh giá 5* và share cho mọi người cùng tham khảo