Hàm javascript có thể trả về giá trị không?

Sẽ rất hữu ích nếu có một chức năng thực hiện một số công việc cho bạn và trả lại cho bạn kết quả của công việc đó. Sau đó, bạn có thể sử dụng kết quả theo cách bạn muốn. Trong danh sách 5. 6 bạn đã thấy hàm showSum hiển thị tổng của hai số trên bảng điều khiển. Có thể tốt hơn nếu có một chức năng thêm chỉ cần thêm các số và trả về kết quả. Trong khi showSum luôn hiển thị kết quả trên bảng điều khiển, với add, bạn có thể hiển thị kết quả mà hàm trả về nếu bạn chọn, sử dụng nó trong các phép tính tiếp theo, gửi qua mạng hoặc lưu vào cơ sở dữ liệu

Mặc dù đơn giản nhưng câu lệnh return trong JavaScript có thể giúp chúng ta cải thiện khả năng đọc mã của mình và làm cho mã ít phức tạp hơn

2 tháng 3 năm 2022 • 7 phút đọc

Bài đăng này miễn phí cho tất cả mọi người đọc nhờ vào sự đầu tư mà những người đăng ký Blog Mindsers đã thực hiện trong ấn phẩm độc lập của chúng tôi. Nếu công việc này có ý nghĩa với bạn, tôi mời bạn trở thành người đăng ký ngay hôm nay

Để kết thúc một chức năng, JavaScript sử dụng câu lệnh

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4. Câu lệnh

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4 rất đơn giản. Đó là một trong những điều đầu tiên bạn sẽ học trong một khóa học mã hóa

Nhưng bạn không nên đánh giá thấp khả năng của nó trong việc giúp bạn viết mã sạch hơn và hoạt động hiệu quả hơn [và ngược lại khi bạn không nắm vững nó đủ tốt]

Tôi đang sử dụng mã JavaScript để minh họa quan điểm của mình trong bài đăng này, nhưng nó cũng áp dụng cho các ngôn ngữ lập trình khác

Tóm lược

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4

• function prepareObject[obj] {
      obj.connect[{
        // ...
      }]
      obj.use[{
        // ...
      }]
      
      return undefined
  }

  2

Câu lệnh

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4⁣ hoạt động như thế nào?

Chúng tôi sử dụng các chức năng để nhóm các câu lệnh lại với nhau theo ngữ cảnh. Nó có nghĩa là chúng phục vụ cùng một mục đích, làm cùng một nhiệm vụ

Quy tắc đầu tiên chúng ta sẽ thử và làm theo. một chức năng = một trách nhiệm. Không bao giờ có nhiều hơn một trách nhiệm. Nó sẽ làm cho mã của bạn tốt hơn rất nhiều

function addOneTo[a] {
    const result = a + 1
    
    return result
}

Hàm

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4 cộng 1 vào giá trị chứa trong biến

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

5. Tôi giải thích chi tiết về các biến JavaScript trong một bài đăng khác, nếu bạn chưa cảm thấy thoải mái với chúng, tôi thực sự khuyến khích bạn đọc nó

Câu lệnh return cho phép chúng ta trả về kết quả của phép cộng theo cách này.

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

6

Nói cách khác, câu lệnh

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

7 cho phép chúng ta chỉ rõ cho trình thông dịch JavaScript hàm này sẽ trả về giá trị nào. Trong ví dụ của chúng tôi, chúng tôi sử dụng hai biến. Chúng tôi không muốn trả lại

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

5, chỉ có

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

9

Còn những hàm không có câu lệnh trả về thì sao?

Những người trong số các bạn, giống như tôi, có các lớp thuật toán có thể nhớ điều này. một chức năng phải luôn trả về một cái gì đó. Đó là một quy tắc cơ bản. JavaScript tuân theo quy tắc này, các hàm luôn trả về một cái gì đó. Trong trường hợp bạn không muốn trả về một giá trị, thì có một thứ khác tồn tại. Người ta gọi đó là thủ tục

Vấn đề là. Không có thủ tục nào trong JavaScript

Để giải quyết vấn đề này, JavaScript cho phép chúng tôi trả về giá trị “không xác định”. Nó không được xác định. Chúng tôi không biết giá trị là gì, vì vậy chúng tôi có thể nói nó trống rỗng

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

Bằng cách này, bạn có thể sử dụng các hàm như khi sử dụng các thủ tục, bạn tập hợp các câu lệnh có thể tái sử dụng mà không trả về kết quả/giá trị đã xác định

