return trong JavaScript - itviec blog

Câu lệnh return trong JavaScript được sử dụng để kết thúc việc thực thi hàm để chỉ định giá trị cần trả về cho hàm đó. Hiểu rõ cách sử dụng return là một kỹ năng không thể thiếu đối với bất kỳ lập trình viên JavaScript nào.

Đọc bài viết sau để được tìm hiểu chi tiết hơn về:

  • Định nghĩa về câu lệnh return trong JavaScript
  • Cách sử dụng câu lệnh return phổ biến và một số câu hỏi liên quan về cách sử dụng câu lệnh return

Định nghĩa về return trong JavaScript

Câu lệnh return trong JavaScript được sử dụng để kết thúc quá trình thực thi hàm. Nếu được chỉ định, một giá trị nhất định sẽ được trả về cho function caller. Nếu biểu thức bị bỏ qua, giá trị undefined sẽ được trả về thay thế. 

function nameOfFunction(){
  return result // Giá trị cần được trả về
}

Các hàm có thể trả về như sau:

  • Giá trị nguyên thủy (chuỗi, số, boolean,…)
  • Các kiểu đối tượng (mảng, object, hàm,…)

Câu lệnh return sẽ không trả về một kết quả nào đó trên một dòng mới không sử dụng dấu ngoặc đơn. Đây là một điểm khá kỳ quặc của JavaScript và kết quả trả về sẽ không xác định. Do đó, bạn cần lưu ý sử dụng dấu ngoặc đơn khi trả về kết quả trên nhiều dòng. 

function foo() {
    return 
      1;
}

function boo() {
    return (
      1
    );
}

foo(); --> không xác định
boo(); --> 1

Câu lệnh return trong JavaScript cơ bản

Câu lệnh return được sử dụng để trả về kết quả của hàm sau khi nó hoàn tất việc thực thi. 

Ví dụ như, tổng của hai số được trả về dưới dạng câu lệnh return đơn giản:

function sum(firstNumber, secondNumber) {

return firstNumber + secondNumber;

}

console.log(sum(1, 2))

Qua ví dụ trên, với tổng của hai số 1 và 2 sẽ được thực thi với kết quả hiển thị là 3 trên trình duyệt.

Câu lệnh return trả về kết quả khác nhau

Hàm trong JavaScript không chỉ giới hạn hoặc bị ràng buộc để trả về các kiểu dữ liệu cụ thể, mà còn có thể trả về các kiểu dữ liệu khác nhau dựa trên logic được xác định bên trong hàm.

Ví dụ: Minh họa về kiểu dữ liệu trả về chuỗi, số và mảng

// trả về kiểu dữ liệu chuỗi
getStringValue() {
return "ITviec Blog";

}
// trả về kiểu dữ liệu số
getNumberValue() {
return 2015;
}

// trả về mảng
getArrayValue() {
return [1, 2, 3, 4, 5];
}

console.log(` returned value is ${getStringValue()} \n`);
console.log(` returned value is ${getNumberValue()} \n`);
console.log(` returned value is ${getArrayValue()} \n`);

Trong đó:

  • Câu lệnh return được sử dụng để trả về một giá trị cụ thể trong hàm, như value() là ITviec Blog, number() là 2015 và array() là 1,2,3,4,5.
  • Các câu lệnh console.log() được sử dụng để in ra giá trị trả về của các hàm.
  • Giá trị trả về của mỗi hàm được đặt trong dấu ngoặc nhọn {} và được chèn vào chuỗi bằng cách sử dụng toán tử ${}

Kết quả hiển thị như sau:

returned value is ITviec Blog  

returned value is 2015 

returned value is 1,2,3,4,5

Câu lệnh return trả về các đối tượng (object)

Các hàm JavaScript cũng cho phép bạn trả về kết quả đối tượng giúp ẩn dữ liệu và các hành vi liên quan.

Chẳng hạn như ví dụ sau, trả về đối tượng công ty bằng cách sử dụng câu lệnh return.

