Rate this post

Trong lập trình, việc thu nhận giá trị trả về và sử dụng nó để thực hiện các yêu cầu từ chương trình là một phần quan trọng. Trong nội dung của bài viết này, W3seo sẽ cùng các bạn khám phá về câu lệnh return trong JavaScript để hiểu rõ hơn về cách nó hoạt động và ứng dụng của nó trong quá trình lập trình.

Tóm tắt nội dung

Lệnh Return trong JavaScript

Câu lệnh return trong JavaScript đóng vai trò quan trọng khi chúng ta muốn kết thúc thực thi của một hàm và trả về một giá trị cụ thể. Khi một câu lệnh return được gọi trong một hàm, quá trình thực thi của hàm sẽ ngừng lại. Nếu đã được chỉ định, giá trị cung cấp sẽ được trả về trong cuộc gọi hàm. Trong trường hợp không có biểu thức nào được cung cấp, giá trị trả về sẽ là undefined.

return expression;

Các hàm có thể trả về một loạt các giá trị, bao gồm cả giá trị nguyên thủy như chuỗi, số, boolean, và các kiểu đối tượng như mảng, đối tượng, hay hàm.

Khi sử dụng câu lệnh return, tránh việc trả về bất kỳ giá trị nào trên một dòng mới mà không sử dụng dấu ngoặc đơn. Điều này có thể dẫn đến một hiểu lầm khó hiểu về JavaScript và kết quả có thể là undefined. Hãy luôn cố gắng sử dụng dấu ngoặc đơn khi trả về nội dung trên nhiều dòng.

// Không khuyến khích
function foo() {
    return 
      1;
}

// Khuyến khích
function boo() {
    return (
      1
    );
}

foo(); // --> undefined
boo(); // --> 1

Sử dụng câu lệnh return đúng cách giúp chúng ta viết mã nguồn dễ hiểu và tránh được những lỗi khó phát hiện.

Ví dụ về câu lệnh return trong JavaScript có thể được minh họa qua các hàm như sau:

// Hàm trả về bình phương của tham số số truyền vào x
function square(x) {
    return x * x;
}

// Hàm trả về tích của các đối số arg1 và arg2
function myFunction(arg1, arg2) {
    let result = arg1 * arg2;
    return result;
}

// Gán giá trị trả về của hàm vào một biến
function square(x) {
    return x * x;
}

let squared2 = square(2); // 4

Trong ví dụ trên, hàm square trả về bình phương của tham số được truyền vào. Hàm myFunction trả về tích của hai đối số được truyền vào. Sau đó, giá trị trả về của hàm square được gán cho biến squared2.

Nếu một hàm không có câu lệnh return rõ ràng, tức là thiếu từ khóa return, hàm đó sẽ tự động trả về giá trị undefined, như minh họa trong ví dụ cuối cùng.

// Hàm thiếu câu lệnh return, tự động trả về undefined
function square(x) {
    let y = x * x;
}

let squared2 = square(2); // undefined

Điều này nhấn mạnh sự quan trọng của câu lệnh return trong việc xác định giá trị trả về của một hàm trong JavaScript.

Vì sao nên sử dụng Return ?

Tái sử dụng: Hàm với return có thể được gọi lại nhiều lần trong chương trình, giúp tối ưu và tiết kiệm thời gian viết lại mã.
Dễ đọc và hiểu: Sử dụng return giúp cho mã của chúng ta dễ đọc và dễ hiểu hơn, vì chúng ta có thể dễ dàng xem giá trị trả về của hàm.
Giúp chức năng: Return có thể được sử dụng để trả về giá trị từ hàm, giúp chúng ta xử lý dữ liệu và tính toán trong chương trình.
Xử lý lỗi: Return có thể được sử dụng để xử lý các lỗi và thông báo lỗi trong chương trình.
Tái sử dụng hàm : Return có thể được sử dụng để trả về giá trị từ hàm và gán cho biến hoặc truyền vào hàm khác.
Nắm bắt giá trị trả về : Return giúp chúng ta nắm bắt giá trị trả về của hàm và xử lý tiếp.

Dừng hàm hoặc chương trình trong JavaScript bằng return

Dừng hàm hoặc chương trình trong JavaScript có thể được thực hiện thông qua câu lệnh return. Trong Javascript, câu lệnh return không chỉ kết thúc hàm mà còn trả về giá trị kết quả sau quá trình xử lý hàm. Do đó, sử dụng câu lệnh return trong JavaScript giúp kiểm soát luồng thực thi và có thể được áp dụng để dừng hàm hoặc chương trình.

Dưới đây là một ví dụ minh họa:

function sum(arr) {
  if (arr.length === 0) {
    return;
  } else {
    // Các dòng mã xử lý khác
  }
}

