🚀Bài 02 — ES6+: JavaScript hiện đại - Lớp học Vi Tính - khóa học vi tính văn phòng

1. ES6+ là gì?

ES6 (ECMAScript 2015) là phiên bản lớn của JavaScript ra mắt năm 2015, bổ sung nhiều cú pháp và tính năng giúp code ngắn gọn, dễ đọc và dễ bảo trì hơn.

ES6+ là cách gọi chung các tính năng ES6 và những phiên bản JavaScript hiện đại ra đời sau đó.

Trong khóa học Laravel 13, chúng ta sẽ sử dụng ES6+ để:

Viết JavaScript trong ứng dụng Laravel.
Xử lý dữ liệu từ REST API.
Xây dựng giao diện bằng Vue.
Làm việc với React.
Tổ chức code thành các module độc lập.

2. Khai báo biến: `var`, `let`, `const`

JavaScript có ba từ khóa thường gặp để khai báo biến.

2.1. `var` — cách khai báo cũ

var name = 'Laravel';

name = 'JavaScript';

console.log(name);

Kết quả:

JavaScript

var có phạm vi hàm và một số hành vi về phạm vi khiến code lớn khó kiểm soát hơn. Trong code JavaScript hiện đại, chúng ta thường ưu tiên let và const.

2.2. `let` — biến có thể thay đổi

let count = 0;

count = 1;
count = 2;

console.log(count);

Kết quả:

Sử dụng let khi giá trị cần được gán lại.

Ví dụ:

let page = 1;

page = page + 1;

console.log(page);

Đây là cách có thể dùng khi quản lý trang hiện tại của chức năng phân trang.

2.3. `const` — không cho phép gán lại biến

const appName = 'Laravel 13';

console.log(appName);

Không thể gán lại:

const appName = 'Laravel 13';

appName = 'Vue';

Đoạn code trên sẽ phát sinh lỗi.

Tuy nhiên, nếu const chứa một object, các thuộc tính của object vẫn có thể thay đổi:

const user = {
    name: 'Pi',
    role: 'user'
};

user.role = 'admin';

console.log(user.role);

Kết quả:

admin

const ngăn việc gán lại biến, không làm cho object trở thành bất biến.

Quy tắc thực hành: ưu tiên const; dùng let khi cần gán lại; hạn chế sử dụng var trong code mới.

3. Arrow Function — hàm mũi tên

Trong JavaScript truyền thống, chúng ta viết hàm như sau:

function add(a, b) {
    return a + b;
}

console.log(add(5, 3));

Kết quả:

Với Arrow Function:

const add = (a, b) => {
    return a + b;
};

console.log(add(5, 3));

Nếu hàm chỉ có một biểu thức trả về, có thể viết ngắn hơn:

const add = (a, b) => a + b;

console.log(add(5, 3));

Nếu chỉ có một tham số, có thể bỏ cặp ngoặc đơn:

const double = number => number * 2;

console.log(double(5));

Kết quả:

Ứng dụng trong Laravel

Giả sử nhận danh sách bài viết từ API:

const posts = [
    { id: 1, title: 'Laravel 13' },
    { id: 2, title: 'JavaScript' },
    { id: 3, title: 'Vue' }
];

posts.forEach(post => {
    console.log(post.title);
});

Kết quả:

Laravel 13
JavaScript
Vue

Arrow Function được sử dụng rất thường xuyên trong các callback, xử lý mảng, Fetch API và Vue.

Lưu ý: Arrow Function không có this riêng như function thông thường. Vì vậy, không nên xem hai cách viết này là hoàn toàn tương đương trong mọi trường hợp.

4. Template Literal — chuỗi mẫu

Cách nối chuỗi cũ:

const name = 'Pi';
const age = 25;

const message = 'Xin chào ' + name + ', bạn ' + age + ' tuổi.';

console.log(message);

Cách hiện đại:

