Tìm hiểu về ES5 (ECMAScript 5) trong JavaScript

JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất hiện nay, được sử dụng rộng rãi trong phát triển web. Để đáp ứng nhu cầu ngày càng cao về tính năng và hiệu suất, ECMAScript – tiêu chuẩn của JavaScript – liên tục được cập nhật và cải tiến. Trong số các phiên bản, ECMAScript 5 (ES5) được coi là một cột mốc quan trọng, mang lại nhiều tính năng mới giúp code trở nên linh hoạt, tối ưu và dễ bảo trì hơn.

Ra mắt vào năm 2009, ES5 giới thiệu nhiều cải tiến như Strict Mode (chế độ nghiêm ngặt) để tăng cường bảo mật, các phương thức xử lý mảng mới giúp viết code ngắn gọn hơn, và hỗ trợ JSON để làm việc với dữ liệu dễ dàng hơn. Ngoài ra, ES5 còn cải thiện cách làm việc với object, function, cũng như bổ sung nhiều cơ chế giúp lập trình viên viết code chuẩn hơn và ít lỗi hơn.

Trong bài viết này, chúng ta sẽ tìm hiểu về ES5, các tính năng quan trọng của nó, cũng như lý do tại sao ES5 vẫn đóng vai trò quan trọng trong lập trình JavaScript hiện đại.

Giới thiệu về ECMAScript và ES5 trong JavaScript

Khái niệm về ECMAScript và mối liên hệ với JavaScript

ECMAScript là một tiêu chuẩn do tổ chức ECMA International thiết lập để định nghĩa cách hoạt động của JavaScript. JavaScript được phát triển bởi Netscape vào năm 1995 và sau đó được chuẩn hóa dưới cái tên ECMAScript vào năm 1997 thông qua ECMA-262.

• ECMAScript cung cấp các quy tắc về cú pháp, kiểu dữ liệu, toán tử, đối tượng và các tính năng khác mà JavaScript sử dụng.
• JavaScript là một ngôn ngữ lập trình tuân theo tiêu chuẩn ECMAScript, được các trình duyệt web hỗ trợ và mở rộng với các API riêng biệt như DOM (Document Object Model) và BOM (Browser Object Model).
• Các phiên bản ECMAScript (ES) liên tục được cập nhật để nâng cao hiệu suất, bảo mật và tính năng của JavaScript.

ECMAScript 5 (ES5) là gì?

ES5, hay ECMAScript 5, là phiên bản thứ năm của tiêu chuẩn ECMAScript, được phát hành vào năm 2009. Đây là một bản cập nhật quan trọng giúp cải thiện JavaScript theo nhiều cách:

• Hỗ trợ "Strict Mode" (Chế độ nghiêm ngặt): Giúp phát hiện lỗi sớm hơn, ngăn chặn một số hành vi không mong muốn của JavaScript.
• Cải tiến về Object và Property: Giới thiệu Object.defineProperty(), Object.create() để giúp kiểm soát đối tượng tốt hơn.
• Các phương thức mới cho mảng: Thêm nhiều phương thức hữu ích như forEach(), map(), filter(), reduce() giúp xử lý dữ liệu dễ dàng hơn.
• Hỗ trợ JSON: ES5 tích hợp JSON.parse() và JSON.stringify() để làm việc với dữ liệu JSON một cách chuẩn hóa.
• Cải thiện Function và Scope: Hỗ trợ tốt hơn về phạm vi biến, giúp lập trình viên tránh lỗi khi khai báo biến với var.

Lý do ra đời và vai trò của ES5 trong sự phát triển của JavaScript

Trước ES5, phiên bản ES3 (1999) là phiên bản phổ biến nhất, nhưng nó có nhiều hạn chế:

• Không có chế độ nghiêm ngặt để kiểm soát lỗi.
• Ít phương thức xử lý mảng, khiến việc thao tác dữ liệu phức tạp.
• Không có công cụ quản lý object và property một cách hiệu quả.

Để giải quyết những vấn đề này, ES5 ra đời với mục tiêu:
Cải thiện cú pháp và quản lý lỗi trong JavaScript.
Bổ sung nhiều tính năng giúp code dễ đọc, dễ bảo trì hơn.
Chuẩn hóa việc làm việc với JSON, giúp JavaScript tương thích tốt hơn với các hệ thống backend.
Cải thiện cách làm việc với object, giúp hướng đối tượng trong JavaScript mạnh mẽ hơn.

So sánh ES5 với ES3 và ES6

Nhìn chung, ES5 đóng vai trò là bước đệm quan trọng giữa ES3 và ES6, giúp JavaScript trở nên hiện đại hơn nhưng vẫn đảm bảo tương thích với các trình duyệt cũ.

Các tính năng mới trong ES5 trong JavaScript

ECMAScript 5 (ES5) giới thiệu nhiều cải tiến giúp JavaScript trở nên mạnh mẽ và dễ bảo trì hơn. Dưới đây là các tính năng quan trọng nhất của ES5.

Strict Mode (Chế độ nghiêm ngặt)

Để kích hoạt Strict Mode, bạn chỉ cần thêm 'use strict'; vào đầu script hoặc đầu một function:

'use strict';
function myFunction() {
    x = 10; // Lỗi: x chưa được khai báo
}
myFunction();

Nếu không có Strict Mode, JavaScript sẽ tự động tạo biến x trên phạm vi toàn cục. Nhưng với Strict Mode, chương trình sẽ báo lỗi vì x chưa được khai báo.

Tác dụng của Strict Mode

• Ngăn chặn việc vô tình tạo biến toàn cục.
• Không cho phép gán giá trị cho một thuộc tính chỉ đọc (read-only).
• Không thể khai báo hai tham số trùng tên trong function.
• Cấm sử dụng một số từ khóa tương lai (implements, interface, let, package, private, protected, public, static, yield).
• Bảo mật hơn, giúp tránh các lỗi phổ biến trong lập trình JavaScript.

Cải tiến Object Property

ES5 cung cấp nhiều phương thức mới để thao tác với object hiệu quả hơn.

Object.create() – Tạo object mà không cần constructor function

Trước ES5, để tạo object, ta thường sử dụng constructor function. ES5 giới thiệu Object.create() để kế thừa một object khác.

const person = {
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

const john = Object.create(person);
john.name = 'John';
john.greet(); // Output: Hello, my name is John

Object.defineProperty() và Object.defineProperties() – Kiểm soát chi tiết thuộc tính

Giúp định nghĩa các thuộc tính với quyền hạn cụ thể như có thể sửa đổi (writable), liệt kê (enumerable), hoặc có thể xóa (configurable) hay không.

const user = {};

Object.defineProperty(user, 'name', {
    value: 'Alice',
    writable: false, // Không thể thay đổi giá trị
    enumerable: true, // Có thể liệt kê khi duyệt object
    configurable: false // Không thể xóa thuộc tính
});

console.log(user.name); // Alice
user.name = 'Bob'; // Không thể thay đổi vì writable: false

Object.keys() – Lấy danh sách các thuộc tính của object

Trả về một mảng chứa tất cả các key của object.

const car = { brand: 'Toyota', model: 'Camry', year: 2020 };
console.log(Object.keys(car)); // ['brand', 'model', 'year']

Object.freeze() và Object.seal() – Kiểm soát quyền sửa đổi object

• Object.freeze(obj): Ngăn không cho thay đổi hoặc thêm/xóa thuộc tính.
• Object.seal(obj): Không cho thêm hoặc xóa thuộc tính, nhưng có thể thay đổi giá trị thuộc tính hiện có.

const obj = { name: 'Alice', age: 25 };

Object.freeze(obj);
obj.age = 30; // Không thay đổi được
obj.city = 'New York'; // Không thể thêm mới
console.log(obj.age); // 25

const obj2 = { name: 'Bob', age: 30 };
Object.seal(obj2);
obj2.age = 35; // Có thể thay đổi giá trị
obj2.country = 'USA'; // Không thể thêm mới
console.log(obj2.age); // 35

const numbers = [1, 2, 3, 4];
numbers.forEach(num => console.log(num)); 

const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16]

const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

const hasEven = numbers.some(num => num % 2 === 0); // true
const allPositive = numbers.every(num => num > 0); // true

const person = {
    name: 'John',
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

const greetJohn = person.greet.bind(person);
greetJohn(); // Output: Hello, my name is John

const jsonString = '{"name": "Alice", "age": 25}';
const user = JSON.parse(jsonString);
console.log(user.name); // Alice

const userObj = { name: 'Bob', age: 30 };
const jsonStr = JSON.stringify(userObj);
console.log(jsonStr); // '{"name":"Bob","age":30}'

try {
    JSON.parse("{ invalid json }"); // Lỗi cú pháp
} catch (error) {
    console.log("Lỗi khi phân tích JSON:", error.message);
}

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled);

var numbers = [1, 2, 3];
var doubled = numbers.map(function(num) {
    return num * 2;
});
console.log(doubled);

const greet = (name) => `Hello, ${name}`;
console.log(greet("Alice"));

var greet = function(name) {
    return "Hello, " + name;
};
console.log(greet("Alice"));

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.greet = function() {
    console.log("Hello, my name is " + this.name);
};

var john = new Person("John", 30);
john.greet();

// ES5 cách import module
var fs = require('fs');
fs.readFile('file.txt', 'utf8', function(err, data) {
    console.log(data);
});

var express = require('express');
var app = express();

app.get('/', function(req, res) {
    res.send('Hello World!');
});

app.listen(3000, function() {
    console.log('Server is running on port 3000');
});

var name = "John";
console.log(name);

let name = "John";
console.log(name);

$('#btn').click(function() {
    console.log("Button clicked");
});

document.getElementById('btn').addEventListener('click', () => {
    console.log("Button clicked");
});

import { sayHello } from "./utils.js";
sayHello();

var utils = require("./utils.js");
utils.sayHello();

var fs = require('fs');
fs.readFile('file.txt', 'utf8', function(err, data) {
    console.log(data);
});

import fs from 'fs';
fs.readFile('file.txt', 'utf8', (err, data) => {
    console.log(data);
});