Trong ví dụ này, khi mảng được truyền vào hàm là một mảng rỗng, tức là không chứa bất kỳ phần tử nào, chương trình sẽ kiểm tra số lượng phần tử của mảng. Nếu mảng rỗng (số lượng phần tử bằng 0), chương trình sẽ thực hiện câu lệnh return. Vì không có dòng mã xử lý khác sau câu lệnh return và chỉ có dấu chấm phảy để kết thúc câu lệnh, chương trình hiểu rằng hàm này sẽ không được thực thi tiếp và quá trình thực thi của nó sẽ dừng lại.

Lưu ý khi sử dụng Return

Những lưu ý khi sử dụng Return trong JavaScript:

Return chỉ được sử dụng trong hàm: Nếu sử dụng return ngoài hàm, nó sẽ gây lỗi.
Return chỉ được sử dụng một lần trong một hàm: Nếu có nhiều return trong một hàm thì chỉ có return đầu tiên sẽ được thực thi.
Return sẽ kết thúc hàm: Mọi công việc sau return sẽ không được thực thi.
Return có thể trả về giá trị hoặc không: Có thể trả về giá trị hoặc không trả về giá trị.
Return có thể trả về các kiểu dữ liệu khác nhau: Có thể trả về các kiểu dữ liệu như số, chuỗi, mảng, đối tượng hoặc undefined.
Return chỉ trả về giá trị duy nhất : Return chỉ trả về một giá trị duy nhất, nếu muốn trả về nhiều giá trị thì cần sử dụng object hoặc array.

Ví dụ các trường hợp thường sử dụng Return trong JavaScript

Các ví dụ sử dụng Return trong JavaScript:

Tính diện tích hình tròn:

function calculateCircleArea(radius) {

  let area = Math.PI * radius * radius;

  return area;

}

let circleArea = calculateCircleArea(5);

console.log(circleArea); // Output: 78.53981633974483

Kiểm tra số chẵn:

function isEven(number) {

  if (number % 2 === 0) {

    return true;

  } else {

    return false;

  }

}

let result = isEven(4);

console.log(result); // Output: true

Tìm max trong một mảng:

function findMax(arr) {

  let max = arr[0];

  for (let i = 1; i < arr.length; i++) {

    if (arr[i] > max) {

      max = arr[i];

    }

  }

  return max;

}

let numbers = [3, 5, 2, 8, 1];

let maxNum = findMax(numbers);

console.log(maxNum); // Output: 8

Sử dụng return để trả về kết quả từ hàm: hàm sau trả về tổng của hai số được truyền vào:

function addNumbers(a, b) {

    return a + b;

}

console.log(addNumbers(4, 5)); // 9

Sử dụng return để chuyển đổi dữ liệu trong hàm:, hàm sau chuyển đổi một mảng thành một object:

function convertArrayToObject(arr) {

    return arr.reduce((acc, curr) => {

        acc[curr[0]] = curr[1];

        return acc;

    }, {});

}

console.log(convertArrayToObject([["name", "John"], ["age", 25]])); // {name: "John", age: 25}

Sử dụng return để dừng hàm khi điều kiện được thỏa mãn: hàm sau kiểm tra xem một số có phải là số chẵn không và trả về true hoặc false tùy thuộc vào kết quả kiểm tra:

function isEven(num) {

    if (num % 2 === 0) {

        return true;

    } else {

        return false;

    }

}

console.log(isEven(4)); // true

console.log(isEven(5)); // false

Các ví dụ trên chỉ là một số ví dụ cơ bản về cách sử dụng return trong JavaScript, có rất nhiều cách khác để sử dụng return để xử lý dữ liệu và thao tác trong hàm.

Kết luận

Return là một từ khóa quan trọng trong JavaScript, nó được sử dụng để trả về giá trị từ hàm và sử dụng giá trị đó để xử lý tiếp. Sử dụng Return chính xác sẽ giúp cho code dễ đọc và dễ quản lý hơn. Khi sử dụng Return, nên lưu ý về các lưu ý như chỉ sử dụng trong hàm, chỉ sử dụng một lần trong một hàm, Return sẽ kết thúc hàm và có thể trả về các kiểu dữ liệu khác nhau.

Cảm ơn bạn đã dành thời gian tham khảo bài viết. Tôi mong rằng bài viết trên sẽ giúp bạn có thể hiểu được Return là gì, và áp dụng nó vào các dự án thực tế của mình.

JavaScript

Return trong JavaScript

Lệnh Return trong JavaScript

Vì sao nên sử dụng Return ?

Dừng hàm hoặc chương trình trong JavaScript bằng return

Lưu ý khi sử dụng Return

Kết luận

Trả lời Hủy