const name = 'Pi';
const age = 25;

const message = `Xin chào ${name}, bạn ${age} tuổi.`;

console.log(message);

Kết quả:

Xin chào Pi, bạn 25 tuổi.

Template Literal sử dụng dấu backtick ` và cú pháp ${...} để chèn biến hoặc biểu thức vào chuỗi.

Ví dụ với dữ liệu bài viết:

const post = {
    id: 10,
    title: 'Học JavaScript hiện đại'
};

const url = `/posts/${post.id}`;

console.log(url);

Kết quả:

/posts/10

Đây là cách viết thuận tiện khi tạo URL, thông báo và nội dung HTML.

5. Default Parameter — tham số mặc định

Giả sử một hàm chào hỏi:

function greeting(name) {
    return `Xin chào ${name}`;
}

console.log(greeting());

Kết quả sẽ là:

Xin chào undefined

Chúng ta có thể khai báo giá trị mặc định:

function greeting(name = 'bạn') {
    return `Xin chào ${name}`;
}

console.log(greeting());
console.log(greeting('Pi'));

Kết quả:

Xin chào bạn
Xin chào Pi

Arrow Function cũng hỗ trợ tham số mặc định:

const getPage = (page = 1) => page;

console.log(getPage());
console.log(getPage(3));

Kết quả:

1
3

Lưu ý: giá trị mặc định được sử dụng khi tham số nhận undefined, không phải mọi giá trị thiếu hoặc rỗng đều được thay thế.

6. Destructuring — phân rã dữ liệu

Destructuring giúp lấy dữ liệu từ object hoặc array một cách ngắn gọn.

6.1. Object Destructuring

Cách thông thường:

const user = {
    id: 1,
    name: 'Pi',
    email: 'pi@example.com'
};

const name = user.name;
const email = user.email;

console.log(name, email);

Cách dùng Destructuring:

const user = {
    id: 1,
    name: 'Pi',
    email: 'pi@example.com'
};

const { name, email } = user;

console.log(name, email);

Kết quả giống nhau.

Có thể đổi tên biến:

const user = {
    name: 'Pi'
};

const { name: userName } = user;

console.log(userName);

Kết quả:

Pi

6.2. Destructuring dữ liệu API

Giả sử Laravel trả về:

{
    "id": 1,
    "title": "Laravel 13",
    "status": "published"
}

JavaScript có thể lấy dữ liệu:

const post = {
    id: 1,
    title: 'Laravel 13',
    status: 'published'
};

const { id, title, status } = post;

console.log(id);
console.log(title);
console.log(status);

6.3. Array Destructuring

const colors = ['red', 'green', 'blue'];

const [first, second, third] = colors;

console.log(first);
console.log(second);
console.log(third);

Kết quả:

red
green
blue

Destructuring sẽ xuất hiện rất nhiều trong Vue và React, đặc biệt khi lấy dữ liệu từ object, props hoặc kết quả của hàm.

7. Spread Operator — toán tử trải

Spread Operator sử dụng dấu ... để trải các phần tử của array hoặc các thuộc tính của object trong những ngữ cảnh được hỗ trợ.

7.1. Sao chép array

const numbers = [1, 2, 3];

const newNumbers = [...numbers];

console.log(newNumbers);

Kết quả:

[1, 2, 3]

Có thể kết hợp nhiều array:

const first = [1, 2];
const second = [3, 4];

const result = [...first, ...second];

console.log(result);

Kết quả:

[1, 2, 3, 4]

7.2. Sao chép và cập nhật object

const user = {
    name: 'Pi',
    role: 'user'
};

const updatedUser = {
    ...user,
    role: 'admin'
};

console.log(updatedUser);

Kết quả:

{
    name: 'Pi',
    role: 'admin'
}

Object mới có các thuộc tính từ user, sau đó thuộc tính role được ghi đè.

7.3. Ứng dụng trong giao diện

const post = {
    id: 1,
    title: 'Laravel'
};

const updatedPost = {
    ...post,
    title: 'Laravel 13'
};

Spread Operator hữu ích khi tạo bản sao nông (shallow copy) và cập nhật dữ liệu. Nó không tự sao chép sâu các object lồng nhau.

8. Rest Parameter — gom các tham số

Rest Parameter cũng sử dụng dấu ..., nhưng có mục đích gom nhiều tham số còn lại thành một array.

function sum(...numbers) {
    return numbers.reduce((total, number) => total + number, 0);
}

console.log(sum(1, 2, 3));
console.log(sum(10, 20, 30, 40));

Kết quả:

6
100

Có thể phân biệt:

Spread: trải các phần tử hoặc thuộc tính.
Rest: gom các phần tử hoặc tham số còn lại.

Cùng ký hiệu ..., nhưng ý nghĩa phụ thuộc vào vị trí sử dụng.

9. Optional Chaining — truy cập an toàn

Giả sử dữ liệu người dùng có dạng:

const user = {
    name: 'Pi',
    address: {
        city: 'Ho Chi Minh City'
    }
};

console.log(user.address.city);

Nhưng nếu address không tồn tại:

const user = {
    name: 'Pi'
};

console.log(user.address.city);

JavaScript sẽ phát sinh lỗi vì user.address là undefined.

Sử dụng Optional Chaining:

console.log(user.address?.city);

Kết quả:

undefined

Ví dụ dữ liệu bài viết có thể không chứa thông tin tác giả:

const post = {
    id: 1,
    title: 'Laravel 13'
};

console.log(post.author?.name);

Optional Chaining giúp truy cập thuộc tính lồng nhau an toàn hơn.

Nó không thay thế việc kiểm tra dữ liệu hoặc xử lý lỗi API.

10. Nullish Coalescing — toán tử `??`

Giả sử API trả về số lượt xem:

const views = null;

const totalViews = views ?? 0;

console.log(totalViews);

Kết quả:

?? chỉ sử dụng giá trị mặc định khi biểu thức bên trái là null hoặc undefined.

Điểm khác biệt với ||:

const a = 0 || 100;
const b = 0 ?? 100;

console.log(a);
console.log(b);

Kết quả:

100
0

Vì 0 là giá trị hợp lệ nhưng được xem là falsy trong JavaScript.

Khi xử lý dữ liệu API, ?? hữu ích nếu chúng ta muốn giữ nguyên các giá trị như 0, false hoặc chuỗi rỗng.

11. Tổ hợp ES6+ trong một ví dụ thực tế

Giả sử chúng ta có danh sách bài viết:

const posts = [
    {
        id: 1,
        title: 'Laravel 13',
        views: 120
    },
    {
        id: 2,
        title: 'JavaScript hiện đại',
        views: 0
    },
    {
        id: 3,
        title: 'Vue',
        views: null
    }
];

Tạo hàm định dạng thông tin:

const formatPost = ({ id, title, views = 0 }) => {
    const totalViews = views ?? 0;

    return `Bài ${id}: ${title} - ${totalViews} lượt xem`;
};

posts.forEach(post => {
    console.log(formatPost(post));
});

Kết quả:

Bài 1: Laravel 13 - 120 lượt xem
Bài 2: JavaScript hiện đại - 0 lượt xem
Bài 3: Vue - 0 lượt xem

Ví dụ này kết hợp:

const để khai báo biến.
Arrow Function để viết hàm.
Destructuring để lấy dữ liệu.
Default Parameter để cung cấp giá trị mặc định khi thuộc tính bị thiếu.
Nullish Coalescing để xử lý null.
Template Literal để tạo chuỗi.
forEach() để duyệt danh sách.

Đây là phong cách JavaScript mà chúng ta sẽ thường xuyên sử dụng khi làm việc với dữ liệu Laravel API.

12. Thực hành trong Laravel 13

Mở file:

resources/js/app.js

Thêm đoạn code sau:

const posts = [
    { id: 1, title: 'Laravel 13', views: 100 },
    { id: 2, title: 'JavaScript ES6+', views: 50 },
    { id: 3, title: 'Vue', views: null }
];

const renderPost = ({ id, title, views }) => {
    const totalViews = views ?? 0;

    return `
        <li>
            <strong>${title}</strong>
            <span> - ${totalViews} lượt xem</span>
        </li>
    `;
};

const list = document.querySelector('#postList');

if (list) {
    list.innerHTML = posts.map(renderPost).join('');
}

Trong Blade, tạo vùng hiển thị:

<ul id="postList"></ul>

@vite(['resources/js/app.js'])

Khi trang được tải, JavaScript sẽ tạo danh sách bài viết và đưa vào phần tử postList.

Lưu ý bảo mật: ví dụ này dùng innerHTML để minh họa cách render HTML. Khi dữ liệu đến từ người dùng hoặc API có nội dung không đáng tin cậy, không nên chèn trực tiếp dữ liệu đó bằng innerHTML. Hãy sử dụng textContent, tạo DOM element pi toàn hoặc cơ chế render có xử lý escape phù hợp.

13. Bài tập cuối bài

Bài tập 1 — Khai báo biến

Tạo các biến:

appName có giá trị Laravel 13.
framework có giá trị Vue.
lesson có giá trị 2.

Sau đó in cả ba biến ra Console bằng Template Literal.

Bài tập 2 — Xử lý array

Cho dữ liệu:

const scores = [7, 8, 9, 10, 6];

Hãy viết Arrow Function tính tổng các điểm và in kết quả ra Console.

Bài tập 3 — Xử lý object

Cho dữ liệu:

const user = {
    id: 1,
    name: 'Pi',
    email: 'pi@example.com',
    role: 'user'
};

Hãy sử dụng Destructuring để lấy name và email, sau đó tạo chuỗi:

Xin chào Pi, email của bạn là pi@example.com

Bài tập 4 — Cập nhật bài viết

Cho dữ liệu:

const post = {
    id: 1,
    title: 'Laravel',
    views: 100
};

Tạo object mới bằng Spread Operator, đổi tiêu đề thành Laravel 13 và giữ nguyên object bpi đầu.

Bài tập 5 — Xử lý dữ liệu thiếu

Cho dữ liệu:

const post = {
    id: 1,
    title: 'Vue'
};

Sử dụng Optional Chaining và Nullish Coalescing để lấy tên tác giả, mặc định là Chưa có tác giả.

14. Tổng kết

Trong bài này, chúng ta đã học những cú pháp JavaScript hiện đại qupi trọng:

Tính năng	Công dụng
`let`, `const`	Khai báo biến
Arrow Function	Viết hàm ngắn gọn
Template Literal	Chèn biến vào chuỗi
Default Parameter	Thiết lập tham số mặc định
Destructuring	Lấy dữ liệu từ object/array
Spread Operator	Trải dữ liệu, tạo bản sao nông
Rest Parameter	Gom các tham số còn lại
Optional Chaining	Truy cập thuộc tính pi toàn hơn
Nullish Coalescing	Cung cấp giá trị mặc định cho `null`/`undefined`

Những kiến thức này là nền tảng để học Vue và React mà không phải ghi nhớ máy móc từng cú pháp.

Bài tiếp theo — Bài 03: Array & Object.

Chúng ta sẽ đi sâu vào map(), filter(), find(), reduce(), cách cập nhật dữ liệu và cách xử lý danh sách bài viết nhận từ Laravel REST API.

quay về MỤC LỤC

NTM Solutions

Lớp học Vi Tính

Bài đăng nổi bật

🚀 Laravel 12 (2026) — Từ PHP Core đến Full Stack📘

Thứ Hai, 12 tháng 10, 2026