function createCompany(name, founded, location) {
  let company = {
 name: name,
 founded: founded,
 location: location,
  };
  return company;
}
let companyObject = createCompany('ITviec', 2013, 'Ho Chi Minh City');
console.log('Company', companyObject);

Trong đoạn mã này, câu lệnh return được sử dụng để trả về một đối tượng từ hàm Object(). Đối tượng này được tạo ra bên trong hàm và chứa các thuộc tính name, founded và location.

Khi thực hiện câu lệnh, đối tượng companyobject được in ra trên màn hình console bằng câu lệnh console.log(companyobject).

Kết quả hiển thị như sau:

{name: ‘ITviec’, founded: 2013, location: ‘Ho Chi Minh City’}

Câu lệnh return trả về một hàm (function)

JavaScript có khái niệm về các hàm bậc cao cho phép bạn truyền một hàm khác làm đối số bên trong một hàm hoặc trả về một hàm khác hoặc cả hai. Cơ chế này có thể được sử dụng để tạo một hàm có thể sử dụng với hành vi cụ thể và cho phép tạo ra closure. 

Ví dụ như sử dụng câu lệnh return để trả về một hàm như sau:

function getBlogFunction() {

return function () {

return "ITviec Blog";

};

}

console.log(getBlogFunction()());

Câu lệnh return thoát khỏi hàm trước thời hạn 

Câu lệnh return cũng có thể được sử dụng để thoát khỏi hàm sớm trong JavaScript trong những trường hợp điều kiện được đáp ứng. 

Ví dụ, sử dụng câu lệnh return để thoát khỏi hàm sớm dựa trên các điều kiện nhất định

function isDivisible(number)

{

if(number%2===0)

{

return true;

}

return false;

}

console.log(`Số chia hết cho 2:${isDivisible(107)}`)

console.log(`Số không chia hết cho 2:${isDivisible(24)}`)

Trong đoạn mã này, câu lệnh return được sử dụng để trả về một giá trị boolean (true hoặc false) từ hàm isDivisible(). Giá trị trả về phụ thuộc vào điều kiện kiểm tra số có chia hết cho 2 hay không. 

  • Hàm inDivisible()nhận một tham số number, câu lệnh điều kiện if bên trong kiểm tra xem number có chia hết cho 2 hay không.
  • Nếu số chia hết cho 2, kết quả trả về true. Nếu không chia hết cho 2, kết quả trả về false. 
  • Hai câu lệnh console.log() được sử dụng để in ra kết quả của hàm isDivisible() cho hai số khác nhau.

Kết quả hiển thị như sau:

Số chia hết cho 2: false

Số không chia hết cho 2: true

Câu hỏi thường gặp về return trong JavaScript

Một hàm JavaScript có thể có nhiều câu lệnh return không?

Câu trả lời là có thể. Một hàm có thể có nhiều câu lệnh return trong các khối có điều kiện, nhưng chỉ có một lệnh return được thực thi cho mỗi lệnh gọi hàm.

Sự khác biệt giữa return và console.log là gì?

Sự khác biệt dễ nhận thấy ở câu lệnh return và console.log chính là return trả về giá trị từ một hàm cho caller. Trong khi console.log hiển thị giá trị trong bảng điều khiển của trình duyệt mà không kết thúc quá trình thực thi hàm.

Có thể sử dụng return bên ngoài một hàm trong JavaScript không?

Câu trả lời là không. Bởi vì câu lệnh return chỉ có thể được sử dụng bên trong các hàm, nếu sử dụng bên ngoài một hàm sẽ dễ dẫn đến lỗi cú pháp. 

Tổng kết về return trong JavaScript

Câu lệnh return trong JavaScript là một trong những khái niệm cơ bản cho phép điều khiển luồng thực thi của hàm và trả về giá trị. Sử dụng câu lệnh return một cách linh hoạt giúp bạn viết các hàm và tối ưu hóa quá trình thực thi mã hiệu quả. 

Bạn có thể kết hợp theo dõi những bài viết cơ bản về các phương thức trong JavaScript sau: