Strict Mode trong JavaScript – Sử dụng Strict Mode như thế nào cho tốt?​

Bài viết được sự cho phép của tác giả Nguyễn Thành Nam

Có lẽ bạn đã từng thấy ‘use strict’ trong các dự án nhưng có thể bạn chỉ nhìn lướt và có thể bỏ qua nó. Cùng tìm hiểu bài viết này để hiểu rõ hơn về ‘use strict’ trong JavaScript nhé.

Giới thiệu về Strict Mode trong JavaScript​

Nếu bạn đã từng viết code JavaScript, chắc hẳn bạn đã gặp những đặc điểm đặc trưng và đôi khi kỳ quặc của ngôn ngữ này. Một trong những vấn đề phổ biến là các biến không được khai báo, dẫn đến các lỗi âm thầm trong code và khiến việc debug chúng trở nên khó khăn.

Trong JavaScript, các lập trình viên thường gặp phải những lỗi nhỏ và đôi khi tạo ra kết quả không mong muốn. Để giải quyết, ECMAScript 5 (ES5) đã giới thiệu một tính năng gọi là use strict. Chế độ strict mode thực hiện các kiểm tra bổ sung và áp đặt các quy tắc chặt chẽ hơn cho code, giúp phát hiện lỗi lập trình và có thể cải thiện hiệu suất. Đây là một cập nhật quan trọng cho ngôn ngữ và được các lập trình viên sử dụng rộng rãi vì nó giúp bắt lỗi và nâng cao chất lượng code.

Strict Mode là gì?​

Chế độ nghiêm ngặt (strict mode) là một tính năng đặc biệt trong JavaScript cho phép developer chủ động kích hoạt một bộ quy tắc và hạn chế nhất định, vốn dĩ không được áp dụng mặc định.

Strict mode giống như bạn có một trợ thủ, luôn để mắt đến những lỗi sai trong khi bạn code. Nó là một tập hợp đặc biệt các quy tắc giúp JavaScript cẩn thận hơn trong việc đọc và chạy code của bạn.

Strict mode giúp bắt lỗi tiềm ẩn, những lỗi mà thông thường có thể bị bỏ qua, chẳng hạn như sử dụng biến chưa khai báo hoặc định nghĩa hàm với tên tham số trùng lặp. Bằng cách bật strict mode, developer có thể viết code an toàn hơn, dễ bảo trì hơn và tương thích tốt hơn với các phiên bản JavaScript trong tương lai.

Tại sao nên sử dụng Strict Mode trong JavaScript?​

Lợi ích của Strict Mode trong JavaScript:

• Nâng cao tính bảo mật và dễ đọc code: Strict mode giúp bạn viết code an toàn hơn, ngăn chặn những lỗi tiềm ẩn. Code trở nên dễ hiểu hơn cho cả chính bạn và các developer khác khi đọc lại.
• Bắt lỗi lập trình phổ biến: Khi kích hoạt strict mode, bạn có thêm một “lá chắn” giúp phát hiện các lỗi lập trình thường gặp. Điều này dẫn đến code dự đoán được và hoạt động ổn định hơn.
• Tương thích tốt hơn với phiên bản JavaScript tương lai: Strict mode khuyến khích sử dụng, giúp code của bạn dễ dàng thích nghi với các phiên bản JavaScript mới.
• Loại bỏ cú pháp gây nhầm lẫn: Strict mode loại bỏ một số cú pháp có thể gây hiểu nhầm hoặc dẫn đến vấn đề khác. Điều này giúp code của bạn rõ ràng hơn và tránh những lỗi tiềm ẩn.
• Tối ưu hóa hiệu suất: Trong một số trường hợp, nhờ những thay đổi giúp tối ưu hóa việc thực thi code của engine JavaScript.

Kích hoạt Strict Mode trong JavaScript​

Để bật chế độ nghiêm ngặt (strict mode) trong JavaScript, bạn chỉ cần thêm dòng code sau vào đầu script hoặc hàm của mình:

'use strict';

Khi được đặt ở đầu tệp JavaScript hoặc ở đầu một hàm, câu lệnh này sẽ kích hoạt chế độ nghiêm ngặt, giúp phát hiện và ngăn chặn các lỗi tiềm ẩn.

