Các chức năng nên được đặt ở đâu trong javascript?

Ví dụ: chúng tôi cần hiển thị một thông báo đẹp mắt khi khách đăng nhập, đăng xuất và có thể ở một nơi khác

Hàm là “khối xây dựng” chính của chương trình. Chúng cho phép mã được gọi nhiều lần mà không cần lặp lại

Chúng ta đã thấy các ví dụ về hàm dựng sẵn, như

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

0,

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

1 và

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

2. Nhưng chúng ta cũng có thể tạo các chức năng của riêng mình

Khai báo hàm

Để tạo một hàm chúng ta có thể sử dụng khai báo hàm

Nó trông như thế này

function showMessage() {
  alert( 'Hello everyone!' );
}

Từ khóa

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

3 đi trước, sau đó đến tên của hàm, sau đó là 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, chúng ta sẽ xem các ví dụ sau) và cuối cùng là mã của hàm, cũng được đặt tên

function name(parameter1, parameter2, .. parameterN) {
 // body
}

Chức năng mới của chúng tôi có thể được gọi bằng tên của nó.

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

4

Ví dụ

function showMessage() {
  alert( 'Hello everyone!' );
}

showMessage();
showMessage();

Cuộc gọi

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

4 thực thi mã của chức năng. Ở đây chúng ta sẽ thấy thông báo 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 sao chép mã

Nếu chúng tôi cần thay đổi thông báo hoặc cách hiển thị thông báo, chỉ cần sửa đổi mã ở một nơi là đủ. chức năng xuất ra nó

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 đó

Ví dụ

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

biến bên ngoài

Một chức năng cũng có thể truy cập vào một biến bên ngoài, ví dụ

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

0

Hàm có toàn quyền truy cập vào biến bên ngoài. Nó cũng có thể sửa đổi nó

Ví dụ

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

1

Biến bên ngoài chỉ được sử dụng nếu không có biến cục bộ

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. Chẳng hạn, trong mã bên dưới, hàm sử dụng

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

6 cục bộ. Cái bên ngoài bị bỏ qua

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

3

biến toàn cục

Các biến được khai báo bên ngoài bất kỳ chức năng nào, chẳng hạn như bên ngoài

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

6 trong đoạn mã trên, được gọi là biến toàn cục

Các biến toàn cục có thể nhìn thấy từ bất kỳ chức năng nào (trừ khi bị che khuất bởi người dân địa phương)

Đó 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ầu. Mã hiện đại có ít hoặc không có toàn cầu. Hầu hết các biến nằm trong các 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

Thông số

Chúng ta có thể truyền dữ liệu tùy ý cho các hàm bằng cách sử dụng các tham số

Trong ví dụ bên dưới, hàm có hai tham số.

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

8 và

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

9

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

7

Khi hàm được gọi ở dòng

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

00 và

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

01, các giá trị đã cho được sao chép vào các biến cục bộ

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

8 và

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

9. Sau đó, chức năng sử dụng chúng

Đây là một ví dụ nữa. chúng ta có một biến

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

8 và truyền nó cho hàm. Xin lưu ý. chức năng thay đổi

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

8, nhưng sự thay đổi không được nhìn thấy bên ngoài, bởi vì một chức năng luôn nhận được một bản sao của giá trị

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

4

Khi một giá trị được truyền dưới dạng tham số hàm, nó còn được gọi là đối số

Nói cách khác, để đặt các điều khoản này thẳng

• Tham số là biến được liệt kê bên trong dấu ngoặc đơn trong phần khai báo hàm (đó là thuật ngữ thời gian khai báo)
• Đối số là giá trị được truyền cho hàm khi nó được gọi (đó là thuật ngữ thời gian gọi)

Chúng tôi khai báo các hàm liệt kê các tham số của chúng, sau đó gọi chúng là các đối số truyền

Trong ví dụ trên, người ta có thể nói. "hàm

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

06 được khai báo với hai tham số, sau đó được gọi với hai đối số.

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

8 và

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

08"

Giá trị mặc định

Nếu một hàm được gọi, nhưng không cung cấp đối số, thì giá trị tương ứng sẽ trở thành

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

