JavaScript ES6+ là gì? Những tính năng cần nắm trước khi học React

Khi bắt đầu xem code React, nhiều người mới khựng lại không phải vì React, mà vì cú pháp JavaScript lạ mắt: dấu =>, const { ... }, dấu ba chấm ..., dấu backtick. Đó không phải cú pháp riêng của React. Đó là JavaScript hiện đại, thường gọi chung là ES6+. Nắm nhóm này trước khi vào React sẽ giúp bạn đọc tài liệu, đọc code mẫu và hiểu dự án thật nhẹ nhàng hơn nhiều. Bài này điểm qua các tính năng dùng hằng ngày, mỗi cái một ví dụ ngắn, đối chiếu trực tiếp MDN.

ES6+ là gì

ES6 là tên quen thuộc của ECMAScript 2015, bản cập nhật lớn của ngôn ngữ JavaScript phát hành năm 2015. ECMAScript là tiêu chuẩn mà JavaScript tuân theo, mỗi năm ra một phiên bản mới (ES2016, ES2017, và tiếp tục). "ES6+" là cách gọi gộp ES6 cùng những bản sau nó: tập hợp các tính năng tạo nên JavaScript mà chúng ta viết ngày nay.

Phần lớn cú pháp trong bài đã ở mức "Baseline Widely available" theo MDN, tức được mọi trình duyệt hiện đại hỗ trợ từ lâu. Bạn dùng được ngay mà không cần lo tương thích trong đa số trường hợp.

Vì sao phải nắm ES6+ trước khi học React

React không phát minh ra cú pháp mới. Nó chỉ là một thư viện JavaScript, nên mọi dòng code React đều là JavaScript. Vấn đề là tài liệu chính thức và code mẫu của React mặc định bạn đã quen ES6+: component viết bằng arrow function, props lấy ra bằng destructuring, danh sách render bằng .map(), state cập nhật bằng spread. Nếu chưa quen những thứ này, bạn sẽ tốn năng lượng giải mã cú pháp thay vì học ý tưởng React.

Thứ tự hợp lý là chắc JavaScript cơ bản, thêm ES6+, rồi mới vào React. Dưới đây là các mảnh ghép quan trọng nhất.

let và const: khai báo biến đúng cách

Trước ES6, biến khai báo bằng var. Từ ES6 trở đi, mặc định dùng const, chỉ dùng let khi cần gán lại giá trị. Cả hai đều block-scoped, nghĩa là chỉ tồn tại trong khối { } chứa nó.

const không cho gán lại biến, nhưng vẫn cho phép thay đổi nội dung của object hay array bên trong:

const num = 42;
num = 99; // TypeError: gán lại const

const arr = [1, 2, 3];
arr = [4, 5, 6]; // TypeError: gán lại const
arr.push(4);     // OK, arr giờ là [1, 2, 3, 4]

Điểm cần nhớ: const khóa cái tên biến, không khóa cái giá trị. Quy tắc thực chiến cho người mới: mặc định const, khi nào trình báo lỗi vì cần gán lại thì đổi sang let. Gần như không còn lý do dùng var.

Arrow function: cú pháp hàm gọn

Arrow function là cách viết hàm ngắn gọn, xuất hiện ở khắp nơi trong code React. Dạng đầy đủ và các dạng rút gọn:

const add = (a, b) => a + b;   // 1 dòng, return ngầm
const square = x => x * x;      // 1 tham số, bỏ được dấu ngoặc
const log = () => {             // không tham số, thân hàm nhiều dòng
  console.log("chạy");
};

Hai điểm cần phân biệt: thân hàm một biểu thức thì return ngầm (không cần viết return); thân hàm có ngoặc nhọn { } thì phải return tường minh.

Arrow function còn một đặc tính quan trọng: nó không có this riêng, mà kế thừa this từ phạm vi bao quanh. Đây là lý do nó tiện trong callback:

const obj = {
  count: 10,
  doSomethingLater() {
    setTimeout(() => {
      this.count++; // 'this' vẫn là obj
      console.log(this.count); // 11
    }, 300);
  },
};

React dùng arrow function rất nhiều: định nghĩa component, viết event handler, và truyền callback vào .map().

