You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/02-first-steps/15-function-basics/article.md
+39-39Lines changed: 39 additions & 39 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,9 +2,9 @@
2
2
3
3
Thông thường chúng ta cần thực hiện một hành động tương tự ở nhiều nơi trong tập lệnh.
4
4
5
-
Ví dụ: chúng tôi cần hiển thị một thông báo đẹp mắt khi khách hàng truy cập đăng nhập, đăng xuất và có thể ở một nơi khác
5
+
Ví dụ: chúng ta cần hiển thị một thông báo đẹp mắt khi khách hàng truy cập đăng nhập, đăng xuất và có thể ở một nơi khác
6
6
7
-
Các hàm là "khối xây dựng" chính của chương trình. Chúng cho phép đoạn mã được gọi nhiều lần mà không lặp lại.
7
+
Các hàm là "khối xây dựng" chính của chương trình. Chúng cho phép chúng ta viết một đoạn mã chỉ một lần nhưng lại có thể thực hiện nó nhiều lần, thay vì phải viết lặp lại đoạn mã đó mỗi khi muốn thực hiện nó.
8
8
9
9
Chúng ta đã thấy các ví dụ về hàm dựng sẵn, như `alert(message)`, `prompt(message, default)` và `confirm(question)`. Nhưng chúng ta cũng có thể tạo những hàm riêng theo các mục đích khác nhau.
10
10
@@ -20,15 +20,15 @@ function showMessage() {
20
20
}
21
21
```
22
22
23
-
Từ khoá `function` được bắt đầu trước, sau đó đến *tên của hàm*, và có một danh sách các *tham số* giữa các dấu ngoặc đơn (được phân tách bằng dấu phẩy, trống trong ví dụ trên) và cuối cùng là mã của hàm, còn được đặt tên là "nội dung của hàm", giữa các dấu ngoặc nhọn.
23
+
Từ khoá `function` được bắt đầu trước, sau đó đến *tên của hàm*, và có một danh sách các *tham số* giữa các dấu ngoặc đơn (được phân tách bằng dấu phẩy, những cũng có thể để trống như trong ví dụ trên) và cuối cùng là mã của hàm, còn được đặt tên là "thân hàm", giữa các dấu ngoặc nhọn.
24
24
25
25
```js
26
26
functionname(parameters) {
27
27
...body...
28
28
}
29
29
```
30
30
31
-
Chức năng mới của chúng ta có thể được gọi bằng tên của nó:: `showMessage()`.
31
+
Hàm mới của chúng ta có thể được gọi bằng tên của nó:: `showMessage()`.
32
32
33
33
Ví dụ:
34
34
@@ -43,15 +43,15 @@ showMessage();
43
43
*/!*
44
44
```
45
45
46
-
Việc gọi `showMessage()` thực thi đoạn mã trong hàm. Ở đây chúng ta sẽ thấy tin nhắn được hiển thị hai lần.
46
+
Việc gọi `showMessage()` thực thi đoạn mã trong hàm. Ở đây chúng ta sẽ thấy thông điệp được hiển thị hai lần.
47
47
48
48
Ví dụ này thể hiện rõ ràng một trong những mục đích chính của hàm: tránh trùng lặp mã.
49
49
50
50
Nếu chúng ta cần thay đổi thông báo hoặc cách nó được hiển thị, chỉ cần sửa đổi mã ở một nơi: hàm xuất ra nó là đủ.
51
51
52
52
## Các biến cục bộ
53
53
54
-
Một biến được khai báo bên trong một hàm chỉ hiển thị bên trong hàm đó.
54
+
Một biến được khai báo bên trong một hàm chỉ nhìn thấy được từ bên trong hàm đó.
55
55
56
56
Ví dụ:
57
57
@@ -66,7 +66,7 @@ function showMessage() {
66
66
67
67
showMessage(); // Xin chào, tôi là JavaScript!
68
68
69
-
alert( message ); // <-- Lỗi! Đây là biến cục bộ so với hàm
69
+
alert( message ); // <-- Lỗi! Đây là cục bộ đối với hàm
70
70
```
71
71
72
72
## Các biến bên ngoài
@@ -84,7 +84,7 @@ function showMessage() {
84
84
showMessage(); // Xin chào, John
85
85
```
86
86
87
-
Hàm có toàn quyền truy cập vào biến ngoài. Nó cũng có thể thay đổi được.
87
+
Hàm có toàn quyền truy cập vào biến ngoài. Nó cũng có thể thay đổi được biến ngoài.
88
88
89
89
Ví dụ:
90
90
@@ -105,9 +105,9 @@ showMessage();
105
105
alert( userName ); // *!*Bob*/!*, the value was modified by the function
106
106
```
107
107
108
-
Biến ngoài chỉ được sử dụng nếu không có biến cục bộ.
108
+
Biến ngoài chỉ được sử dụng nếu không có biến cục bộ trùng tên với nó.
109
109
110
-
Nếu một biến cùng tên được khai báo bên trong hàm thì nó sẽ *che khuất* biến bên ngoài. Ví dụ: trong đoạn mã bên dưới, hàm sử dụng `userName` cục bộ. Cái bên ngoài bị bỏ qua:
110
+
Nếu một biến cùng tên được khai báo bên trong hàm thì nó sẽ *che khuất* biến bên ngoài. Ví dụ: trong đoạn mã bên dưới, hàm sử dụng `userName` cục bộ. Biến bên ngoài bị bỏ qua:
111
111
112
112
```js run
113
113
let userName ='John';
@@ -128,11 +128,11 @@ alert( userName ); // *!*John*/!*, unchanged, the function did not access the ou
128
128
```
129
129
130
130
```smart header="Biến toàn cục"
131
-
Các biến được khai báo bên ngoài bất kỳ hàm nào, chẳng hạn như `userName` bên ngoài trong mã ở trên, được gọi là *toàn cục*.
131
+
Các biến được khai báo bên ngoài bất kỳ hàm nào, chẳng hạn như biến ngoài `userName` trong mã ở trên, được gọi là *toàn cục*.
132
132
133
-
Các biến toàn cục được hiển thị từ bất kỳ hàm nào (trừ khi bị che bởi cục bộ).
133
+
Các biến toàn cục có thể nhìn thấy được từ bất kỳ hàm nào (trừ phi bị che bởi biến cục bộ).
134
134
135
-
Đó là một cách thực hành tốt để giảm thiểu việc sử dụng các biến toàn cục. Mã nguồn hiện đại có ít hoặc không có toàn cục. Hầu hết các biến đều nằm trong hàm của chúng. Tuy nhiên, đôi khi chúng có thể hữu ích để lưu trữ dữ liệu cấp dự án.
135
+
Đó là một cách thực hành tốt là giảm thiểu việc sử dụng các biến toàn cục. Mã nguồn hiện đại có ít hoặc không có toàn cục. Hầu hết các biến đều nằm trong hàm của chúng. Tuy nhiên, đôi khi chúng có thể hữu ích để lưu trữ dữ liệu cấp dự án.
Khi hàm được gọi trong các dòng `(*)` và `(**)`, các giá trị đã cho sẽ được sao chép sang các biến cục bộ `from` và `text`. Sau đó, chức năng sử dụng chúng.
155
+
Khi hàm được gọi trong các dòng `(*)` và `(**)`, các giá trị đã cho sẽ được sao chép sang các biến cục bộ `from` và `text`. Sau đó, hàm sẽ sử dụng chúng.
156
156
157
-
Đây là một ví dụ nữa: chúng ta có một biến `from` và chuyển nó vào hàm. Xin lưu ý: hàm thay đổi `from`, nhưng sự thay đổi không được nhìn thấy bên ngoài, vì hàm luôn nhận được bản sao của giá trị:
157
+
Đây là một ví dụ nữa: chúng ta có một biến `from` và truyền nó cho hàm. Xin lưu ý: hàm thay đổi `from`, nhưng sự thay đổi không được nhìn thấy từ bên ngoài, vì hàm luôn nhận được bản sao của giá trị:
158
158
159
159
160
160
```jsrun
@@ -177,7 +177,7 @@ alert( from ); // Ann
177
177
178
178
## Những giá trị mặc định
179
179
180
-
Nếu một tham số không được cung cấp thì giá trị của nó sẽ trở thành `khôngxác định`.
180
+
Nếu một tham số không được cung cấp thì giá trị của nó sẽ trở thành `undefined`.
181
181
182
182
Ví dụ, hàm `showMessage(from, text)` nói trên có thể được gọi bằng một đối số duy nhất:
183
183
@@ -197,9 +197,9 @@ function showMessage(from, *!*text = "không có văn bản nào được đưa
197
197
showMessage("Ann"); // Ann: không có văn bản nào được đưa ra
198
198
```
199
199
200
-
Bây giờ nếu tham số `text` không được truyền, nó sẽ nhận giá trị `"không có văn bản"`
200
+
Bây giờ nếu tham số `text` không được truyền, nó sẽ nhận giá trị `"không có văn bản nào được đưa ra"`
201
201
202
-
Ở đây `"không có văn bản nào"` là một chuỗi, nhưng nó có thể là một biểu thức phức tạp hơn, chỉ được đánh giá và gán nếu thiếu tham số. Vì vậy, điều này cũng có thể:
202
+
Ở đây `"không có văn bản nào được đưa ra"` là một chuỗi, nhưng nó có thể là một biểu thức phức tạp hơn, chỉ được đánh giá và gán nếu thiếu tham số. Vì vậy, điều này cũng có thể:
@@ -224,7 +224,7 @@ To check for an omitted parameter, we can compare it with `undefined`:
224
224
functionshowMessage(text) {
225
225
*!*
226
226
if (text ===undefined) {
227
-
text ='tin nhắn trống';
227
+
text ='tin nhắn rỗng';
228
228
}
229
229
*/!*
230
230
@@ -259,7 +259,7 @@ showCount(); // unknown
259
259
260
260
## Trả về một giá trị
261
261
262
-
Kết quả là một hàm có thể trả về một giá trị vào mã gọi.
262
+
Một hàm có thể trả về một giá trị làm kết quả cho mã gọi hàm đó.
263
263
264
264
Ví dụ đơn giản nhất là hàm tính tổng hai giá trị:
265
265
@@ -272,7 +272,7 @@ let result = sum(1, 2);
272
272
alert( result ); // 3
273
273
```
274
274
275
-
Lệnh `return` có thể ở bất kỳ vị trí nào của hàm. Khi quá trình thực thi đạt đến mức đó, hàm sẽ dừng và giá trị được trả về mã gọi (được gán cho `kết quả` ở trên).
275
+
Lệnh `return` có thể ở bất kỳ vị trí nào của hàm. Khi quá trình thực thi đạt đến mức đó, hàm sẽ dừng và giá trị được trả về mã gọi (được gán cho `result` ở trên).
276
276
277
277
Có thể có nhiều lần xuất hiện của `return` trong một hàm. Ví dụ:
278
278
@@ -315,18 +315,18 @@ function showMovie(age) {
315
315
}
316
316
```
317
317
318
-
Ở đoạn mã ở trên, nếu `checkAge(age)` trả về `false`, sau đó `showMovie` sẽ không dẫn tới`alert`.
318
+
Ở đoạn mã ở trên, nếu `checkAge(age)` trả về `false`, thì `showMovie` sẽ không thực hiện hàm`alert`.
319
319
320
-
````smart header="Một hàm trả về giá trị với `return` hoặc không có gì với`undefined`"
321
-
Nếu một hàm không trả về một giá trị thì cũng giống như khi nó trả về `undefined`:
320
+
````smart header="Một hàm trả với `return`rỗng hoặc không có `return` thì trả về`undefined`"
321
+
Nếu một hàm không trả về một giá trị thì cũng giống như là nó trả về `undefined`:
322
322
323
323
```js run
324
324
functiondoNothing() { /* empty */ }
325
325
326
326
alert( doNothing() ===undefined ); // true
327
327
```
328
328
329
-
Trường hợp `return` thì cũng giống với `returnundefined`:
329
+
Trường hợp `return`rỗng, không kèm theo giá trị, thì cũng giống với `returnundefined`:
````warn header="Không bao giờ thêm dòng mới giữa `return` và giá trị"
341
-
Đối với một biểu thức dài trong `return`, có thể nên đặt nó trên một dòng riêng biệt, như thế này:
341
+
Đối với một biểu thức dài trong `return`, có thể bạn muốn đặt nó trên một dòng riêng biệt, như thế này:
342
342
343
343
```js
344
344
return
@@ -369,7 +369,7 @@ Và nó sẽ hoạt động đúng như chúng ta mong đợi.
369
369
370
370
Các hàm là các hành động. Vì vậy tên của chúng thường là một động từ. Nó phải ngắn gọn, chính xác nhất có thể và mô tả chức năng của hàm để ai đó đọc mã sẽ biết được chức năng của hàm.
371
371
372
-
Thông lệ phổ biến là bắt đầu một chức năng bằng tiền tố bằng lời nói mô tả hành động một cách mơ hồ. Phải có sự thống nhất trong nhóm về ý nghĩa của các tiền tố.
372
+
Thông lệ phổ biến là bắt đầu một hàm bằng tiền tố động từ mô tả mơ hồ hành động của hàm. Phải có sự thống nhất trong nhóm về ý nghĩa của các tiền tố.
373
373
374
374
Ví dụ: các hàm bắt đầu bằng `"show"` thường hiển thị nội dung nào đó.
375
375
@@ -383,7 +383,7 @@ Chức năng bắt đầu bằng...
383
383
Các ví dụ cho những tên kể trên:
384
384
385
385
```js no-beautify
386
-
showMessage(..) //đưa ra một tin nhắn
386
+
showMessage(..) //một thông báo (hoặc thông điệp)
387
387
getAge(..) // trả về tuổi (lấy nó bằng cách nào đó)
388
388
calcSum(..) // tính tổng và trả về kết quả
389
389
createForm(..) // tạo một biểu mẫu (và thường trả về nó)
@@ -393,7 +393,7 @@ checkPermission(..) // kiểm tra quyền, trả về đúng/sai
393
393
Với các tiền tố đã có sẵn, chỉ cần nhìn lướt qua tên hàm là bạn sẽ hiểu nó thực hiện loại công việc gì và trả về loại giá trị nào..
394
394
395
395
```smart header="Một hàm -- một hành động"
396
-
Một hàm phải thực hiện chính xác những gì được gợi ý theo tên của nó, không hơn thế nữa.
396
+
Một hàm nên thực hiện chính xác những gì được gợi ý theo tên của nó, và không làm gì khác nữa.
397
397
398
398
Hai hành động độc lập thường xứng đáng có hai hàm, ngay cả khi chúng thường được gọi cùng nhau (trong trường hợp đó chúng ta có thể tạo hàm thứ 3 gọi hai hàm đó).
399
399
@@ -403,22 +403,22 @@ Một vài ví dụ về việc vi phạm quy tắc này:
403
403
-`createForm`-- sẽ rất tệ nếu nó sửa đổi tài liệu, thêm biểu mẫu vào đó (chỉ nên tạo và trả về).
404
404
-`checkPermission`-- sẽ rất tệ nếu nó hiển thị thông báo `quyền truy cập được cấp/từ chối` (chỉ nên thực hiện kiểm tra và trả về kết quả).
405
405
406
-
Những ví dụ này giả định ý nghĩa chung của tiền tố. Bạn và nhóm của bạn có thể tự do đồng ý về các ý nghĩa khác, nhưng thông thường chúng không khác nhau nhiều. Trong mọi trường hợp, bạn phải hiểu rõ ý nghĩa của tiền tố, hàm có tiền tố có thể và không thể làm gì. Tất cả các hàm có tiền tố giống nhau phải tuân theo các quy tắc. Và nhóm nên chia sẻ kiến thức.
406
+
Những ví dụ này giả định ý nghĩa chung của tiền tố. Bạn và nhóm của bạn có thể tự do đồng ý về các ý nghĩa khác, nhưng thông thường chúng không khác nhau nhiều. Trong mọi trường hợp, bạn phải hiểu rõ ý nghĩa của tiền tố, hàm có tiền tố có thể và không thể làm gì. Tất cả các hàm có tiền tố giống nhau phải tuân theo các quy tắc. Và nhóm nên có chung nhận thức.
407
407
```
408
408
409
409
```smart header="Những tên hàm siêu ngắn"
410
410
Các hàm được sử dụng *rất thường xuyên* đôi khi có tên cực ngắn.
411
411
412
-
Ví dụ: khung [jQuery](http://jquery.com) xác định một hàm có `$`. Thư viện [Lodash](http://lodash.com/) có chức năng cốt lõi được đặt tên là `_`.
412
+
Ví dụ: khung [jQuery](http://jquery.com) định nghĩa một hàm tên là `$`. Thư viện [Lodash](http://lodash.com/) có hàm cốt lõi tên là `_`.
413
413
414
414
Đây là những trường hợp ngoại lệ. Nói chung tên hàm phải ngắn gọn và mang tính mô tả.
415
415
```
416
416
417
-
## Hàm == Bình luận
417
+
## Hàm == Chú thích
418
418
419
419
Các hàm phải ngắn gọn và thực hiện chính xác một việc. Nếu thứ đó lớn, có lẽ nên chia hàm thành một vài hàm nhỏ hơn. Đôi khi việc tuân theo quy tắc này có thể không dễ dàng nhưng đó chắc chắn là một điều tốt.
420
420
421
-
Một chức năng riêng biệt không chỉ dễ kiểm tra và gỡ lỗi hơn -- sự tồn tại của nó là một nhận xét tuyệt vời!
421
+
Một chức năng riêng biệt không chỉ dễ kiểm tra và gỡ lỗi hơn -- là một chú thích tuyệt vời!
422
422
423
423
Ví dụ: so sánh hai hàm `showPrimes(n)` bên dưới. Mỗi cái xuất ra [số nguyên tố](https://en.wikipedia.org/wiki/Prime_number) tối đa `n`.
424
424
@@ -473,16 +473,16 @@ function name(parameters, delimited, by, comma) {
473
473
474
474
- Các giá trị được truyền vào hàm dưới dạng tham số sẽ được sao chép vào các biến cục bộ của hàm đó.
475
475
- Một hàm có thể truy cập các biến ngoài. Nhưng nó chỉ hoạt động từ trong ra ngoài. Mã bên ngoài hàm không thấy các biến cục bộ của nó.
476
-
- Hàm có thể trả về một giá trị. Nếu không, thì kết quả của nó là `không xác định`.
476
+
- Hàm có thể trả về một giá trị. Nếu không, thì kết quả của nó là `undefined`.
477
477
478
-
Để làm cho mã rõ ràng và dễ hiểu, bạn nên sử dụng chủ yếu các biến và tham số cục bộ trong hàm, không nên sử dụng các biến bên ngoài.
478
+
Để làm cho mã rõ ràng và dễ hiểu, bạn nên sử dụng chủ yếu các biến cục bộ và tham số trong hàm, không nên sử dụng các biến bên ngoài.
479
479
480
-
Việc hiểu một hàm nhận tham số, làm việc với chúng và trả về kết quả luôn dễ dàng hơn so với hàm không nhận tham số nhưng sửa đổi các biến bên ngoài như một tác dụng phụ.
480
+
Việc hiểu một hàm nhận các tham số, sử dụng chúng rồi trả về một kết quả, luôn dễ hiểu hơn một hàm không nhận tham số nào, nhưng lại thay đổi giá trị của các biến ngoài, như một tác dụng phụ.
481
481
482
482
Đặt tên cho hàm:
483
483
484
-
- Tên phải mô tả rõ ràng chức năng của nó. Khi chúng ta thấy một lệnh gọi hàm trong mã, một cái tên hay sẽ ngay lập tức cho chúng ta hiểu nó làm gì và trả về.
485
-
- Hàm là một hành động nên tên hàm thường bằng lời nói.
486
-
- Tồn tại nhiều tiền tố hàm phổ biến như `create…`, `show…`, `get…`, `check…`, v.v. Sử dụng chúng để gợi ý chức năng của một chức năng.
484
+
- Tên phải mô tả rõ ràng chức năng của nó. Khi chúng ta thấy một lệnh gọi hàm trong mã, một cái tên hay sẽ ngay lập tức giúp chúng ta hiểu nó làm gì và trả về gì.
485
+
- Hàm là một hành động nên tên hàm thường là động từ.
486
+
- Tồn tại nhiều tiền tố hàm phổ biến như `create…`, `show…`, `get…`, `check…`, v.v. Sử dụng chúng để gợi ý chức năng của một hàm.
487
487
488
488
Hàm là khối xây dựng chính của tập lệnh. Hiện tại chúng ta đã đề cập đến những điều cơ bản, vì vậy chúng ta thực sự có thể bắt đầu tạo và sử dụng chúng. Nhưng đó mới chỉ là sự khởi đầu. Chúng ta sẽ còn quay lại chúng nhiều lần, đi sâu hơn vào các tính năng nâng cao của chúng.
0 commit comments