From 700d7de5773eb426102432e647a659b17e9eb32e Mon Sep 17 00:00:00 2001 From: hoangnv170752 Date: Sat, 13 Jul 2024 14:08:40 +0700 Subject: [PATCH 1/5] Functions --- .../1-if-else-required/solution.md | 2 +- .../1-if-else-required/task.md | 14 +- .../solution.md | 10 +- .../2-rewrite-function-question-or/task.md | 2 +- .../15-function-basics/3-min/solution.md | 6 +- .../15-function-basics/3-min/task.md | 6 +- .../15-function-basics/4-pow/solution.md | 2 +- .../15-function-basics/4-pow/task.md | 8 +- .../15-function-basics/article.md | 274 +++++++++--------- 9 files changed, 162 insertions(+), 162 deletions(-) diff --git a/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md b/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md index e41c80418..ad11239ec 100644 --- a/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md +++ b/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md @@ -1 +1 @@ -No difference. \ No newline at end of file +Không có sự thay đổi nào. \ No newline at end of file diff --git a/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md b/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md index 4f69a5c8c..1ec0e0619 100644 --- a/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md +++ b/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md @@ -2,11 +2,11 @@ importance: 4 --- -# Is "else" required? +# Có thật là từ "else" cần thiết? -The following function returns `true` if the parameter `age` is greater than `18`. +Hàm sau đây sẽ trả về `true` nếu tham số `age` là lớn hơn `18`. -Otherwise it asks for a confirmation and returns its result: +Nếu không thì nó sẽ hỏi một câu xác nhận và trả về kết quả của nó: ```js function checkAge(age) { @@ -15,13 +15,13 @@ function checkAge(age) { *!* } else { // ... - return confirm('Did parents allow you?'); + return confirm('Bố mẹ đã cho phép bạn chưa?'); } */!* } ``` -Will the function work differently if `else` is removed? +Hàm sẽ thực hiện khác đi nếu từ `else` bị lược bỏ hay không? ```js function checkAge(age) { @@ -30,9 +30,9 @@ function checkAge(age) { } *!* // ... - return confirm('Did parents allow you?'); + return confirm('Bố mẹ đã cho phép bạn chưa?'); */!* } ``` -Is there any difference in the behavior of these two variants? +Có sự khác biệt nào trong hành vi của hai biến thể này không? diff --git a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md index e48502642..2657867b9 100644 --- a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md +++ b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md @@ -1,17 +1,17 @@ -Using a question mark operator `'?'`: +Sử dụng toán tử dấu chấm hỏi `'?'`: ```js function checkAge(age) { - return (age > 18) ? true : confirm('Did parents allow you?'); + return (age > 18) ? true : confirm('Bố mẹ đã cho phép bạn chưa?'); } ``` -Using OR `||` (the shortest variant): +Sử dụng OR `||` (biến thể ngắn nhất): ```js function checkAge(age) { - return (age > 18) || confirm('Did parents allow you?'); + return (age > 18) || confirm('Bố mẹ đã cho phép bạn chưa?'); } ``` -Note that the parentheses around `age > 18` are not required here. They exist for better readability. +Lưu ý rằng dấu ngoặc đơn quanh `age > 18` thì không được yêu cầu ở đây. Chúng tồn tại để dễ hơn cho việc đọc. diff --git a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md index 46da079c0..ab9361c74 100644 --- a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md +++ b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md @@ -2,7 +2,7 @@ importance: 4 --- -# Rewrite the function using '?' or '||' +# Viết lại hàm sử dụng '?' hoặc '||' The following function returns `true` if the parameter `age` is greater than `18`. diff --git a/1-js/02-first-steps/15-function-basics/3-min/solution.md b/1-js/02-first-steps/15-function-basics/3-min/solution.md index 2236d9203..182ec0ee2 100644 --- a/1-js/02-first-steps/15-function-basics/3-min/solution.md +++ b/1-js/02-first-steps/15-function-basics/3-min/solution.md @@ -1,4 +1,4 @@ -A solution using `if`: +Một phương án sử dụng `if`: ```js function min(a, b) { @@ -10,7 +10,7 @@ function min(a, b) { } ``` -A solution with a question mark operator `'?'`: +Giải pháp với toán tử `'?'`: ```js function min(a, b) { @@ -18,4 +18,4 @@ function min(a, b) { } ``` -P.S. In the case of an equality `a == b` it does not matter what to return. \ No newline at end of file +Tái bút: Trong trường hợp có một phương trình `a == b` thì nó không còn quan trọng việc trả về giá trị gì. \ No newline at end of file diff --git a/1-js/02-first-steps/15-function-basics/3-min/task.md b/1-js/02-first-steps/15-function-basics/3-min/task.md index 50edd0d36..880e62c9d 100644 --- a/1-js/02-first-steps/15-function-basics/3-min/task.md +++ b/1-js/02-first-steps/15-function-basics/3-min/task.md @@ -2,11 +2,11 @@ importance: 1 --- -# Function min(a, b) +# Hàm min(a, b) -Write a function `min(a,b)` which returns the least of two numbers `a` and `b`. +Viết một hàm `min(a,b)` trả về giá trị nhỏ nhất trong hai số `a` và `b`. -For instance: +Ví dụ: ```js min(2, 5) == 2 diff --git a/1-js/02-first-steps/15-function-basics/4-pow/solution.md b/1-js/02-first-steps/15-function-basics/4-pow/solution.md index 19fe9011f..3e429159e 100644 --- a/1-js/02-first-steps/15-function-basics/4-pow/solution.md +++ b/1-js/02-first-steps/15-function-basics/4-pow/solution.md @@ -14,7 +14,7 @@ let x = prompt("x?", ''); let n = prompt("n?", ''); if (n < 1) { - alert(`Power ${n} is not supported, use a positive integer`); + alert(`Số mũ ${n} không được hỗ trợ, hãy dùng một số nguyên dương`); } else { alert( pow(x, n) ); } diff --git a/1-js/02-first-steps/15-function-basics/4-pow/task.md b/1-js/02-first-steps/15-function-basics/4-pow/task.md index f569320c7..def378135 100644 --- a/1-js/02-first-steps/15-function-basics/4-pow/task.md +++ b/1-js/02-first-steps/15-function-basics/4-pow/task.md @@ -2,9 +2,9 @@ importance: 4 --- -# Function pow(x,n) +# Hàm pow(x,n) -Write a function `pow(x,n)` that returns `x` in power `n`. Or, in other words, multiplies `x` by itself `n` times and returns the result. +Viết một hàm `pow(x,n)` trả về biến `x` với số mũ `n`. Hoặc, nói theo cách khác, thì nhân `x` với chính nó `n` lần và trả về kết quả. ```js pow(3, 2) = 3 * 3 = 9 @@ -12,8 +12,8 @@ pow(3, 3) = 3 * 3 * 3 = 27 pow(1, 100) = 1 * 1 * ...* 1 = 1 ``` -Create a web-page that prompts for `x` and `n`, and then shows the result of `pow(x,n)`. +Tạo 1 trang web gợi ý cho `x` và `n`, và sau đó đưa ra kết quả của `pow(x,n)`. [demo] -P.S. In this task the function should support only natural values of `n`: integers up from `1`. +Tái bút: Trong nhiệm vụ này, hàm chỉ hỗ trợ các giá trị tự nhiên của `n`: các số nguyên dương lớn hơn hoặc bằng `1`. diff --git a/1-js/02-first-steps/15-function-basics/article.md b/1-js/02-first-steps/15-function-basics/article.md index b12d0b9e7..e761c993e 100644 --- a/1-js/02-first-steps/15-function-basics/article.md +++ b/1-js/02-first-steps/15-function-basics/article.md @@ -1,26 +1,26 @@ -# Functions +# Các hàm -Quite often we need to perform a similar action in many places of the script. +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. -For example, we need to show a nice-looking message when a visitor logs in, logs out and maybe somewhere else. +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 -Functions are the main "building blocks" of the program. They allow the code to be called many times without repetition. +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. -We've already seen examples of built-in functions, like `alert(message)`, `prompt(message, default)` and `confirm(question)`. But we can create functions of our own as well. +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. -## Function Declaration +## Khai báo hàm -To create a function we can use a *function declaration*. +Để tạo một hàm, chúng ta có thể sử dụng *khai báo hàm*. -It looks like this: +Nó trông như sau: ```js function showMessage() { - alert( 'Hello everyone!' ); + alert( 'Xin chào mọi người!' ); } ``` -The `function` keyword goes first, then goes the *name of the function*, then a list of *parameters* between the parentheses (comma-separated, empty in the example above) and finally the code of the function, also named "the function body", between curly braces. +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. ```js function name(parameters) { @@ -28,13 +28,13 @@ function name(parameters) { } ``` -Our new function can be called by its name: `showMessage()`. +Chức năng mới của chúng ta có thể được gọi bằng tên của nó:: `showMessage()`. -For instance: +Ví dụ: ```js run function showMessage() { - alert( 'Hello everyone!' ); + alert( 'Xin chào mọi người!' ); } *!* @@ -43,71 +43,71 @@ showMessage(); */!* ``` -The call `showMessage()` executes the code of the function. Here we will see the message two times. +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. -This example clearly demonstrates one of the main purposes of functions: to avoid code duplication. +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ã. -If we ever need to change the message or the way it is shown, it's enough to modify the code in one place: the function which outputs it. +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à đủ. -## Local variables +## Các biến cục bộ -A variable declared inside a function is only visible inside that function. +Một biến được khai báo bên trong một hàm chỉ hiển thị bên trong hàm đó. -For example: +Ví dụ: ```js run function showMessage() { *!* - let message = "Hello, I'm JavaScript!"; // local variable + let message = "Xin chào, tôi là JavaScript!"; // biến cục bộ */!* alert( message ); } -showMessage(); // Hello, I'm JavaScript! +showMessage(); // Xin chào, tôi là JavaScript! -alert( message ); // <-- Error! The variable is local to the function +alert( message ); // <-- Lỗi! Đây là biến cục bộ so với hàm ``` -## Outer variables +## Các biến bên ngoài -A function can access an outer variable as well, for example: +Một hàm cũng có thể truy cập một biến ngoài, ví dụ: ```js run no-beautify let *!*userName*/!* = 'John'; function showMessage() { - let message = 'Hello, ' + *!*userName*/!*; + let message = 'Xin chào, ' + *!*userName*/!*; alert(message); } -showMessage(); // Hello, John +showMessage(); // Xin chào, John ``` -The function has full access to the outer variable. It can modify it as well. +Hàm có toàn quyền truy cập vào biến ngoài. Nó cũng có thể thay đổi được. -For instance: +Ví dụ: ```js run let *!*userName*/!* = 'John'; function showMessage() { - *!*userName*/!* = "Bob"; // (1) changed the outer variable + *!*userName*/!* = "Bob"; // (1) đã thay đổi biến ngoài let message = 'Hello, ' + *!*userName*/!*; alert(message); } -alert( userName ); // *!*John*/!* before the function call +alert( userName ); // *!*John*/!* trước khi hàm được gọi showMessage(); alert( userName ); // *!*Bob*/!*, the value was modified by the function ``` -The outer variable is only used if there's no local one. +Biến ngoài chỉ được sử dụng nếu không có biến cục bộ. -If a same-named variable is declared inside the function then it *shadows* the outer one. For instance, in the code below the function uses the local `userName`. The outer one is ignored: +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: ```js run let userName = 'John'; @@ -117,7 +117,7 @@ function showMessage() { let userName = "Bob"; // declare a local variable */!* - let message = 'Hello, ' + userName; // *!*Bob*/!* + let message = 'Xin chào, ' + userName; // *!*Bob*/!* alert(message); } @@ -127,17 +127,17 @@ showMessage(); alert( userName ); // *!*John*/!*, unchanged, the function did not access the outer variable ``` -```smart header="Global variables" -Variables declared outside of any function, such as the outer `userName` in the code above, are called *global*. +```smart header="Biến toàn cục" +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*. -Global variables are visible from any function (unless shadowed by locals). +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ộ). -It's a good practice to minimize the use of global variables. Modern code has few or no globals. Most variables reside in their functions. Sometimes though, they can be useful to store project-level data. +Đó 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. ``` -## Parameters +## Các tham số -We can pass arbitrary data to functions using parameters (also called *function arguments*) . +Chúng ta có thể truyền dữ liệu tùy ý đến các hàm bằng cách sử dụng tham số (còn được gọi là *đối số hàm*) . In the example below, the function has two parameters: `from` and `text`. @@ -147,21 +147,21 @@ function showMessage(*!*from, text*/!*) { // arguments: from, text } *!* -showMessage('Ann', 'Hello!'); // Ann: Hello! (*) -showMessage('Ann', "What's up?"); // Ann: What's up? (**) +showMessage('Ann', 'Xin chào!'); // Ann: Hello! (*) +showMessage('Ann', "Có chuyện gì á?"); // Ann: What's up? (**) */!* ``` -When the function is called in lines `(*)` and `(**)`, the given values are copied to local variables `from` and `text`. Then the function uses them. +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. -Here's one more example: we have a variable `from` and pass it to the function. Please note: the function changes `from`, but the change is not seen outside, because a function always gets a copy of the value: +Đâ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ị: ```js run function showMessage(from, text) { *!* - from = '*' + from + '*'; // make "from" look nicer + from = '*' + from + '*'; // khiến "from" trông thân thiện hơn */!* alert( from + ': ' + text ); @@ -169,52 +169,52 @@ function showMessage(from, text) { let from = "Ann"; -showMessage(from, "Hello"); // *Ann*: Hello +showMessage(from, "Xin chào"); // *Ann*: Xin chào -// the value of "from" is the same, the function modified a local copy +// giá trị của "from" là như nhau, hàm đã sửa đổi một bản sao cục bộ alert( from ); // Ann ``` -## Default values +## Những giá trị mặc định -If a parameter is not provided, then its value becomes `undefined`. +Nếu một tham số không được cung cấp thì giá trị của nó sẽ trở thành `không xác định`. -For instance, the aforementioned function `showMessage(from, text)` can be called with a single argument: +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: ```js showMessage("Ann"); ``` -That's not an error. Such a call would output `"*Ann*: undefined"`. There's no `text`, so it's assumed that `text === undefined`. +Đó không phải là một lỗi. Lệnh gọi như vậy sẽ xuất ra `"*Ann*: undefined"`. Không có `text`, vì vậy giả định rằng `text === undefined`. -If we want to use a "default" `text` in this case, then we can specify it after `=`: +Nếu chúng ta muốn sử dụng một `text` "mặc định" trong trường hợp này thì chúng ta có thể chỉ định nó sau `=`: ```js run -function showMessage(from, *!*text = "no text given"*/!*) { +function showMessage(from, *!*text = "không có văn bản nào được đưa ra"*/!*) { alert( from + ": " + text ); } -showMessage("Ann"); // Ann: no text given +showMessage("Ann"); // Ann: không có văn bản nào được đưa ra ``` -Now if the `text` parameter is not passed, it will get the value `"no text given"` +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"` -Here `"no text given"` is a string, but it can be a more complex expression, which is only evaluated and assigned if the parameter is missing. So, this is also possible: +Ở đâ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ể: ```js run function showMessage(from, text = anotherFunction()) { - // anotherFunction() only executed if no text given - // its result becomes the value of text + // anotherFunction() chỉ được thực hiện nếu không có văn bản nào được đưa ra + // kết quả của nó trở thành giá trị của văn bản } ``` -```smart header="Evaluation of default parameters" -In JavaScript, a default parameter is evaluated every time the function is called without the respective parameter. +```smart header="Đánh giá các tham số mặc định" +Trong JavaScript, một tham số mặc định được đánh giá mỗi khi hàm được gọi mà không có tham số tương ứng. -In the example above, `anotherFunction()` is called every time `showMessage()` is called without the `text` parameter. +Trong ví dụ trên, `anotherFunction()` được gọi mỗi khi `showMessage()` được gọi mà không có tham số `text`. ``` -### Alternative default parameters +### Các tham số mặc định thay thế Sometimes it makes sense to set default values for parameters not in the function declaration, but at a later stage, during its execution. @@ -224,27 +224,27 @@ To check for an omitted parameter, we can compare it with `undefined`: function showMessage(text) { *!* if (text === undefined) { - text = 'empty message'; + text = 'tin nhắn trống'; } */!* alert(text); } -showMessage(); // empty message +showMessage(); // tin nhắn rỗng ``` -...Or we could use the `||` operator: +...Hoặc chúng ta có thể dùng toán tử `||`: ```js // if text parameter is omitted or "" is passed, set it to 'empty' function showMessage(text) { - text = text || 'empty'; + text = text || 'trống'; ... } ``` -Modern JavaScript engines support the [nullish coalescing operator](info:nullish-coalescing-operator) `??`, it's better when falsy values, such as `0`, are considered regular: +Các công cụ JavaScript hiện đại hỗ trợ [toán tử hợp nhất nullish](info:nullish-coalescing-operator) `??`, sẽ tốt hơn khi các giá trị sai, chẳng hạn như `0`, được coi là thông thường: ```js run // if there's no "count" parameter, show "unknown" @@ -257,11 +257,11 @@ showCount(null); // unknown showCount(); // unknown ``` -## Returning a value +## Trả về một giá trị -A function can return a value back into the calling code as the result. +Kết quả là một hàm có thể trả về một giá trị vào mã gọi. -The simplest example would be a function that sums two values: +Ví dụ đơn giản nhất là hàm tính tổng hai giá trị: ```js run no-beautify function sum(a, b) { @@ -272,9 +272,9 @@ let result = sum(1, 2); alert( result ); // 3 ``` -The directive `return` can be in any place of the function. When the execution reaches it, the function stops, and the value is returned to the calling code (assigned to `result` above). +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). -There may be many occurrences of `return` in a single function. For instance: +Có thể có nhiều lần xuất hiện của `return` trong một hàm. Ví dụ: ```js run function checkAge(age) { @@ -284,23 +284,23 @@ function checkAge(age) { */!* } else { *!* - return confirm('Do you have permission from your parents?'); + return confirm('Bạn có sự cho phép của bố mẹ chưa?'); */!* } } -let age = prompt('How old are you?', 18); +let age = prompt('Bạn bao nhiêu tuổi?', 18); if ( checkAge(age) ) { - alert( 'Access granted' ); + alert( 'Quyền truy cập được cấp' ); } else { - alert( 'Access denied' ); + alert( 'Quyền truy cập bị từ chối' ); } ``` -It is possible to use `return` without a value. That causes the function to exit immediately. +Có thể sử dụng `return` mà không có giá trị. Điều đó khiến chức năng thoát ra ngay lập tức. -For example: +Ví dụ: ```js function showMovie(age) { @@ -310,15 +310,15 @@ function showMovie(age) { */!* } - alert( "Showing you the movie" ); // (*) + alert( "Cho bạn xem bộ phim" ); // (*) // ... } ``` -In the code above, if `checkAge(age)` returns `false`, then `showMovie` won't proceed to the `alert`. +Ở đoạn mã ở trên, nếu `checkAge(age)` trả về `false`, sau đó `showMovie` sẽ không dẫn tới `alert`. -````smart header="A function with an empty `return` or without it returns `undefined`" -If a function does not return a value, it is the same as if it returns `undefined`: +````smart header="Một hàm trả về giá trị với `return` hoặc không có gì với `undefined`" +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`: ```js run function doNothing() { /* empty */ } @@ -326,7 +326,7 @@ function doNothing() { /* empty */ } alert( doNothing() === undefined ); // true ``` -An empty `return` is also the same as `return undefined`: +Trường hợp `return` thì cũng giống với `return undefined`: ```js run function doNothing() { @@ -337,23 +337,23 @@ alert( doNothing() === undefined ); // true ``` ```` -````warn header="Never add a newline between `return` and the value" -For a long expression in `return`, it might be tempting to put it on a separate line, like this: +````warn header="Không bao giờ thêm dòng mới giữa `return` và giá trị" +Đố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: ```js return (some + long + expression + or + whatever * f(a) + f(b)) ``` -That doesn't work, because JavaScript assumes a semicolon after `return`. That'll work the same as: +Điều đó không hiệu quả, vì JavaScript giả sử dấu chấm phẩy sau `return`. Điều đó sẽ hoạt động giống như: ```js return*!*;*/!* (some + long + expression + or + whatever * f(a) + f(b)) ``` -So, it effectively becomes an empty return. +Vì vậy, nó thực sự đã trả về rỗng. -If we want the returned expression to wrap across multiple lines, we should start it at the same line as `return`. Or at least put the opening parentheses there as follows: +Nếu chúng ta muốn biểu thức trả về trải dài trên nhiều dòng, chúng ta nên bắt đầu biểu thức đó ở cùng dòng với `return`. Hoặc ít nhất đặt dấu ngoặc mở ở đó như sau: ```js return ( @@ -362,67 +362,67 @@ return ( whatever * f(a) + f(b) ) ``` -And it will work just as we expect it to. +Và nó sẽ hoạt động đúng như chúng ta mong đợi. ```` -## Naming a function [#function-naming] +## Đặt tên cho hàm [#function-naming] -Functions are actions. So their name is usually a verb. It should be brief, as accurate as possible and describe what the function does, so that someone reading the code gets an indication of what the function does. +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. -It is a widespread practice to start a function with a verbal prefix which vaguely describes the action. There must be an agreement within the team on the meaning of the prefixes. +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ố. -For instance, functions that start with `"show"` usually show something. +Ví dụ: các hàm bắt đầu bằng `"show"` thường hiển thị nội dung nào đó. -Function starting with... +Chức năng bắt đầu bằng... -- `"get…"` -- return a value, -- `"calc…"` -- calculate something, -- `"create…"` -- create something, -- `"check…"` -- check something and return a boolean, etc. +- `"get..."` -- trả về một giá trị, +- `"calc..."` -- tính toán điều gì đó, +- `"tạo..."` -- tạo ra thứ gì đó, +- `"kiểm tra..."` -- kiểm tra thứ gì đó và trả về một boolean, v.v. -Examples of such names: +Các ví dụ cho những tên kể trên: ```js no-beautify -showMessage(..) // shows a message -getAge(..) // returns the age (gets it somehow) -calcSum(..) // calculates a sum and returns the result -createForm(..) // creates a form (and usually returns it) -checkPermission(..) // checks a permission, returns true/false +showMessage(..) // đưa ra một tin nhắn +getAge(..) // trả về tuổi (lấy nó bằng cách nào đó) +calcSum(..) // tính tổng và trả về kết quả +createForm(..) // tạo một biểu mẫu (và thường trả về nó) +checkPermission(..) // kiểm tra quyền, trả về đúng/sai ``` -With prefixes in place, a glance at a function name gives an understanding what kind of work it does and what kind of value it returns. +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.. -```smart header="One function -- one action" -A function should do exactly what is suggested by its name, no more. +```smart header="Một hàm -- một hành động" +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. -Two independent actions usually deserve two functions, even if they are usually called together (in that case we can make a 3rd function that calls those two). +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 đó). -A few examples of breaking this rule: +Một vài ví dụ về việc vi phạm quy tắc này: -- `getAge` -- would be bad if it shows an `alert` with the age (should only get). -- `createForm` -- would be bad if it modifies the document, adding a form to it (should only create it and return). -- `checkPermission` -- would be bad if it displays the `access granted/denied` message (should only perform the check and return the result). +- `getAge` -- sẽ thật tệ nếu nó hiển thị `cảnh báo` theo độ tuổi (chỉ nên nhận). +- `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ề). +- `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ả). -These examples assume common meanings of prefixes. You and your team are free to agree on other meanings, but usually they're not much different. In any case, you should have a firm understanding of what a prefix means, what a prefixed function can and cannot do. All same-prefixed functions should obey the rules. And the team should share the knowledge. +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. ``` -```smart header="Ultrashort function names" -Functions that are used *very often* sometimes have ultrashort names. +```smart header="Những tên hàm siêu ngắn" +Các hàm được sử dụng *rất thường xuyên* đôi khi có tên cực ngắn. -For example, the [jQuery](http://jquery.com) framework defines a function with `$`. The [Lodash](http://lodash.com/) library has its core function named `_`. +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à `_`. -These are exceptions. Generally functions names should be concise and descriptive. +Đâ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ả. ``` -## Functions == Comments +## Hàm == Bình luận -Functions should be short and do exactly one thing. If that thing is big, maybe it's worth it to split the function into a few smaller functions. Sometimes following this rule may not be that easy, but it's definitely a good thing. +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. -A separate function is not only easier to test and debug -- its very existence is a great comment! +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! -For instance, compare the two functions `showPrimes(n)` below. Each one outputs [prime numbers](https://en.wikipedia.org/wiki/Prime_number) up to `n`. +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`. -The first variant uses a label: +Biến thể đầu tiên sử dụng nhãn: ```js function showPrimes(n) { @@ -432,12 +432,12 @@ function showPrimes(n) { if (i % j == 0) continue nextPrime; } - alert( i ); // a prime + alert( i ); // một số nguyên tố } } ``` -The second variant uses an additional function `isPrime(n)` to test for primality: +Biến thể thứ hai sử dụng hàm bổ sung `isPrime(n)` để kiểm tra tính nguyên tố: ```js function showPrimes(n) { @@ -457,13 +457,13 @@ function isPrime(n) { } ``` -The second variant is easier to understand, isn't it? Instead of the code piece we see a name of the action (`isPrime`). Sometimes people refer to such code as *self-describing*. +Biến thể thứ hai dễ hiểu hơn phải không? Thay vì đoạn mã, chúng ta thấy tên của hành động (`isPrime`). Đôi khi mọi người gọi mã đó là *tự mô tả*. -So, functions can be created even if we don't intend to reuse them. They structure the code and make it readable. +Vì vậy, các hàm có thể được tạo ngay cả khi chúng ta không có ý định sử dụng lại chúng. Họ cấu trúc mã và làm cho nó có thể đọc được. -## Summary +## Bản tóm tắt -A function declaration looks like this: +Một khai báo hàm trông như thế này: ```js function name(parameters, delimited, by, comma) { @@ -471,18 +471,18 @@ function name(parameters, delimited, by, comma) { } ``` -- Values passed to a function as parameters are copied to its local variables. -- A function may access outer variables. But it works only from inside out. The code outside of the function doesn't see its local variables. -- A function can return a value. If it doesn't, then its result is `undefined`. +- 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 đó. +- 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ó. +- 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`. -To make the code clean and easy to understand, it's recommended to use mainly local variables and parameters in the function, not outer variables. +Để 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. -It is always easier to understand a function which gets parameters, works with them and returns a result than a function which gets no parameters, but modifies outer variables as a side-effect. +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ụ. -Function naming: +Đặt tên cho hàm: -- A name should clearly describe what the function does. When we see a function call in the code, a good name instantly gives us an understanding what it does and returns. -- A function is an action, so function names are usually verbal. -- There exist many well-known function prefixes like `create…`, `show…`, `get…`, `check…` and so on. Use them to hint what a function does. +- 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ề. +- Hàm là một hành động nên tên hàm thường bằng lời nói. +- 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. -Functions are the main building blocks of scripts. Now we've covered the basics, so we actually can start creating and using them. But that's only the beginning of the path. We are going to return to them many times, going more deeply into their advanced features. +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. From 59fbfd38576523f44e0b0da8385300f91f255385 Mon Sep 17 00:00:00 2001 From: hoangnv170752 Date: Sat, 13 Jul 2024 16:41:45 +0700 Subject: [PATCH 2/5] Functions --- .../1-if-else-required/task.md | 2 +- .../solution.md | 2 +- .../15-function-basics/3-min/solution.md | 2 +- .../15-function-basics/article.md | 78 +++++++++---------- 4 files changed, 42 insertions(+), 42 deletions(-) diff --git a/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md b/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md index 1ec0e0619..86e5826a1 100644 --- a/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md +++ b/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md @@ -2,7 +2,7 @@ importance: 4 --- -# Có thật là từ "else" cần thiết? +# "else" có bắt buộc không Hàm sau đây sẽ trả về `true` nếu tham số `age` là lớn hơn `18`. diff --git a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md index 2657867b9..016b4ce10 100644 --- a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md +++ b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md @@ -14,4 +14,4 @@ function checkAge(age) { } ``` -Lưu ý rằng dấu ngoặc đơn quanh `age > 18` thì không được yêu cầu ở đây. Chúng tồn tại để dễ hơn cho việc đọc. +Lưu ý rằng dấu ngoặc đơn quanh `age > 18` là không bắt buộc. Chúng tồn tại để chúng ta dễ đọc hơn. \ No newline at end of file diff --git a/1-js/02-first-steps/15-function-basics/3-min/solution.md b/1-js/02-first-steps/15-function-basics/3-min/solution.md index 182ec0ee2..37d0b5c25 100644 --- a/1-js/02-first-steps/15-function-basics/3-min/solution.md +++ b/1-js/02-first-steps/15-function-basics/3-min/solution.md @@ -18,4 +18,4 @@ function min(a, b) { } ``` -Tái bút: Trong trường hợp có một phương trình `a == b` thì nó không còn quan trọng việc trả về giá trị gì. \ No newline at end of file +"Tái bút: Trong trường hợp so sánh bằng nhau `a == b` thì không quan trọng giá trị trả về là gì." \ No newline at end of file diff --git a/1-js/02-first-steps/15-function-basics/article.md b/1-js/02-first-steps/15-function-basics/article.md index e761c993e..7a20ba54c 100644 --- a/1-js/02-first-steps/15-function-basics/article.md +++ b/1-js/02-first-steps/15-function-basics/article.md @@ -2,9 +2,9 @@ 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. -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 +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 -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. +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ó. 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. @@ -20,7 +20,7 @@ function showMessage() { } ``` -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. +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. ```js function name(parameters) { @@ -28,7 +28,7 @@ function name(parameters) { } ``` -Chức năng mới của chúng ta có thể được gọi bằng tên của nó:: `showMessage()`. +Hàm mới của chúng ta có thể được gọi bằng tên của nó:: `showMessage()`. Ví dụ: @@ -43,7 +43,7 @@ showMessage(); */!* ``` -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. +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. 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ã. @@ -51,7 +51,7 @@ Nếu chúng ta cần thay đổi thông báo hoặc cách nó được hiển t ## Các biến cục bộ -Một biến được khai báo bên trong một hàm chỉ hiển thị bên trong hàm đó. +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 đó. Ví dụ: @@ -66,7 +66,7 @@ function showMessage() { showMessage(); // Xin chào, tôi là JavaScript! -alert( message ); // <-- Lỗi! Đây là biến cục bộ so với hàm +alert( message ); // <-- Lỗi! Đây là cục bộ đối với hàm ``` ## Các biến bên ngoài @@ -84,7 +84,7 @@ function showMessage() { showMessage(); // Xin chào, John ``` -Hàm có toàn quyền truy cập vào biến ngoài. Nó cũng có thể thay đổi được. +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. Ví dụ: @@ -105,9 +105,9 @@ showMessage(); alert( userName ); // *!*Bob*/!*, the value was modified by the function ``` -Biến ngoài chỉ được sử dụng nếu không có biến cục bộ. +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ó. -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: +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: ```js run let userName = 'John'; @@ -128,11 +128,11 @@ alert( userName ); // *!*John*/!*, unchanged, the function did not access the ou ``` ```smart header="Biến toàn cục" -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*. +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*. -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ộ). +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ộ). -Đó 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. +Đó 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. ``` ## Các tham số @@ -152,9 +152,9 @@ showMessage('Ann', "Có chuyện gì á?"); // Ann: What's up? (**) */!* ``` -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. +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. -Đâ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ị: +Đâ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ị: ```js run @@ -177,7 +177,7 @@ alert( from ); // Ann ## Những giá trị mặc định -Nếu một tham số không được cung cấp thì giá trị của nó sẽ trở thành `không xác định`. +Nếu một tham số không được cung cấp thì giá trị của nó sẽ trở thành `undefined`. 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: @@ -197,9 +197,9 @@ function showMessage(from, *!*text = "không có văn bản nào được đưa showMessage("Ann"); // Ann: không có văn bản nào được đưa ra ``` -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"` +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"` -Ở đâ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ể: +Ở đâ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ể: ```js run function showMessage(from, text = anotherFunction()) { @@ -224,7 +224,7 @@ To check for an omitted parameter, we can compare it with `undefined`: function showMessage(text) { *!* if (text === undefined) { - text = 'tin nhắn trống'; + text = 'tin nhắn rỗng'; } */!* @@ -259,7 +259,7 @@ showCount(); // unknown ## Trả về một giá trị -Kết quả là một hàm có thể trả về một giá trị vào mã gọi. +Một hàm có thể trả về một giá trị làm kết quả cho mã gọi hàm đó. Ví dụ đơn giản nhất là hàm tính tổng hai giá trị: @@ -272,7 +272,7 @@ let result = sum(1, 2); alert( result ); // 3 ``` -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). +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). Có thể có nhiều lần xuất hiện của `return` trong một hàm. Ví dụ: @@ -315,10 +315,10 @@ function showMovie(age) { } ``` -Ở đoạn mã ở trên, nếu `checkAge(age)` trả về `false`, sau đó `showMovie` sẽ không dẫn tới `alert`. +Ở đoạn mã ở trên, nếu `checkAge(age)` trả về `false`, thì `showMovie` sẽ không thực hiện hàm `alert`. -````smart header="Một hàm trả về giá trị với `return` hoặc không có gì với `undefined`" -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`: +````smart header="Một hàm trả với `return` rỗng hoặc không có `return` thì trả về `undefined`" +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`: ```js run function doNothing() { /* empty */ } @@ -326,7 +326,7 @@ function doNothing() { /* empty */ } alert( doNothing() === undefined ); // true ``` -Trường hợp `return` thì cũng giống với `return undefined`: +Trường hợp `return` rỗng, không kèm theo giá trị, thì cũng giống với `return undefined`: ```js run function doNothing() { @@ -338,7 +338,7 @@ alert( doNothing() === undefined ); // true ```` ````warn header="Không bao giờ thêm dòng mới giữa `return` và giá trị" -Đố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: +Đố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: ```js return @@ -369,7 +369,7 @@ Và nó sẽ hoạt động đúng như chúng ta mong đợi. 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. -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ố. +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ố. Ví dụ: các hàm bắt đầu bằng `"show"` thường hiển thị nội dung nào đó. @@ -383,7 +383,7 @@ Chức năng bắt đầu bằng... Các ví dụ cho những tên kể trên: ```js no-beautify -showMessage(..) // đưa ra một tin nhắn +showMessage(..) // một thông báo (hoặc thông điệp) getAge(..) // trả về tuổi (lấy nó bằng cách nào đó) calcSum(..) // tính tổng và trả về kết quả 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 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.. ```smart header="Một hàm -- một hành động" -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. +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. 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 đó). @@ -403,22 +403,22 @@ Một vài ví dụ về việc vi phạm quy tắc này: - `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ề). - `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ả). -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. +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. ``` ```smart header="Những tên hàm siêu ngắn" Các hàm được sử dụng *rất thường xuyên* đôi khi có tên cực ngắn. -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à `_`. +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à `_`. Đâ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ả. ``` -## Hàm == Bình luận +## Hàm == Chú thích 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. -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! +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! 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`. @@ -473,16 +473,16 @@ function name(parameters, delimited, by, comma) { - 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 đó. - 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ó. -- 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`. +- Hàm có thể trả về một giá trị. Nếu không, thì kết quả của nó là `undefined`. -Để 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. +Để 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. -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ụ. +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ụ. Đặt tên cho hàm: -- 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ề. -- Hàm là một hành động nên tên hàm thường bằng lời nói. -- 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. +- 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ì. +- Hàm là một hành động nên tên hàm thường là động từ. +- 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. 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. From 7a764b4248fe16260f687f74b265a5a8af16543c Mon Sep 17 00:00:00 2001 From: hoangnv170752 Date: Sun, 14 Jul 2024 07:50:39 +0700 Subject: [PATCH 3/5] Functions --- .../1-if-else-required/task.md | 2 +- .../15-function-basics/3-min/solution.md | 2 +- .../02-first-steps/15-function-basics/article.md | 16 ++++++++-------- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md b/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md index 86e5826a1..dd8e5aa1c 100644 --- a/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md +++ b/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md @@ -2,7 +2,7 @@ importance: 4 --- -# "else" có bắt buộc không +# "else" có bắt buộc không? Hàm sau đây sẽ trả về `true` nếu tham số `age` là lớn hơn `18`. diff --git a/1-js/02-first-steps/15-function-basics/3-min/solution.md b/1-js/02-first-steps/15-function-basics/3-min/solution.md index 37d0b5c25..98d26470f 100644 --- a/1-js/02-first-steps/15-function-basics/3-min/solution.md +++ b/1-js/02-first-steps/15-function-basics/3-min/solution.md @@ -18,4 +18,4 @@ function min(a, b) { } ``` -"Tái bút: Trong trường hợp so sánh bằng nhau `a == b` thì không quan trọng giá trị trả về là gì." \ No newline at end of file +Tái bút: Trong trường hợp so sánh bằng nhau `a == b` thì không quan trọng giá trị trả về là gì. \ No newline at end of file diff --git a/1-js/02-first-steps/15-function-basics/article.md b/1-js/02-first-steps/15-function-basics/article.md index 7a20ba54c..9c3798b94 100644 --- a/1-js/02-first-steps/15-function-basics/article.md +++ b/1-js/02-first-steps/15-function-basics/article.md @@ -2,7 +2,7 @@ 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. -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 +Ví dụ: chúng ta cần hiển thị một thông báo đẹp mắt khi khách hàng khi khách hàng đăng nhập, đăng xuất và có thể ở một nơi khác 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ó. @@ -20,7 +20,7 @@ function showMessage() { } ``` -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. +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 gọi là "thân hàm", giữa các dấu ngoặc nhọn. ```js function name(parameters) { @@ -272,7 +272,7 @@ let result = sum(1, 2); alert( result ); // 3 ``` -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). +Lệnh `return` có thể ở bất kỳ vị trí nào của hàm. Khi thực thi lệnh đó, hàm sẽ dừng và giá trị được trả về mã gọi (được gán cho `result` ở trên). Có thể có nhiều lần xuất hiện của `return` trong một hàm. Ví dụ: @@ -317,7 +317,7 @@ function showMovie(age) { Ở đoạn mã ở trên, nếu `checkAge(age)` trả về `false`, thì `showMovie` sẽ không thực hiện hàm `alert`. -````smart header="Một hàm trả với `return` rỗng hoặc không có `return` thì trả về `undefined`" +````smart header="Một hàm với `return` rỗng hoặc không có `return` thì trả về `undefined`" 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`: ```js run @@ -383,7 +383,7 @@ Chức năng bắt đầu bằng... Các ví dụ cho những tên kể trên: ```js no-beautify -showMessage(..) // một thông báo (hoặc thông điệp) +showMessage(..) // đưa ra một thông báo getAge(..) // trả về tuổi (lấy nó bằng cách nào đó) calcSum(..) // tính tổng và trả về kết quả createForm(..) // tạo một biểu mẫu (và thường trả về nó) @@ -418,7 +418,7 @@ Ví dụ: khung [jQuery](http://jquery.com) định nghĩa một hàm tên là ` 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. -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! +Một hàm riêng biệt không chỉ dễ kiểm tra và gỡ lỗi hơn -- nó còn là một chú thích tuyệt vời! 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`. @@ -477,11 +477,11 @@ function name(parameters, delimited, by, comma) { Để 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. -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ụ. +Hàm có tham số nhưng không gây tác dụng phụ thì dễ hiểu hơn hàm không tham số nhưng lại gây tác dụng phụ. Đặt tên cho hàm: -- 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ì. +- Tên hàm nên mô tả rõ hàm thực hiện công việc gì. 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ì. - Hàm là một hành động nên tên hàm thường là động từ. - 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. From 04ca798248f0c058cffc471928ca5d0a1318dc9c Mon Sep 17 00:00:00 2001 From: hoangnv170752 Date: Mon, 15 Jul 2024 09:00:44 +0700 Subject: [PATCH 4/5] Functions --- 1-js/02-first-steps/15-function-basics/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/02-first-steps/15-function-basics/article.md b/1-js/02-first-steps/15-function-basics/article.md index 9c3798b94..8a7cc9f7d 100644 --- a/1-js/02-first-steps/15-function-basics/article.md +++ b/1-js/02-first-steps/15-function-basics/article.md @@ -2,7 +2,7 @@ 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. -Ví dụ: chúng ta cần hiển thị một thông báo đẹp mắt khi khách hàng khi khách hàng đăng nhập, đăng xuất và có thể ở một nơi khác +Ví dụ: chúng ta cần hiển thị một thông báo đẹp mắt khi khách hàng đăng nhập, đăng xuất và có thể ở một nơi khác. 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ó. @@ -477,7 +477,7 @@ function name(parameters, delimited, by, comma) { Để 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. -Hàm có tham số nhưng không gây tác dụng phụ thì dễ hiểu hơn hàm không tham số nhưng lại gây tác dụng phụ. +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ụ. Đặt tên cho hàm: From 5c98802832bc5cfb8e3dd13545e48d360c89d43b Mon Sep 17 00:00:00 2001 From: hoangnv170752 Date: Mon, 15 Jul 2024 13:14:27 +0700 Subject: [PATCH 5/5] Functions --- 1-js/02-first-steps/15-function-basics/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/15-function-basics/article.md b/1-js/02-first-steps/15-function-basics/article.md index 8a7cc9f7d..4fd41d9e2 100644 --- a/1-js/02-first-steps/15-function-basics/article.md +++ b/1-js/02-first-steps/15-function-basics/article.md @@ -132,7 +132,7 @@ Các biến được khai báo bên ngoài bất kỳ hàm nào, chẳng hạn n 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ộ). -Đó 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. +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. ``` ## Các tham số