Template literal: ghép chuỗi dễ đọc

Thay vì cộng chuỗi bằng dấu + rối mắt, template literal dùng dấu backtick ` ` `` và chèn biểu thức bằng `${ }:

const a = 5;
const b = 10;
console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);
// "Fifteen is 15 and not 20."

Backtick còn cho phép viết chuỗi nhiều dòng trực tiếp, không cần \n:

console.log(`dòng 1
dòng 2`);

Destructuring: lấy dữ liệu ra gọn gàng

Destructuring cho phép "bung" giá trị từ array hoặc object ra thành biến riêng. Với object:

const user = { id: 42, isVerified: true };
const { id, isVerified } = user;
console.log(id); // 42

Bạn đổi tên được khi lấy ra, và đặt giá trị mặc định:

const o = { p: 42, q: true };
const { p: foo, q: bar } = o; // đổi tên p thành foo
const { a: aa = 10 } = { a: 3 }; // mặc định khi thiếu
console.log(foo, aa); // 42 3

Với array thì lấy theo vị trí, và có mẹo hoán đổi biến quen thuộc:

const foo = ["one", "two", "three"];
const [red, yellow, green] = foo;
console.log(red); // "one"

let a = 1, b = 3;
[a, b] = [b, a]; // hoán đổi, a=3 b=1

Đây là một trong những tính năng React dùng nhiều nhất. Props của component gần như luôn được destructure ngay ở tham số, và useState trả về một array mà bạn destructure thành cặp giá trị, hàm cập nhật.

Spread và rest: cùng dấu ba chấm, ngược chiều nhau

Dấu ... làm hai việc trái nhau tùy ngữ cảnh. Spread "bung" một mảng hay object ra:

const parts = ["shoulders", "knees"];
const lyrics = ["head", ...parts, "and", "toes"];
// ["head", "shoulders", "knees", "and", "toes"]

const obj1 = { foo: "bar", x: 42 };
const merged = { ...obj1, y: 13 }; // { foo: "bar", x: 42, y: 13 }

Rest thì ngược lại, gom nhiều phần tử lại thành một:

function sum(...numbers) {
  return numbers.reduce((acc, n) => acc + n, 0);
}
sum(1, 2, 3); // 6

Lưu ý theo MDN: spread cho object tạo shallow copy (chỉ sao một tầng). Trong React, spread là cách phổ biến để cập nhật state bất biến (immutable), kiểu setUser({ ...user, name: "An" }) thay vì sửa trực tiếp object cũ.

map, filter, reduce: xử lý mảng kiểu hiện đại

Bộ ba này thay cho vòng for thủ công trong phần lớn tình huống. map biến đổi từng phần tử, filter lọc theo điều kiện, reduce gộp cả mảng về một giá trị:

const nums = [1, 2, 3, 4];

const doubled = nums.map((n) => n * 2);        // [2, 4, 6, 8]
const evens = nums.filter((n) => n % 2 === 0); // [2, 4]
const sum = nums.reduce((acc, n) => acc + n, 0); // 10

Trong đó reduce nhận callback (accumulator, currentValue) và một giá trị khởi tạo. Ví dụ cộng tổng theo đúng MDN:

const array = [1, 2, 3, 4];
const total = array.reduce((acc, cur) => acc + cur, 0);
console.log(total); // 10

React dựa vào .map() để render danh sách: bạn map một mảng dữ liệu thành một mảng phần tử giao diện. Nắm chắc map gần như là bắt buộc trước khi vẽ list trong React.

Module: import và export

ES6 chuẩn hóa cách chia code thành nhiều file. Một file export ra thứ nó muốn chia sẻ, file khác import vào dùng. Có hai kiểu: named và default.

// file square.js
export const name = "square";
export function draw(ctx) {
  // ...
}
export default function randomSquare() {
  // ...
}

// file khác
import randomSquare, { name, draw } from "./square.js";

Named export đặt trong ngoặc nhọn và phải đúng tên; default export không cần ngoặc và tự đặt tên khi import. Mỗi component React thường nằm trong một file riêng và được export ra theo đúng cơ chế này, nên hiểu import/export là điều kiện để làm việc với cấu trúc dự án thật.

Optional chaining: tránh lỗi khi dữ liệu vắng mặt

Truy cập property lồng nhau mà một tầng giữa bị null hoặc undefined sẽ làm văng lỗi. Toán tử ?. giúp dừng an toàn và trả về undefined thay vì lỗi:

const adventurer = { name: "Alice", cat: { name: "Dinah" } };

const dogName = adventurer.dog?.name;
console.log(dogName); // undefined, không văng lỗi

Nó dùng được cả với array và lời gọi hàm, và ghép rất hợp với toán tử nullish coalescing ?? để đặt giá trị mặc định:

function printCustomerCity(customer) {
  const city = customer?.city ?? "Unknown city";
  console.log(city);
}
printCustomerCity({ name: "Nathan", city: "Paris" }); // "Paris"
printCustomerCity({ name: "Carl" });                  // "Unknown city"

Khi làm việc với dữ liệu từ API trong React, ?. cứu bạn khỏi vô số lỗi kiểu "cannot read property of undefined" lúc dữ liệu chưa kịp về.

async/await: xử lý bất đồng bộ

async/await là cú pháp viết code bất đồng bộ (gọi API, đọc file) cho dễ đọc như code đồng bộ. Hàm gắn async luôn trả về một Promise; await tạm dừng hàm cho đến khi Promise xong:

async function getUser() {
  const res = await fetch("/api/user");
  const data = await res.json();
  return data;
}

Phần này đủ rộng để có bài riêng. Nếu muốn hiểu kỹ Promise, try/catch và lỗi quên await, đọc async/await và Promise.

Những tính năng React dùng nhiều nhất

Nếu phải ưu tiên trước khi vào React, hãy nắm chắc bốn thứ sau, vì chúng xuất hiện gần như mọi file:

• Arrow function: viết component và event handler.
• Destructuring: lấy props và bóc tách giá trị từ useState.
• Spread/rest: cập nhật state bất biến, gộp props.
• map: render danh sách ra giao diện.

Bốn cái còn lại (template literal, filter/reduce, module, optional chaining) thì gặp thường xuyên và đọc hiểu là đủ ở giai đoạn đầu.

Tóm lại

• ES6+ là JavaScript hiện đại từ ECMAScript 2015 trở đi, không phải cú pháp riêng của React.
• Mặc định dùng const, dùng let khi cần gán lại, bỏ var.
• Arrow function, destructuring, spread/rest và .map() là nhóm React dùng dày đặc nhất.
• Template literal, module, optional chaining và async/await là phần còn lại bạn sẽ gặp hằng ngày.

Nắm nhóm này trước, khi vào React bạn chỉ cần tập trung vào tư duy component và state, không phải vật lộn với cú pháp. Bước tiếp theo hợp lý là theo một Lộ trình học ReactJS có cấu trúc, và khi đã quen JavaScript thì cân nhắc thêm TypeScript cho người mới để code an toàn hơn lúc đi làm.

Nền JavaScript vững là chìa khóa. ES6+ xuất hiện ở mọi dòng code React thực tế. Nếu bạn muốn đi từ nền tảng JavaScript đến dự án React đi làm được, học theo lộ trình có cấu trúc thay vì ghép nhặt trăm video rời rạc, hãy xem khóa React PRO của HoleTex.

Bài liên quan

• Lộ trình học ReactJS từ con số 0 đến đi làm
• React là gì?
• TypeScript cho người mới
• async/await và Promise trong JavaScript

Nguồn tham khảo: MDN Web Docs - "const" (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const), "Arrow function expressions" (.../Reference/Functions/Arrow_functions), "Template literals" (.../Reference/Template_literals), "Destructuring" (.../Reference/Operators/Destructuring), "Spread syntax" (.../Reference/Operators/Spread_syntax), "Array.prototype.reduce()" (.../Reference/Global_Objects/Array/reduce), "JavaScript modules" (.../Guide/Modules), "Optional chaining" (.../Reference/Operators/Optional_chaining), "async function" (.../Reference/Statements/async_function). Đối chiếu 2026-06-07.