09

Chẳng hạn, hàm

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

10 đã nói ở trên có thể được gọi bằng một đối số duy nhất

function showMessage() {
  alert( 'Hello everyone!' );
}

0

Đó không phải là lỗi. Một cuộc gọi như vậy sẽ xuất ra

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

11. Vì giá trị cho

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

9 không được chuyển, nó sẽ trở thành

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

09

Chúng ta có thể chỉ định cái gọi là giá trị “mặc định” (để sử dụng nếu bị bỏ qua) cho một tham số trong khai báo hàm, sử dụng

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

14

function name(parameter1, parameter2, .. parameterN) {
 // body
}

0

Lúc này nếu không truyền tham số

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

9 thì nó sẽ nhận giá trị là

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

16

Giá trị mặc định cũng nhảy vào nếu tham số tồn tại, nhưng hoàn toàn bằng

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

09, như thế này

function name(parameter1, parameter2, .. parameterN) {
 // body
}

1

Ở đây

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

16 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ể

function name(parameter1, parameter2, .. parameterN) {
 // body
}

2

Đánh giá các thông 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

Trong ví dụ trên,

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

19 hoàn toàn không được gọi nếu tham số

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

9 được cung cấp

Mặt khác, nó được gọi độc lập mỗi khi thiếu

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

9

Tham số mặc định trong mã JavaScript cũ

Vài năm trước, JavaScript không hỗ trợ cú pháp cho các tham số mặc định. Vì vậy, mọi người đã sử dụng những cách khác để chỉ định chúng

Ngày nay, chúng ta có thể bắt gặp chúng trong các chữ viết cũ

Ví dụ: kiểm tra rõ ràng cho

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

09

function name(parameter1, parameter2, .. parameterN) {
 // body
}

3

…Hoặc sử dụng toán tử

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

33

function name(parameter1, parameter2, .. parameterN) {
 // body
}

4

Thông số mặc định thay thế

Đôi khi, việc gán các giá trị mặc định cho các tham số ở giai đoạn sau sau khi khai báo hàm là hợp lý

Chúng ta có thể kiểm tra xem tham số có được truyền trong quá trình thực thi hàm hay không bằng cách so sánh nó với

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

09

function name(parameter1, parameter2, .. parameterN) {
 // body
}

5

…Hoặc chúng ta có thể sử dụng toán tử

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

33

function name(parameter1, parameter2, .. parameterN) {
 // body
}

6

Các công cụ JavaScript hiện đại hỗ trợ toán tử kết hợp nullish

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

36, sẽ tốt hơn khi hầu hết các giá trị giả, chẳng hạn như

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

37, nên được coi là "bình thường"

function name(parameter1, parameter2, .. parameterN) {
 // body
}

7

Trả về một giá trị

Kết quả là một hàm có thể trả lại một giá trị vào mã gọi

Ví dụ đơn giản nhất sẽ là một hàm tính tổng hai giá trị

function name(parameter1, parameter2, .. parameterN) {
 // body
}

8

Chỉ thị

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

38 có thể ở bất kỳ vị trí nào của chức năng. Khi 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

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

39 ở trên)

Có thể có nhiều lần xuất hiện của

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

38 trong một chức năng. Ví dụ

function name(parameter1, parameter2, .. parameterN) {
 // body
}

9

Có thể sử dụng

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

38 mà không cần giá trị. Điều đó khiến chức năng thoát ngay lập tức

Ví dụ

function showMessage() {
  alert( 'Hello everyone!' );
}

showMessage();
showMessage();

0

Trong đoạn mã trên, nếu

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

72 trả về

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

73, thì

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

74 sẽ không tiếp tục với

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

75

Một hàm có giá trị rỗng

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

38 hoặc không có giá trị trả về

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

09

Nếu một hàm không trả về giá trị, nó giống như khi nó trả về

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

09

function showMessage() {
  alert( 'Hello everyone!' );
}

showMessage();
showMessage();

1

Một

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

38 trống cũng giống như

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

40

function showMessage() {
  alert( 'Hello everyone!' );
}

showMessage();
showMessage();

2

Không bao giờ thêm một dòng mới giữa

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