Các lỗi và cách giải quyết của Strict Mode​

Trong JavaScript, strict mode giúp bắt các lỗi lập trình thông thường bằng cách chuyển chúng thành các lỗi runtime (lỗi xảy ra khi chương trình đang chạy). Tính năng này hoạt động như một biện pháp bảo vệ chống lại các lỗi âm thầm có thể dẫn đến hành vi không mong đợi.

Dưới đây là một số ví dụ về các lỗi mà strict mode bắt được:

• Biến không được khai báo: cố gắng gán giá trị cho một biến chưa được khai báo bằng var, let hoặc const sẽ gây ra lỗi ReferenceError. Điều này giúp phát hiện các vấn đề tiềm ẩn liên quan đến lỗi đánh máy hoặc các biến dự định khai báo nhưng bị bỏ sót.

'use strict';
x = 10; // ReferenceError: x is not defined

• Giới hạn tên tham số hàm: định nghĩa một hàm với các tên tham số trùng lặp (ví dụ: function func(a, a)) sẽ gây ra lỗi SyntaxError. Điều này giúp thực thi việc đặt tên tham số duy nhất, ngăn chặn nhầm lẫn và lỗi.

'use strict';
function func(a, a) {
  // SyntaxError: Duplicate parameter name not allowed in this context
  return a + a;
}

• Tên thuộc tính trùng lặp: định nghĩa nhiều thuộc tính có cùng tên trong một đối tượng hoặc danh sách tham số hàm sẽ gây ra lỗi SyntaxError. Điều này giúp ngăn chặn việc vô tình trùng lặp tên thuộc tính, có thể dẫn đến hành vi không mong đợi.

'use strict';
var obj = {
  prop: 1,
  prop: 2, // SyntaxError: Duplicate data property in object literal not allowed in strict mode
};

• Sử dụng eval trong phạm vi cục bộ: khi bạn sử dụng eval trong một phần cụ thể của code (chẳng hạn như bên trong một hàm) và bạn đang ở chế độ strict mode, nó sẽ tạo ra một loại “bong bóng” nơi bất kỳ biến mới nào bạn tạo bên trong eval đó không ảnh hưởng đến phần còn lại của code. Điều này có thể gây nhầm lẫn vì những thay đổi bạn thực hiện bên trong eval không được chuyển sang phần chính của code.

'use strict';
var x = 10;
function evalInLocalScope() {
  eval('var x = 20;');
  return x; // Returns 10 because eval creates its own scope in strict mode
}

• Cú pháp bát phân: các số bát phân (số bắt đầu bằng 0, ví dụ: 012) không được phép và sẽ gây ra lỗi SyntaxError. Điều này giúp ngăn chặn nhầm lẫn tiềm ẩn với các số thập phân và cải thiện độ rõ ràng của code.

'use strict';
var num = 012; //SyntaxError.

• Xóa thuộc tính không thể xóa: việc cố gắng xóa một thuộc tính không thể xóa (chẳng hạn như thuộc tính của các đối tượng tích hợp như Object.prototype) sẽ gây ra lỗi TypeError trong chế độ strict mode. Điều này ngăn chặn việc xóa các thuộc tính quan trọng một cách không mong muốn.

'use strict';
delete Object.prototype; // TypeError: Cannot delete property 'prototype' of function Object() { [native code] }

Các ví dụ trên đã minh họa một số cách mà strict mode trong JavaScript giúp bắt các lỗi thông thường và áp dụng các quy tắc nghiêm ngặt hơn, cuối cùng dẫn đến code đáng tin cậy và dễ bảo trì hơn.

Sử dụng Strict Mode như thế nào cho tốt?​

Cũng giống như bất kỳ công cụ nào khác, việc sử dụng strict mode một cách khôn ngoan và hiểu rõ các tác động của nó là rất quan trọng.

Khi nào sử dụng Strict Mode​

• Bật Strict Mode toàn cục: bật strict mode ở đầu các tập lệnh hoặc module của bạn là một cách thực hành tốt để đảm bảo toàn bộ code hưởng lợi từ các ưu điểm của nó. Điều này có thể được thực hiện bằng cách thêm 'use strict'; ở đầu tệp JavaScript hoặc hàm của bạn.

// Bật strict mode ở đầu script
'use strict';
const myScript = 'Strict mode activated globally!';

