Nút chức năng

Question

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?

Nội dung chính Show

Hàm(Hàm) là gì?
1. Khai báo hàm
2. Biểu thức hàm (Hàm trong biến)
3. Các ràng buộc về tên hàm
Các loại hàm
1. Hàm cơ bản
2. Hàm có tham số truyền vào
3. Default Ham has default
4. Hàm có và không trả về giá trị
call a function
Một hàm có thể gọi chính nó
Phạm vi của hàm (Function Scope)
Tham số của hàm
1. thông số mặc định
2. Thông số nghỉ ngơi
Chức năng mũi tên
đóng cửa
Chức năng gọi lại

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
```
const hello = function sayHello() {
     console.log("Hello World");
}
```
6

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ự
```
const hello = function sayHello() {
     console.log("Hello World");
}
```
7
Tên hàm không được bắt đầu bằng số, các ký tự khác ký tự _
```
const hello = function sayHello() {
     console.log("Hello World");
}
```
7

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ộc

Ví dụ. Tạo hàm trong codelearning tên trang web trong bảng điều khiển

function getWebsite() {
     console.log("https://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");
}

0

in 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");
}

1

3. 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");
}

2

in 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");
}

3

4. 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
```
function doSomeThing() {
     // Do Something
}
```
0
And reback đối với hàm không có giá trị trả về thì không có từ khóa
```
function doSomeThing() {
     // Do Something
}
```
0

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");
}

6

call 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");
}

0

The 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");
}

1

Phạ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 động

const sayHello = function() {
     console.log("Hello World");
}

2

Mộ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");
}

3

Bạ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ư sau

const sayHello = function() {
     console.log("Hello World");
}

4

Có 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ày

Phạ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");
}

5

Tham 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àm

Khi 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
}

6

Trong 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("https://codelearn.io/");
}

0, và công việc gọi hàm

function getWebsite() {
     console.log("https://codelearn.io/");
}

1 sẽ trả về

function getWebsite() {
     console.log("https://codelearn.io/");
}

2. Tuy nhiên, điều này bị chặn bởi dòng thứ 2 trong ví dụ này

const sayHello = function() {
     console.log("Hello World");
}

6

Khi 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 đầu

const sayHello = function() {
     console.log("Hello World");
}

7

2. 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("https://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ên

const sayHello = function() {
     console.log("Hello World");
}

8

Chứ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("https://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("https://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("https://codelearn.io/");
}

7

Dướ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");
}

9

Ví 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");
}

0

2. 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");
}

1

3. 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");
}

3

Trong ví dụ trên, hàm

function getWebsite() {
     console.log("https://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("https://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("https://codelearn.io/");
}

9 được trả lại

VD2

const hello = function sayHello() {
     console.log("Hello World");
}

4

Chú ý, 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 thi

Chứ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

programming nodejs