Cách sử dụng use strict trong JavaScript

Trong JavaScript, chế độ nghiêm ngặt ("use strict") là một tính năng giúp lập trình viên viết mã an toàn hơn bằng cách áp dụng các quy tắc chặt chẽ hơn khi thực thi chương trình. Khi kích hoạt "use strict", JavaScript sẽ hạn chế các lỗi tiềm ẩn, chẳng hạn như khai báo biến không rõ ràng, sử dụng từ khóa bị cấm hoặc trùng lặp tham số trong hàm.

Việc sử dụng "use strict" rất quan trọng vì nó giúp phát hiện lỗi sớm, tránh những hành vi không mong muốn và đảm bảo mã nguồn hoạt động một cách nhất quán hơn. Ngoài ra, chế độ này còn giúp tối ưu hóa hiệu suất khi JavaScript Engine có thể thực thi mã nhanh hơn bằng cách loại bỏ các tính năng lỗi thời.

Bằng cách áp dụng "use strict", lập trình viên có thể viết mã chất lượng cao hơn, giảm thiểu lỗi và đảm bảo ứng dụng hoạt động ổn định hơn. Vậy "use strict" hoạt động như thế nào, và nó ảnh hưởng ra sao đến cách viết mã trong JavaScript? Hãy cùng tìm hiểu chi tiết trong bài viết này.

Khái niệm "use strict" là gì?

"use strict" là một chế độ trong JavaScript giúp thực thi mã với các quy tắc chặt chẽ hơn, nhằm tránh những lỗi tiềm ẩn và hạn chế các hành vi không mong muốn. Khi bật "use strict", JavaScript sẽ không cho phép sử dụng các cú pháp không an toàn và cảnh báo về những lỗi có thể gây ra bug trong mã.

Chế độ "use strict" được giới thiệu từ phiên bản ECMAScript 5 (ES5) để giúp lập trình viên viết mã tốt hơn và hạn chế những lỗi thường gặp trong JavaScript như:

• Khai báo biến mà không sử dụng var, let hoặc const.
• Gán giá trị cho các biến chỉ đọc hoặc không thể ghi (read-only).
• Sử dụng các từ khóa bị cấm hoặc không hợp lệ trong tương lai.
• Trùng lặp tham số trong một hàm.

Cách kích hoạt chế độ nghiêm ngặt trong JavaScript

Có hai cách để bật chế độ "use strict" trong JavaScript:

• Kích hoạt cho toàn bộ script
• Kích hoạt trong phạm vi một hàm cụ thể

Cách 1: Kích hoạt "use strict" cho toàn bộ script

Để bật chế độ nghiêm ngặt cho toàn bộ tệp JavaScript, bạn chỉ cần đặt dòng "use strict"; ở đầu tệp:

"use strict";

x = 10; // Lỗi: x chưa được khai báo
console.log(x);

Giải thích:

• Dòng "use strict"; đặt ở đầu tệp sẽ áp dụng cho toàn bộ mã JavaScript sau đó.
• Biến x bị lỗi vì chưa được khai báo với var, let hoặc const.

Cách 2: Kích hoạt "use strict" trong một hàm cụ thể

Nếu chỉ muốn áp dụng "use strict" trong một hàm mà không ảnh hưởng đến toàn bộ chương trình, bạn có thể đặt nó trong phạm vi hàm như sau:

function myFunction() {
    "use strict";
    y = 20; // Lỗi: y chưa được khai báo
    console.log(y);
}

myFunction(); 

x = 5; // Không có lỗi
console.log(x); // Output: 5

"use strict";
x = 5; // Lỗi: x chưa được khai báo
console.log(x);

function test() {
    x = 10; // Không có lỗi, x tự động trở thành biến toàn cục
    console.log(x);
}

test();
console.log(x); // Vẫn truy cập được x

"use strict";

function test() {
    y = 10; // Lỗi: y chưa được khai báo
    console.log(y);
}

test();

"use strict";

undefined = 5; // Lỗi: Không thể gán giá trị cho undefined
NaN = 123; // Lỗi: Không thể thay đổi giá trị của NaN
Infinity = 9; // Lỗi: Không thể thay đổi giá trị của Infinity

function sum(a, a) { // Không có lỗi
    console.log(a); // Tham số thứ hai sẽ ghi đè tham số thứ nhất
}

sum(1, 2); // Output: 2

"use strict";

function sum(a, a) { // Lỗi: Trùng lặp tham số
    console.log(a);
}

var obj = Object.freeze({ name: "Alice" }); // Đóng băng đối tượng, không thể thay đổi
delete obj.name; // Không có lỗi nhưng không xóa được
console.log(obj.name); // Output: Alice

"use strict";

var obj = Object.freeze({ name: "Alice" });
delete obj.name; // Lỗi: Không thể xóa thuộc tính không thể xóa

var public = "Hello"; // Không có lỗi nhưng không nên sử dụng
console.log(public);

"use strict";

var public = "Hello"; // Lỗi: 'public' là từ khóa bị cấm

// Không sử dụng "use strict"
function test() {
    x = 10; // Không có lỗi, nhưng x sẽ là biến toàn cục
    console.log(x);
}

test();
console.log(x); // Vô tình tạo ra một biến toàn cục không mong muốn

"use strict";

function test() {
    x = 10; // Lỗi: x chưa được khai báo
    console.log(x);
}

test();

class User {
    constructor(name) {
        this.name = name;
    }

    sayHello() {
        message = "Hello " + this.name; // Lỗi: message chưa được khai báo
        console.log(message);
    }
}

const user = new User("Alice");
user.sayHello();

"use strict"; 

var x = 10;
console.log(x);

var x = 10; // Không có lỗi

"use strict"; // Không có tác dụng vì không ở đầu file

y = 20; // Không báo lỗi (do "use strict" không có hiệu lực)
console.log(y);

function strictFunction() {
    "use strict";
    z = 30; // Lỗi: z chưa được khai báo
}

function normalFunction() {
    w = 40; // Không lỗi vì không có "use strict"
}

strictFunction();
normalFunction();
console.log(w); // 40

export function greet(name) {
    message = "Hello " + name; // Lỗi: message chưa khai báo
    console.log(message);
}

import { greet } from './module.js';

greet("Alice");