• Sử dụng Strict Mode trong hàm: nếu bạn chỉ muốn sử dụng strict mode trong các hàm cụ thể, bạn có thể bật nó ở đầu các hàm đó. Điều này cho phép bạn áp dụng strict mode một cách chọn lọc, nơi nó có lợi nhất.

function myFunctionScript() {
  // Bật strict mode cho hàm
  'use strict';
  function myInnerFunction() {
    return 'Strict mode activated in function!';
  }
  return myInnerFunction();
}

• Sử dụng Strict Mode trong Module: khi làm việc với các module JavaScript (module ES6), strict mode được bật tự động trong phạm vi của mỗi module. Điều này giúp duy trì một môi trường mã hóa nhất quán và có thể dự đoán trong mỗi module.

// Ví dụ về module ES6
export function myModuleFunction() {
  // Strict mode tự động bật trong các module ES6
  const message = 'Strict mode is active in this module!';
  return message;
}

Các lỗi tiềm ẩn cần tránh trong Strict Mode​

Mặc dù strict mode mang lại nhiều lợi ích, nhưng cũng có một số lỗi tiềm ẩn mà bạn cần lưu ý:

• Vấn đề tương thích:
  • Trình duyệt cũ: Không phải tất cả các trình duyệt, đặc biệt là các trình duyệt cũ. Điều này có thể gây ra các vấn đề tương thích.
  • Giải pháp: Đảm bảo kiểm tra code của bạn trong các môi trường và trình duyệt khác nhau để xác minh tính tương thích.
• Tính lan truyền:
  • Lan truyền: Khi bạn kích hoạt strict mode trong một script, tất cả code trong script đó sẽ chạy trong chế độ nghiêm ngặt. Điều này có thể gây vấn đề nếu các script khác trên trang không được dự định chạy trong strict mode.
  • Giải pháp: Hãy cẩn thận về nơi bạn kích hoạt strict mode. Nếu chỉ một phần code của bạn cần chạy trong strict mode, hãy kích hoạt nó một cách chọn lọc trong các hàm hoặc module cụ thể.
• Tất cả hoặc không có gì:
  • Phạm vi áp dụng: Strict mode áp dụng cho tất cả code trong phạm vi của nó. Nếu bạn chỉ muốn strict mode cho một số phần nhất định, bạn cần cấu trúc code của mình để tách biệt các phần đó.
  • Giải pháp: Tách biệt code chạy trong strict mode vào các hàm hoặc module khác nhau để duy trì kiểm soát về nơi áp dụng strict mode.

  // Strict mode trong một hàm
  function strictFunction() {
    'use strict';
    // Code trong hàm này chạy trong strict mode
  }
  
  // Code không dùng strict mode ở ngoài
  function nonStrictFunction() {
    // Code trong hàm này chạy không trong strict mode
  }
  

• Ảnh hưởng đến hiệu suất:
  • Ảnh hưởng nhỏ: Việc kiểm tra lỗi bổ sung và các hạn chế mà strict mode áp đặt có thể dẫn đến việc thực thi code chậm hơn một chút.
  • Giải pháp: Cân nhắc giữa lợi ích của việc phát hiện lỗi sớm và viết code dễ bảo trì hơn với tác động nhỏ đến hiệu suất. Thông thường, lợi ích của việc sử dụng strict mode lớn hơn so với lo ngại về hiệu suất.

Kết luận​

Điều quan trọng là cân nhắc các lợi ích của strict mode với các lỗi tiềm ẩn và sử dụng nó một cách thận trọng trong các dự án của bạn. Hiểu rõ được vấn đề này, bạn có thể tận dụng strict mode một cách hiệu quả để cải thiện chất lượng và độ tin cậy trong code JavaScript của mình.

Hy vọng qua bài viết này, bạn đã hiểu được thêm về Strict Mode.

Bài viết gốc được đăng tải tại blog.thanhnamnguyen.dev

Xem thêm:

• Các tips hiệu quả nhất khi làm việc với Javascript
• Kinh nghiệm xử lý câu lệnh điều kiện trong JavaScript
• Kinh nghiệm truy xuất giá trị trong object lồng nhau trong Javascript

Tìm việc làm IT mới nhất trên TopDev