Hàm

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return
}

0 chạy các câu lệnh của nó và ở phần cuối, chúng tôi nói rằng hàm trả về giá trị

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return
}

1. Đối với chúng tôi, điều đó có nghĩa là chúng tôi không trả lại gì, nhưng trình thông dịch rất vui vì dù sao thì bạn cũng trả về một giá trị

Nếu thử chạy hàm

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return
}

0, bạn sẽ thấy hàm trả về giá trị

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return
}

1

Tuy nhiên, có một số cách để làm cho mã đơn giản hơn. Đầu tiên, để trống giá trị như thế này

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return
}

Bởi vì "không có gì" được trả về, trình thông dịch JavaScript hiểu rằng bạn muốn trả về giá trị

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return
}

1 và tự động thực hiện việc đó

Bạn cũng có thể bỏ qua câu lệnh hoàn toàn, như thế này

function addOneTo[a] {
    const result = a + 1
    
    return result
}

5

Nếu bạn đang nghĩ đó là một thủ tục, tôi hiểu tại sao, nhưng nó đã sai. Hãy thử chạy hàm

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return
}

0, bạn sẽ thấy nó trả về giá trị

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return
}

1

Câu lệnh return là câu lệnh “chặn”

Việc

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4 là một câu lệnh cổ điển cho phép chúng ta đặt nó ở bất kỳ đâu trong mã của một hàm

function addOneTo[a] {
    const result = a + 1
    
    return result
}

8

Mã trước đó là hợp lệ. Điều duy nhất bạn phải nhớ ở đây là

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4 là một câu lệnh "chặn" trong phạm vi của hàm cha

Điều đó có nghĩa là nó chỉ ra sự dừng lại của chức năng mà nó là. Điều quan trọng là phải hiểu vì điều đó có nghĩa là mã nằm sau câu lệnh

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4 sẽ không bao giờ được thực thi

Mã nằm sau câu lệnh

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4 là cái mà chúng tôi gọi là “mã chết”

Trên thực tế, câu lệnh

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4 có nghĩa đen là. “chức năng này đã chạy đúng cách, đây là kết quả bạn có thể hiển thị cho ngữ cảnh gốc. Không cần đọc thêm. ”

Sử dụng tốt hơn câu lệnh

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4

Nếu bạn đã tự hỏi tại sao chúng tôi lại sử dụng

function addOneTo[a] {
    const result = a + 1
    
    return result
}

53 thay vì bỏ qua câu lệnh hoặc nếu bạn thắc mắc tại sao chúng tôi lại viết mã sau một

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4, thì phần này của bài đăng là dành cho bạn

Khi bạn hiểu hai ý tưởng này, bạn có thể sử dụng câu lệnh

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4 tốt hơn. Việc sử dụng tốt

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4 giúp mã dễ đọc hơn

Ra khỏi chức năng càng sớm càng tốt

Khi chúng ta đọc mã, dù là của chúng ta hay của người khác, càng nhiều dữ liệu, bộ não của chúng ta càng khó hiểu nó. Các bước nhảy giữa các ngữ cảnh thực thi là một phần của dữ liệu cần được xem xét và mỗi chức năng là một ngữ cảnh thực thi mới

Điều này đang được nói, chúng tôi không muốn sử dụng ít chức năng hơn vì có nhiều ưu điểm hơn nhược điểm [khả năng sử dụng lại, cấu trúc mã, v.v.]

Một cách để giảm độ phức tạp của mã là giảm số lượng dữ liệu cần xem xét. Câu lệnh

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4 có thể giúp chúng ta làm điều đó. Hãy xem một ví dụ

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

0

Hàm này được sử dụng để báo cho hàm JavaScript

function addOneTo[a] {
    const result = a + 1
    
    return result
}

58 cách sắp xếp một mảng. Nó được sử dụng như thế này.

function addOneTo[a] {
    const result = a + 1
    
    return result
}

59

Hãy đọc chức năng để hiểu. Hãy xem bộ não của chúng ta làm gì khi chúng ta gỡ lỗi để minh họa quan điểm của mình.

function addOneTo[a] {
    const result = a + 1
    
    return result
}

80 bằng

function addOneTo[a] {
    const result = a + 1
    
    return result
}

81 và

function addOneTo[a] {
    const result = a + 1
    
    return result
}

82 bằng

function addOneTo[a] {
    const result = a + 1
    
    return result
}