38 và giá trị

Đối với một biểu thức dài trong

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

38, có thể bạn nên đặt nó trên một dòng riêng, như thế này

function showMessage() {
  alert( 'Hello everyone!' );
}

showMessage();
showMessage();

3

Điều đó không hiệu quả, bởi vì JavaScript giả định một dấu chấm phẩy sau

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

38. Điều đó sẽ hoạt động giống như

function showMessage() {
  alert( 'Hello everyone!' );
}

showMessage();
showMessage();

4

Vì vậy, nó thực sự trở thành một khoản hoàn trả trống

Nếu chúng ta muốn biểu thức được trả về ngắt dòng trên nhiều dòng, chúng ta nên bắt đầu nó ở cùng một dòng với

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

38. Hoặc ít nhất là đặt dấu ngoặc đơn mở ở đó như sau

function showMessage() {
  alert( 'Hello everyone!' );
}

showMessage();
showMessage();

5

Và nó sẽ hoạt động đúng như chúng ta mong đợi

Đặt tên cho một chức năng

Chức năng là hành động. Vì vậy, tên của họ 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ả những gì chức năng làm, để ai đó đọc mã sẽ nhận được dấu hiệu về những gì chức năng làm

Đó là một thực tế phổ biến để bắt đầu một chức năng với tiền tố bằng lời mô tả một cách mơ hồ hành động. Phải có một thỏa thuận trong nhóm về ý nghĩa của các tiền tố

Chẳng hạn, các hàm bắt đầu bằng

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

45 thường hiển thị nội dung nào đó

Hàm bắt đầu bằng…

• function showMessage() {
    let message = "Hello, I'm JavaScript!"; // local variable
  
    alert( message );
  }
  
  showMessage(); // Hello, I'm JavaScript!
  
  alert( message ); // <-- Error! The variable is local to the function

  46 – trả về một giá trị,

• function showMessage() {
    let message = "Hello, I'm JavaScript!"; // local variable
  
    alert( message );
  }
  
  showMessage(); // Hello, I'm JavaScript!
  
  alert( message ); // <-- Error! The variable is local to the function

  47 – tính toán cái gì đó,

• function showMessage() {
    let message = "Hello, I'm JavaScript!"; // local variable
  
    alert( message );
  }
  
  showMessage(); // Hello, I'm JavaScript!
  
  alert( message ); // <-- Error! The variable is local to the function

  48 – tạo ra thứ gì đó,

• function showMessage() {
    let message = "Hello, I'm JavaScript!"; // local variable
  
    alert( message );
  }
  
  showMessage(); // Hello, I'm JavaScript!
  
  alert( message ); // <-- Error! The variable is local to the function

  49 – kiểm tra thứ gì đó và trả về giá trị boolean, v.v.

Ví dụ về những cái tên như vậy

function showMessage() {
  alert( 'Hello everyone!' );
}

showMessage();
showMessage();

6

Với các tiền tố sẵn có, chỉ cần nhìn lướt qua tên hàm là bạn có thể hiểu loại công việc của nó và loại giá trị mà nó trả về

Một chức năng – một hành động

Một chức năng nên thực hiện chính xác những gì được đề xuất bởi tên của nó, không hơn

Hai hành động độc lập thường xứng đáng với 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 đó)

Một vài ví dụ về việc phá vỡ quy tắc này

• function showMessage() {
    alert( 'Hello everyone!' );
  }

  00 – sẽ rất tệ nếu nó hiển thị

  function showMessage() {
    let message = "Hello, I'm JavaScript!"; // local variable
  
    alert( message );
  }
  
  showMessage(); // Hello, I'm JavaScript!
  
  alert( message ); // <-- Error! The variable is local to the function

  75 cùng với tuổi (chỉ nên lấy)

• function showMessage() {
    alert( 'Hello everyone!' );
  }

  02 – sẽ rất tệ nếu nó sửa đổi tài liệu, thêm biểu mẫu vào tài liệu (chỉ nên tạo và trả về)

• function showMessage() {
    alert( 'Hello everyone!' );
  }

  03 – sẽ rất tệ nếu nó hiển thị thông báo

  function showMessage() {
    alert( 'Hello everyone!' );
  }

  04 (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 phổ biến 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ì chúng không khác nhau nhiều. Trong bất kỳ trường hợp nào, bạn nên hiểu rõ tiền tố nghĩa là gì, chức năng 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

Tên chức năng siêu ngắn

Các chức năng được sử dụng rất thường xuyên đôi khi có tên siêu ngắn

Ví dụ: khung công tác jQuery định nghĩa một hàm với

function showMessage() {
  alert( 'Hello everyone!' );
}

05. Thư viện Lodash có chức năng cốt lõi tên là

function showMessage() {
  alert( 'Hello everyone!' );
}

06

Đây là những trường hợp ngoại lệ. Nói chung tên chức năng phải ngắn gọn và mô tả

Chức năng == Nhận xét

Các chức năng 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 chức năng thành một vài chức năng nhỏ hơn. Đôi khi 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 – chính sự tồn tại của nó là một nhận xét tuyệt vời

Chẳng hạn, so sánh hai hàm

function showMessage() {
  alert( 'Hello everyone!' );
}

07 bên dưới. Mỗi cái xuất ra các số nguyên tố lên đến

function showMessage() {
  alert( 'Hello everyone!' );
}

08

Biến thể đầu tiên sử dụng nhãn

function showMessage() {
  alert( 'Hello everyone!' );
}

showMessage();
showMessage();

7

Biến thể thứ hai sử dụng hàm bổ sung

function showMessage() {
  alert( 'Hello everyone!' );
}

09 để kiểm tra tính nguyên tố

function showMessage() {
  alert( 'Hello everyone!' );
}

showMessage();
showMessage();

8

Biến thể thứ hai dễ hiểu hơn phải không? . Đôi khi mọi người coi mã như vậy là tự mô tả

Vì vậy, các chức năng có thể được tạo ngay cả khi chúng tôi không có ý định sử dụng lại chúng. Họ cấu trúc mã và làm cho mã có thể đọc được

Bản tóm tắt

Một khai báo chức năng trông như thế này

function showMessage() {
  alert( 'Hello everyone!' );
}

showMessage();
showMessage();

9

• Các giá trị được chuyển đến một hàm dưới dạng các tham số được sao chép vào các biến cục bộ của nó
• Một chức năng có thể truy cập các biến bên ngoài. Nhưng nó chỉ hoạt động từ trong ra ngoài. Mã bên ngoài chức năng không nhìn thấy các biến cục bộ của nó
• Một hàm có thể trả về một giá trị. Nếu không, thì kết quả của nó là

  function showMessage() {
    let message = "Hello, I'm JavaScript!"; // local variable
  
    alert( message );
  }
  
  showMessage(); // Hello, I'm JavaScript!
  
  alert( message ); // <-- Error! The variable is local to the function

  09

Để 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 phải 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 một 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ụ

đặt tên hàm

• Một cái tên nên mô tả rõ ràng những gì chức năng làm. Khi chúng ta thấy một lời 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ề
• Một chức năng là một hành động, vì vậy tên chức năng thường bằng lời nói
• Có nhiều tiền tố chức năng nổi tiếng như

  function name(parameter1, parameter2, .. parameterN) {
   // body
  }

  02,

  function name(parameter1, parameter2, .. parameterN) {
   // body
  }

  03,

  function name(parameter1, parameter2, .. parameterN) {
   // body
  }

  04,

  function name(parameter1, parameter2, .. parameterN) {
   // body
  }

  05, v.v. Sử dụng chúng để gợi ý những gì một chức năng làm

Hàm là khối xây dựng chính của tập lệnh. Bây giờ chúng tôi đã đề cập đến những điều cơ bản, vì vậy chúng tôi thực sự có thể bắt đầu tạo và sử dụng chúng. Nhưng đó mới chỉ là khởi đầu của con đường. Chúng tôi sẽ quay lại vớ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

Các chức năng nên đi đâu trong JavaScript?

Các chức năng nên được khai báo ở đâu?

Đâu là nơi chính xác để chèn JavaScript?

Cách tốt nhất để viết các hàm trong JavaScript là gì?