83

1. Đầu tiên, tôi thấy rằng có một biến

   function prepareObject[obj] {
       obj.connect[{
         // ...
       }]
       obj.use[{
         // ...
       }]
       
       return undefined
   }

   9 được khởi tạo với giá trị

   function addOneTo[a] {
       const result = a + 1
       
       return result
   }

   85, nhưng giá trị này sẽ thay đổi vì chúng ta sử dụng câu lệnh

   function addOneTo[a] {
       const result = a + 1
       
       return result
   }

   86. Để đọc thêm về bước này, hãy đọc bài viết chi tiết về biến JavaScript
2. Một điều kiện. nếu thứ tự của

   function prepareObject[obj] {
       obj.connect[{
         // ...
       }]
       obj.use[{
         // ...
       }]
       
       return undefined
   }

   5 vượt trội hơn so với

   function addOneTo[a] {
       const result = a + 1
       
       return result
   }

   88. Trong trường hợp của chúng tôi, chúng tôi sửa đổi giá trị của

   function prepareObject[obj] {
       obj.connect[{
         // ...
       }]
       obj.use[{
         // ...
       }]
       
       return undefined
   }

   9 thành

   function prepareObject[obj] {
       obj.connect[{
         // ...
       }]
       obj.use[{
         // ...
       }]
       
       return undefined
   }

   00
3. một điều kiện mới. nếu thứ tự của

   function prepareObject[obj] {
       obj.connect[{
         // ...
       }]
       obj.use[{
         // ...
       }]
       
       return undefined
   }

   5 nhỏ hơn

   function addOneTo[a] {
       const result = a + 1
       
       return result
   }

   88. Đó không phải là trường hợp của chúng tôi, không cần phải đi vào chi tiết của điều kiện này
4. một điều kiện mới. nếu thứ tự của

   function prepareObject[obj] {
       obj.connect[{
         // ...
       }]
       obj.use[{
         // ...
       }]
       
       return undefined
   }

   5 bằng với

   function addOneTo[a] {
       const result = a + 1
       
       return result
   }

   88. Đó không phải là trường hợp của chúng tôi ở đây, không cần phải đi vào chi tiết của tình trạng này
5. Ta thấy câu lệnh

   function prepareObject[obj] {
       obj.connect[{
         // ...
       }]
       obj.use[{
         // ...
       }]
       
       return undefined
   }

   4 muốn trả về giá trị của biến

   function prepareObject[obj] {
       obj.connect[{
         // ...
       }]
       obj.use[{
         // ...
       }]
       
       return undefined
   }

   9. Hàm trả về

   function prepareObject[obj] {
       obj.connect[{
         // ...
       }]
       obj.use[{
         // ...
       }]
       
       return undefined
   }

   00 vì chúng ta đang ở trong phạm vi của điều kiện đầu tiên

Chúng tôi đã phải đọc [và hiểu] nhiều mã hơn mức cần thiết để đảm bảo rằng chúng tôi hiểu hàm này làm gì. Điểm 3 và 4 ở trên không cần thiết nhưng chúng ta vẫn phải ghi nhớ chúng. Chúng tôi cũng phải nhớ những gì đã xảy ra trước các bước này để biết những gì cần trả lại

Bây giờ, hãy thử viết lại mã của ______208 để có thể ra mắt càng sớm càng tốt, nhờ vào các đặc quyền của

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4. Sau đó, chúng ta sẽ thực hiện bài tập tương tự để so sánh độ phức tạp của mã

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

1

Chức năng mới này thực hiện chính xác điều tương tự. Nó có cùng chữ ký với chức năng đầu tiên. Bây giờ chúng ta thử đọc nhé [xin nhắc lại,

function addOneTo[a] {
    const result = a + 1
    
    return result
}

80 bằng

function addOneTo[a] {
    const result = a + 1
    
    return result
}

81 và

function addOneTo[a] {
    const result = a + 1
    
    return result
}

82 bằng

function addOneTo[a] {
    const result = a + 1
    
    return result
}

83]

1. Đầu tiên mình nhập hàm là có ngay điều kiện. nếu thứ tự của

   function prepareObject[obj] {
       obj.connect[{
         // ...
       }]
       obj.use[{
         // ...
       }]
       
       return undefined
   }

   5 vượt trội hơn so với

   function addOneTo[a] {
       const result = a + 1
       
       return result
   }

   88. Đó là, trong trường hợp của chúng tôi, vì vậy chúng tôi trả về giá trị 1

Đây là cách câu lệnh

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4 bị chặn và nó ngừng thực thi chức năng, trong trường hợp cụ thể của chúng tôi, phần còn lại của mã là "chết". Không có điểm nào trong việc đọc nó. Chúng ta không cần hiểu phần còn lại của hàm để hiểu nó làm gì trong trường hợp của chúng ta

Có rất ít thông số cần tính đến cho bộ não của chúng ta trong quá trình đọc. Đó là cách ít phức tạp hơn. Nó khiến tôi nghĩ về_______417 với Swift

Và nó đúng trong hầu hết mọi trường hợp. Cố gắng làm bài tập cho

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

18, ngay cả khi đó là điều kiện thử nghiệm cuối cùng, chức năng thứ hai ít phức tạp hơn

Làm cho câu lệnh

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

2 hữu ích hơn

Một cách khác để mã của

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

08 tốt hơn là sử dụng các từ khóa

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

2 và

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

32

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

3

Chúng tôi đang bắt chước hành vi của giải pháp với

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4 vì các điều kiện tiếp theo không được thực thi ngay khi tìm thấy điều kiện tương ứng

Tuy nhiên, giải pháp này không phù hợp vì tôi nghĩ rằng nó vẫn còn quá tải và cần tập trung hơn so với giải pháp hoàn trả mà chúng tôi đã đề cập ở trên

Một số bỏ qua vấn đề này bằng cách sử dụng

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4. Nhưng họ quên mục đích sử dụng

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

2

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

6

Trong trường hợp cụ thể này, bạn phải chọn. hoặc là

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

2, hoặc là

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4. Việc sử dụng

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4 hủy bỏ ưu điểm của việc sử dụng

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

2 và nó cũng làm phức tạp mã. Mã này không có mục đích nào khác ngoài việc cho thấy rằng người đã viết không thực sự hiểu sự tinh tế của câu lệnh

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

2 và câu lệnh

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4. đừng làm thế

Bằng cách chỉ sử dụng

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4 trong chức năng này, bạn xóa một vài từ. Nhưng quan trọng hơn, bạn xóa một phạm vi đầy đủ [trong

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

2 trước] và bạn xóa một mức độ thụt đầu dòng, như chúng ta đã thấy trước đây, giúp làm cho mã của bạn rõ ràng hơn và ít phức tạp hơn

Cá nhân tôi hiếm khi sử dụng

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

2 nữa trong mã của mình vì trong hầu hết các trường hợp, tôi có thể viết một hàm dễ đọc và dễ hiểu hơn bằng cách sử dụng riêng

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4

Đừng bắt tôi nói những gì tôi không nói, câu lệnh

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

2 và

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

32 là những cấu trúc rất hữu ích, tôi vẫn sử dụng chúng khi cần thiết. Quan điểm của tôi ở đây là chúng chỉ hữu ích trong một số trường hợp. Sẽ chẳng ích gì khi sử dụng chúng nếu có những từ khóa hoặc cấu trúc khác phù hợp nhất với tình huống của chúng ta. Lời khuyên này phù hợp với mọi thứ trong lập trình

Tóm lại, câu lệnh return [

function prepareObject[obj] {
    obj.connect[{
      // ...
    }]
    obj.use[{
      // ...
    }]
    
    return undefined
}

4] cho phép trả về một giá trị, được xác định hoặc không, cho ngữ cảnh gốc của hàm. Khi câu lệnh return được chạy, nó dừng việc thực thi hàm hiện tại

Nó giúp tối ưu hóa việc viết mã của chúng tôi để giảm số lượng phạm vi và các mức thụt đầu dòng khác nhau bên trong một hàm. Nó cũng giúp ngăn việc xử lý quá nhiều dữ liệu khi chúng tôi đang gỡ lỗi

Tham gia cùng hơn 100 nhà phát triển và doanh nhân và nhận thông báo hàng tuần về nội dung mới

Đi nào

Không có thư rác bao giờ. Hủy đăng ký trong một cú nhấp chuột bất cứ lúc nào

Nếu bạn có bất kỳ câu hỏi hoặc lời khuyên nào, vui lòng tạo bình luận bên dưới. Tôi sẽ thực sự vui mừng để đọc bạn. Ngoài ra nếu bạn thích bài viết này, đừng quên chia sẻ nó với bạn bè của bạn. Nó giúp rất nhiều