Chỉ mục: Ký hiệu và từ khóa

Trong code JavaScript và TypeScript có sử dụng các ký hiệu như ?. và từ khóa như as. Các ký hiệu và từ khóa như vậy rất khó tìm kiếm trên Google, việc tra cứu ý nghĩa của chúng không hề dễ dàng.

Chỉ mục này giúp bạn tra cứu tên và ý nghĩa của các ký hiệu và từ khóa trong JavaScript và TypeScript. Khi đọc code mà gặp phải ký hiệu hoặc từ khóa không biết, hãy sử dụng đây làm manh mối để tra cứu ý nghĩa và cách sử dụng.

Các ký hiệu và từ khóa được đề cập ở đây bao gồm cả những thứ có nguồn gốc từ JavaScript (có thể sử dụng chung cho cả JavaScript và TypeScript) và những thứ chỉ có thể sử dụng trong TypeScript. Những thứ có nguồn gốc từ JavaScript được đánh dấu , những thứ riêng của TypeScript được đánh dấu .

Ký hiệu

! Toán tử phủ định logic (logical not operator)

Đảo ngược giá trị truthy và falsy.

! Non-null assertion (non-null assertion operator)

Khai báo rằng giá trị không phải null hoặc undefined, yêu cầu compiler hiểu giá trị là non-null.

ts
function firstChar(text: string | undefined) {
  // Không gây lỗi compile
  return text!.charAt(0);
}

ts
function firstChar(text: string | undefined) {
  // Không gây lỗi compile
  return text!.charAt(0);
}

! Toán tử definite assignment assertion (definite assignment assertion operator)

Ký hiệu để báo cho compiler biết rằng property của class đã được gán giá trị đúng kiểu như được chỉ định trong type annotation.

ts
class Example {
  public foo!: number;
}

ts
class Example {
  public foo!: number;
}

Hoặc là ký hiệu để báo cho compiler biết rằng biến đã được gán giá trị đúng kiểu như được chỉ định trong type annotation.

ts
let numbers!: number[];

ts
let numbers!: number[];

📄️ Definite assignment assertion

Definite assignment assertion là toán tử cho compiler TypeScript biết rằng biến hoặc property chắc chắn đã được khởi tạo.

!! Double Bang

Double bang không phải là toán tử được định nghĩa trong JavaScript, mà là idiom sử dụng hai toán tử phủ định logic liên tiếp. Được sử dụng để kiểm tra xem giá trị có truthy hay không.

!= Toán tử bất đẳng (inequality operator)

Kiểm tra xem giá trị bên trái và bên phải có khác nhau không. Nếu kiểu khác nhau sẽ được chuyển đổi kiểu rồi so sánh.

js
"1" != 1;
false

js
"1" != 1;
false

!== Toán tử bất đẳng nghiêm ngặt (strict inequality operator)

Kiểm tra xem giá trị bên trái và bên phải có khác nhau không, bao gồm cả kiểu.

js
1 !== "1";
true

js
1 !== "1";
true

" String literal (string literal)

Ký hiệu được sử dụng để bắt đầu và kết thúc string literal như "foo".

# Private property (private property)

Trong các property của class, những property bắt đầu bằng # sẽ là private.

js
class ExampleClass {
  #privateField;
  #privateMethod() {}
  static #PRIVATE_STATIC_FIELD;
  static #privateStaticMethod() {}
}

js
class ExampleClass {
  #privateField;
  #privateMethod() {}
  static #PRIVATE_STATIC_FIELD;
  static #privateStaticMethod() {}
}

$ Biến dollar (dollar variable)

Theo quy ước, đôi khi được sử dụng làm biến trong các thư viện như jQuery. Khi $ được sử dụng làm tên biến, trong JavaScript nó không có ý nghĩa đặc biệt nào ngoài việc là một biến.

$ Placeholder trong string (placeholder)

Ký hiệu được sử dụng để mở rộng biến trong template literal.

js
const name = "John";
console.log(`Hi, ${name}.`);
"Hi, John."

js
const name = "John";
console.log(`Hi, ${name}.`);
"Hi, John."

% Toán tử chia lấy dư (reminder operator)

Tính phần dư khi chia giá trị bên trái cho giá trị bên phải.

js
12 % 5;
2

js
12 % 5;
2

%= Gán chia lấy dư (reminder assignment)

Gán phần dư khi chia giá trị của biến bên trái cho giá trị bên phải vào biến bên trái.

& Bitwise AND (bitwise and)

Đặt bit thành 1 ở những vị trí mà cả giá trị bên trái và bên phải đều có bit là 1.

js
const a = 1;
00000001
const b = 5;
00000101
console.log(a & b);
00000001
// Output: 1

js
const a = 1;
00000001
const b = 5;
00000101
console.log(a & b);
00000001
// Output: 1

& Intersection type (intersection type)

Định nghĩa intersection type kết hợp nhiều kiểu.

ts
interface Swordsman {
  sword: string;
}
interface Wizard {
  magic: string;
}
type MagicalSwordsman = Swordsman & Wizard;

ts
interface Swordsman {
  sword: string;
}
interface Wizard {
  magic: string;
}
type MagicalSwordsman = Swordsman & Wizard;

📄️ Intersection type

Khái niệm này đối lập với union type. Nếu union type có nghĩa một trong các thì intersection type có nghĩa tất cả. Nói cách khác, nó chỉ việc kết hợp các định nghĩa object.

&= Gán bitwise AND (bitwise and assignment)

Gán kết quả bitwise AND của giá trị biến bên trái và giá trị bên phải vào biến bên trái.

js
let a = 1;
00000001
const b = 5;
00000101
a &= b;
console.log(a);
00000001
// Output: 1

js
let a = 1;
00000001
const b = 5;
00000101
a &= b;
console.log(a);
00000001
// Output: 1

&& Toán tử AND logic (logical and)

Nếu giá trị bên trái là truthy thì trả về giá trị bên phải. Nếu không thì trả về giá trị bên trái.

Đặc biệt khi cả hai là giá trị boolean, trả về true nếu cả hai đều true, ngược lại trả về false.

js
console.log(true && true);
true
console.log(true && false);
false
 
console.log(1 && "");
""

js
console.log(true && true);
true
console.log(true && false);
false
 
console.log(1 && "");
""

&&= Gán AND logic (logical and assignment)

Gán kết quả AND logic && của biến bên trái và giá trị bên phải vào biến bên trái.

js
let a = true;
let b = 1;
a &&= b;
 
console.log(a);
1

js
let a = true;
let b = 1;
a &&= b;
 
console.log(a);
1

' String literal (string literal)

Ký hiệu được sử dụng để bắt đầu và kết thúc string literal như 'foo'.

() Một phần của hàm thực thi ngay lập tức (IIFE: immediately invoked function expression)

Cách viết được sử dụng như một phần của IIFE (Immediately Invoked Function Expression) - hàm được thực thi ngay khi định nghĩa. Bản thân IIFE là một design pattern, và () trong đó là dấu ngoặc gọi hàm, không phải là toán tử hay cú pháp đặc biệt của JavaScript. IIFE đôi khi được gọi là "hàm thực thi ngay lập tức".

js
(function () {})();
//              ^^
(function () {})();
//              ^^
(() => {})();
//        ^^

js
(function () {})();
//              ^^
(function () {})();
//              ^^
(() => {})();
//        ^^

* Toán tử nhân (multiplication operator)

Nhân giá trị bên trái với giá trị bên phải.

* Khai báo generator function (generator)

Ký hiệu được sử dụng khi khai báo generator function trả về object Generator.

js
function* numberGenerator() {
  yield 1;
  yield 2;
  yield 2;
}

js
function* numberGenerator() {
  yield 1;
  yield 2;
  yield 2;
}

* Biểu thức yield* (yield)

Ký hiệu được sử dụng khi viết biểu thức ủy thác cho generator khác.

js
function* func1() {
  yield 123;
}
 
function* func2() {
  yield* func1();
  //   ^Ở đây
}

js
function* func1() {
  yield 123;
}
 
function* func2() {
  yield* func1();
  //   ^Ở đây
}

*= Gán nhân (multiplication assignment)

Gán kết quả nhân giá trị của biến bên trái với giá trị bên phải vào biến bên trái.

** Toán tử lũy thừa (exponentiation)

Lũy thừa giá trị bên trái với giá trị bên phải.

js
2 ** 3;
8

js
2 ** 3;
8

**= Gán lũy thừa (exponentiation assignment)

Gán kết quả lũy thừa giá trị của biến bên trái với giá trị bên phải vào biến bên trái.

+ Toán tử dương đơn nguyên

Chuyển đổi thành kiểu number.

js
+"1";
1

js
+"1";
1

+ Toán tử cộng (addition operator)

Cộng hai giá trị.

+ Toán tử nối string (concatenation operator)

Nối hai string.

+ Thêm modifier

Thêm các modifier như readonly hoặc ?.

Nếu không chỉ định gì thì + sẽ được thêm ngầm định, nên có lẽ không có cơ hội thực sự sử dụng +.

ts
type MyPartial<T> = {
  [k in keyof T]+?: T[k];
};
 
type MyReadonly<T> = {
  +readonly [k in keyof T]: T[k];
};

ts
type MyPartial<T> = {
  [k in keyof T]+?: T[k];
};
 
type MyReadonly<T> = {
  +readonly [k in keyof T]: T[k];
};

+= Gán cộng (addition assignment)

Gán kết quả cộng giá trị của biến bên trái với giá trị bên phải vào biến bên trái.

++ Increment (increment)

Toán tử cộng 1 vào biến.

js
let x = 3;
x++;
console.log(x);
4

js
let x = 3;
x++;
console.log(x);
4

, Phân cách argument của hàm

Ký hiệu được sử dụng để truyền nhiều argument cho hàm hoặc khai báo hàm nhận nhiều argument.

js
function plus(x, y, z) {
  return x + y + z;
}
plus(1, 2, 3);

js
function plus(x, y, z) {
  return x + y + z;
}
plus(1, 2, 3);

, Phân cách phần tử array

Ký hiệu được sử dụng khi khai báo array có nhiều phần tử.

js
const numbers = [1, 2, 3];

js
const numbers = [1, 2, 3];

, Phân cách property của object

Ký hiệu được sử dụng khi khai báo object có nhiều property.

js
const data = {
  property1: 1,
  property2: true,
  property3: "hello",
};

js
const data = {
  property1: 1,
  property2: true,
  property3: "hello",
};

, Phân cách phần tử của tuple type

Ký hiệu được sử dụng khi khai báo tuple type có nhiều phần tử.

ts
type Tuple = [number, string, boolean];

ts
type Tuple = [number, string, boolean];

, Toán tử phẩy (comma operator)

Đánh giá các biểu thức từ trái sang phải và trả về giá trị của biểu thức bên phải cùng.

js
let x = -1;
const a = (x++, x++, x > 0);
console.log(a);
true

js
let x = -1;
const a = (x++, x++, x > 0);
console.log(a);
true

- Toán tử âm đơn nguyên

Đảo dấu và chuyển đổi thành kiểu number.

js
-"1";
-1

js
-"1";
-1

- Toán tử trừ (subtraction operator)

Trừ hai giá trị.

- Xóa modifier

Xóa các modifier như readonly hoặc ?.

ts
type MyRequired<T> = {
  [k in keyof T]-?: T[k];
};
 
type Writable<T> = {
  -readonly [k in keyof T]: T[k];
};

ts
type MyRequired<T> = {
  [k in keyof T]-?: T[k];
};
 
type Writable<T> = {
  -readonly [k in keyof T]: T[k];
};

-= Gán trừ (subtraction assignment)

Gán kết quả trừ giá trị của biến bên trái cho giá trị bên phải vào biến bên trái.

-- Decrement (decrement)

Toán tử trừ 1 từ biến.

js
let x = 3;
x--;
console.log(x);
2

js
let x = 3;
x--;
console.log(x);
2

. Truy cập property (dot operator)

Ký hiệu được sử dụng khi truy cập property của object.

js
const object = { property: 123 };
object.property;
123

js
const object = { property: 123 };
object.property;
123

... Spread syntax (spread syntax)

Cú pháp để chuyển iterable object như array thành argument của hàm.

js
function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));
6

js
function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));
6

Hoặc cú pháp để mở rộng iterable object như array thành các phần tử của array.

js
const numbers = [1, 2, 3];
const newNumbers = [0, ...numbers, 4];
console.log(newNumbers);
[ 0, 1, 2, 3, 4 ]

js
const numbers = [1, 2, 3];
const newNumbers = [0, ...numbers, 4];
console.log(newNumbers);
[ 0, 1, 2, 3, 4 ]

Hoặc cú pháp để mở rộng các property của object.

js
const object = { x: 1, y: 2 };
const newObject = { ...object, z: 3 };
console.log(newObject);
{ x: 1, y: 2, z: 3 }

js
const object = { x: 1, y: 2 };
const newObject = { ...object, z: 3 };
console.log(newObject);
{ x: 1, y: 2, z: 3 }

... Rest syntax (rest syntax)

Cú pháp để nhận các argument còn lại của hàm như một array.

js
function func(a, b, ...rest) {
  return rest;
}
console.log(func(1, 2, 3, 4, 5));
[ 3, 4, 5 ]

js
function func(a, b, ...rest) {
  return rest;
}
console.log(func(1, 2, 3, 4, 5));
[ 3, 4, 5 ]

Hoặc cú pháp để lấy các phần tử còn lại của iterable object như array.

js
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(rest);
[ 3, 4, 5 ]

js
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(rest);
[ 3, 4, 5 ]

Hoặc cú pháp để lấy các property còn lại của object.

js
const object = { a: 1, b: 2, c: 3, d: 4 };
const { a, b, ...rest } = object;
console.log(rest);
{ c: 3, d: 4 }

js
const object = { a: 1, b: 2, c: 3, d: 4 };
const { a, b, ...rest } = object;
console.log(rest);
{ c: 3, d: 4 }

/ Toán tử chia (division operator)

Chia giá trị bên trái cho giá trị bên phải.

/ Regular expression literal (regular expression literal)

Ký hiệu được viết trước và sau regular expression literal như /[0-9]+/.

/= Gán chia (division assignment)

Gán kết quả chia giá trị của biến bên trái cho giá trị bên phải vào biến bên trái.

// Comment một dòng (one line comment)

Ký hiệu biểu thị bắt đầu comment dòng.

/* Comment nhiều dòng (multiline comment)

Ký hiệu biểu thị bắt đầu comment nhiều dòng.

js
/*
 Comment
 */

js
/*
 Comment
 */

/** JSDoc

Theo quy ước, ký hiệu biểu thị bắt đầu documentation comment như JSDoc. Đây không phải là cú pháp của JavaScript hay TypeScript, mà là quy ước sử dụng comment nhiều dòng cho documentation.

: Một phần của object

Ký hiệu được sử dụng để biểu thị quan hệ key-value của property trong object.

js
const object = { a: 1, b: 2, c: 3, d: 4 };

js
const object = { a: 1, b: 2, c: 3, d: 4 };

: Một phần của toán tử ba ngôi (conditional operator)

Ký hiệu biểu thị phần else trong toán tử ba ngôi như a ? b : c.

: Type annotation (type annotation)

Ký hiệu được sử dụng cho type annotation của biến.

ts
const variable: number = 20;

ts
const variable: number = 20;

Hoặc ký hiệu được sử dụng cho type annotation của parameter và return type của hàm.

ts
function numberToString(x: number): string {
  return x.toString();
}

ts
function numberToString(x: number): string {
  return x.toString();
}

< Toán tử nhỏ hơn (less than operator)

Kiểm tra xem giá trị bên trái có nhỏ hơn giá trị bên phải không.

< Generics (generic)

Ký hiệu được sử dụng để bắt đầu type argument của generics.

ts
function func<T>(x: T) {}
const result = func<string>("hello");

ts
function func<T>(x: T) {}
const result = func<string>("hello");

📄️ Generics

Việc kết hợp giữa type safety và code reusability là một thách thức. Nếu cố gắng sử dụng cùng một đoạn code cho nhiều kiểu dữ liệu khác nhau, type safety sẽ bị hy sinh. Ngược lại, nếu tập trung vào type safety, bạn sẽ phải viết nhiều đoạn code tương tự nhau, khiến code reusability khó đạt được. Generics là tính năng được giới thiệu để giải quyết vấn đề này. Với generics, bạn có thể đồng thời đảm bảo type safety và code reusability.

< JSX

Ký hiệu xuất hiện ở đầu XML literal được gọi là JSX.

Hello.tsx
tsx
function Hello() {
  return <div>HELLO</div>;
}

Hello.tsx
tsx
function Hello() {
  return <div>HELLO</div>;
}

< Type assertion (type assertion)

Ký hiệu được sử dụng cho type assertion. Đây là cách viết khác của as.

ts
let someValue: unknown = "this is a string";
let strLength: number = (<string>someValue).length;

ts
let someValue: unknown = "this is a string";
let strLength: number = (<string>someValue).length;

<= Toán tử nhỏ hơn hoặc bằng (less than or equal)

Kiểm tra xem giá trị bên trái có nhỏ hơn hoặc bằng giá trị bên phải không.

<< Toán tử dịch bit trái (left shift operator)

Dịch bit của giá trị bên trái sang trái một số lượng bằng giá trị bên phải.

js
const a = 1;
00000001
const b = 3;
console.log(a << b);
00001000
// Output: 8

js
const a = 1;
00000001
const b = 3;
console.log(a << b);
00001000
// Output: 8

<<= Gán dịch trái (left shift assignment)

Gán kết quả dịch bit của giá trị biến bên trái sang trái một số lượng bằng giá trị bên phải vào biến bên trái.

js
let a = 1;
00000001
const b = 3;
a <<= b;
console.log(a);
00001000
// Output: 8

js
let a = 1;
00000001
const b = 3;
a <<= b;
console.log(a);
00001000
// Output: 8

= Toán tử gán (assignment)

Gán giá trị bên phải vào biến bên trái.

== Toán tử bằng (equality)

Kiểm tra xem giá trị bên trái và bên phải có bằng nhau không. Nếu kiểu khác nhau sẽ được chuyển đổi kiểu rồi so sánh.

js
"1" == 1;
true

js
"1" == 1;
true

=== Toán tử bằng nghiêm ngặt (strict equality)

Kiểm tra xem giá trị bên trái và bên phải có bằng nhau không, bao gồm cả kiểu.

js
"1" === 1;
false

js
"1" === 1;
false

=> Một phần của arrow function (arrow function)

Ký hiệu được viết giữa argument và body của arrow function.

js
const increment = (num) => num + 1;

js
const increment = (num) => num + 1;

> Toán tử lớn hơn (greater than)

Kiểm tra xem giá trị bên trái có lớn hơn giá trị bên phải không.

>= Toán tử lớn hơn hoặc bằng (greater than or equal)

Kiểm tra xem giá trị bên trái có lớn hơn hoặc bằng giá trị bên phải không.

>> Toán tử dịch bit phải (right shift)

Dịch bit của giá trị bên trái sang phải một số lượng bằng giá trị bên phải.

js
const a = 8;
00001000
const b = 3;
console.log(a >> b);
00000001
// Output: 1

js
const a = 8;
00001000
const b = 3;
console.log(a >> b);
00000001
// Output: 1

>>= Gán dịch phải (right shift assignment)

Gán kết quả dịch bit của giá trị biến bên trái sang phải một số lượng bằng giá trị bên phải vào biến bên trái.

>>> Toán tử dịch phải không dấu (unsigned right shift)

Dịch bit của giá trị bên trái sang phải một số lượng bằng giá trị bên phải. Bit dấu ở bên trái luôn là 0.

js
const a = -2;
11111111111111111111111111111110
const b = 3;
console.log(a >>> b);
00011111111111111111111111111111
// Output: 536870911

js
const a = -2;
11111111111111111111111111111110
const b = 3;
console.log(a >>> b);
00011111111111111111111111111111
// Output: 536870911

>>>= Gán dịch phải không dấu (unsigned right shift assignment)

Gán kết quả dịch bit của giá trị biến bên trái sang phải một số lượng bằng giá trị bên phải vào biến bên trái. Bit dấu ở bên trái luôn là 0.

? Một phần của toán tử ba ngôi (conditional operator)

Một phần của toán tử ba ngôi a ? b : c, ký hiệu được đặt ở cuối biểu thức điều kiện.

? Optional modifier (optional property)

Định nghĩa property của object là optional property.

ts
interface User {
  name: string;
  // name là bắt buộc
  age?: number;
  // age là tùy chọn
}
const user: User = { name: "taro" };

ts
interface User {
  name: string;
  // name là bắt buộc
  age?: number;
  // age là tùy chọn
}
const user: User = { name: "taro" };

Hoặc làm cho argument của hàm không bắt buộc.

ts
function func(x?: number) {}
func();
// Không có x cũng OK

ts
function func(x?: number) {}
func();
// Không có x cũng OK

?. Optional chaining (optional chaining)

Khi nguồn truy cập property là null hoặc undefined, trả về undefined mà không gây lỗi.

js
const user = null;
console.log(user.name);
Cannot read property 'name' of null
console.log(user?.name);
undefined

js
const user = null;
console.log(user.name);
Cannot read property 'name' of null
console.log(user?.name);
undefined

?? Nullish coalescing (nullish coalescing operator)

Khi giá trị bên trái là null hoặc undefined, trả về giá trị bên phải. Nếu không thì trả về giá trị bên trái.

js
console.log(undefined ?? 1);
1
console.log(2 ?? 1);
2

js
console.log(undefined ?? 1);
1
console.log(2 ?? 1);
2

??= Gán nullish coalescing (logical nullish assignment)

Chỉ khi giá trị của biến bên trái là null hoặc undefined mới gán giá trị bên phải vào biến bên trái.

js
const user1 = { name: undefined };
user1.name ??= "taro";
console.log(user1.name);
taro
 
const user2 = { name: "kaori" };
user2.name ??= "taro";
console.log(user2.name);
kaori

js
const user1 = { name: undefined };
user1.name ??= "taro";
console.log(user1.name);
taro
 
const user2 = { name: "kaori" };
user2.name ??= "taro";
console.log(user2.name);
kaori

@ Decorator (decorator)

Decorator là thứ thêm annotation vào class hoặc class member, ký hiệu được sử dụng khi dùng decorator.

[ Array literal (array literal notation)

Ký hiệu được sử dụng để bắt đầu array literal như [1, 2, 3].

[ Accessor (bracket notation)

Ký hiệu được sử dụng khi truy cập phần tử của array hoặc property của object.

js
const numbers = [1, 2, 3];
numbers[0];
1
const object = { a: 1, b: 2 };
object["a"];
1

js
const numbers = [1, 2, 3];
numbers[0];
1
const object = { a: 1, b: 2 };
object["a"];
1

[ Destructuring assignment của array (destructuring assignment)

Ký hiệu được sử dụng để bắt đầu destructuring assignment của iterable object như array.

js
const numbers = [1, 2, 3];
const [first, ...rest] = numbers;
// Destructuring assignment
console.log(first, rest);
1 [ 2, 3 ]
 
// Destructuring assignment
function func([first, ...rest]) {
  console.log(first, rest);
}
func([1, 2, 3]);
1 [ 2, 3 ]

js
const numbers = [1, 2, 3];
const [first, ...rest] = numbers;
// Destructuring assignment
console.log(first, rest);
1 [ 2, 3 ]
 
// Destructuring assignment
function func([first, ...rest]) {
  console.log(first, rest);
}
func([1, 2, 3]);
1 [ 2, 3 ]

[ Index signature (index signature)

Ký hiệu được sử dụng để bắt đầu index signature.

ts
type StringKeysAndStringValues = {
  [key: string]: string;
};

ts
type StringKeysAndStringValues = {
  [key: string]: string;
};

📄️ Index signature

Trong TypeScript, có trường hợp muốn chỉ định type của property mà không chỉ định tên field của object. Lúc này có thể sử dụng index signature. Ví dụ, object có tất cả property là type number được type annotation như sau.

[] Array type (array type)

Ký hiệu được sử dụng để biểu diễn array type.

ts
let names: string[];
type FooList = Foo[];

ts
let names: string[];
type FooList = Foo[];

\ Escape sequence trong string (escaping character)

Ký hiệu được sử dụng để bắt đầu escape sequence trong string.

js
const lineBreak = "\n";

js
const lineBreak = "\n";

^ Bitwise XOR (bitwise xor)

Đặt bit thành 1 ở những vị trí mà bit của giá trị bên trái và bên phải khác nhau.

js
const a = 1;
00000001
const b = 5;
00000101
console.log(a ^ b);
00000100
// Output: 4

js
const a = 1;
00000001
const b = 5;
00000101
console.log(a ^ b);
00000100
// Output: 4

^= Gán bitwise XOR (bitwise xor assignment)

Gán kết quả bitwise XOR của giá trị biến bên trái và giá trị bên phải vào biến bên trái.

_ Ký tự phân cách số

Ký hiệu được sử dụng làm dấu phân cách hàng để tăng khả năng đọc số.

js
const hyakuman = 1_000_000;

js
const hyakuman = 1_000_000;

_ Biến underscore

Theo quy ước, đôi khi được sử dụng làm biến trong các thư viện như lodash. Khi _ được sử dụng làm tên biến, trong JavaScript nó không có ý nghĩa đặc biệt nào ngoài việc là một biến.

Ngoài ra, theo quy ước đôi khi được sử dụng làm nơi nhận biến không dùng. Ví dụ, trong callback function nhận 2 argument mà chỉ dùng argument thứ hai, có code sử dụng underscore cho argument thứ nhất.

js
[1, 2, 3].map((_, index) => {
  //  _ là giá trị phần tử như 1, 2, 3. Đặt _ để biểu thị không sử dụng nó
});

js
[1, 2, 3].map((_, index) => {
  //  _ là giá trị phần tử như 1, 2, 3. Đặt _ để biểu thị không sử dụng nó
});

` Template literal (template literal)

Ký hiệu được đặt trước và sau template literal (template string).

js
`string text`;

js
`string text`;

{ Block statement (block)

Ký hiệu được sử dụng kèm với các cú pháp như if statement hoặc for statement.

js
if (isOK) {
  // ...
} else {
  // ...
}

js
if (isOK) {
  // ...
} else {
  // ...
}

Block statement không đi kèm với cú pháp như if hoặc for đôi khi chỉ nhằm mục đích tách biệt scope của biến.

js
{
  const value = 1;
}
{
  const value = 2;
  // Khởi tạo với cùng tên biến như trên, nhưng không lỗi vì scope khác nhau.
}

js
{
  const value = 1;
}
{
  const value = 2;
  // Khởi tạo với cùng tên biến như trên, nhưng không lỗi vì scope khác nhau.
}

{ Destructuring assignment của object (destructuring assignment)

Ký hiệu được sử dụng cho destructuring assignment của object.

js
const object = { a: 1, b: 2, c: 3, d: 4 };
const { a, b, ...rest } = object; // Destructuring assignment
console.log(a, b, rest);
1 2 { c: 3, d: 4 }
 
// Destructuring assignment
function func({ a, b, ...rest }) {
  console.log(a, b, rest);
}
func(object);
1 2 { c: 3, d: 4 }

js
const object = { a: 1, b: 2, c: 3, d: 4 };
const { a, b, ...rest } = object; // Destructuring assignment
console.log(a, b, rest);
1 2 { c: 3, d: 4 }
 
// Destructuring assignment
function func({ a, b, ...rest }) {
  console.log(a, b, rest);
}
func(object);
1 2 { c: 3, d: 4 }

| Bitwise OR (bitwise or)

Đặt bit thành 1 ở những vị trí mà một trong hai giá trị bên trái hoặc bên phải có bit là 1.

js
const a = 0b010;
const b = 0b101;
console.log((a | b) === 0b111);
true

js
const a = 0b010;
const b = 0b101;
console.log((a | b) === 0b111);
true

| Union type (union type)

Định nghĩa union type kết hợp nhiều kiểu.

ts
type ID = string | number;
const id1 = "e29b41"; // OK
const id2 = 100; // OK
const id3 = true; // ERROR

ts
type ID = string | number;
const id1 = "e29b41"; // OK
const id2 = 100; // OK
const id3 = true; // ERROR

|= Gán bitwise OR (bitwise or assignment)

Gán kết quả bitwise OR của giá trị biến bên trái và giá trị bên phải vào biến bên trái.

|| Toán tử OR logic (logical or)

Nếu giá trị bên trái là truthy thì trả về nó. Nếu không thì trả về giá trị bên phải.

Đặc biệt với giá trị boolean, trả về true nếu ít nhất một cái là true, ngược lại trả về false.

js
console.log(true || false);
true
console.log(false || false);
false
 
console.log(false || "abc");
"abc"

js
console.log(true || false);
true
console.log(false || false);
false
 
console.log(false || "abc");
"abc"

||= Gán OR logic (logical or assignment)

Gán kết quả OR logic || của biến bên trái và giá trị bên phải vào biến bên trái.

js
let a = false;
let b = 1;
a ||= b;
console.log(a);
1

js
let a = false;
let b = 1;
a ||= b;
console.log(a);
1

~ Toán tử NOT bitwise (bitwise not)

Đảo ngược các bit.

js
const a = 1;
00000001
console.log(~a);
11111110
// Output: -2

js
const a = 1;
00000001
console.log(~a);
11111110
// Output: -2

~~ Double Tilde

Là idiom sử dụng hai toán tử NOT bitwise để loại bỏ phần thập phân. Đây không phải là toán tử trong JavaScript mà là quy ước. Kết quả của double tilde giống với Math.floor cho số dương và giống với Math.ceil cho số âm.

js
~~1.5;
1
Math.floor(1.5);
1
Math.ceil(1.5);
2
 
~~-1.5;
-1
Math.floor(-1.5);
-2
Math.ceil(-1.5);
-1

js
~~1.5;
1
Math.floor(1.5);
1
Math.ceil(1.5);
2
 
~~-1.5;
-1
Math.floor(-1.5);
-2
Math.ceil(-1.5);
-1

Từ khóa

as Type assertion (type assertion)

Từ khóa được sử dụng cho "type assertion" để ghi đè kiểu mà TypeScript compiler đã suy luận.

as const Const assertion (const assertion)

Khai báo giá trị hardcode trong biến là literal type của nó và làm cho nó chỉ đọc.

ts
let hello = "hello";
     
let hello: string
let bye = "bye" as const;
    
let bye: "bye"
const wolf = { caniformia: "Wolf" };
       
const wolf: {
    caniformia: string;
}
const fox = { caniformia: "Fox" } as const;
      
const fox: {
    readonly caniformia: "Fox";
}

ts
let hello = "hello";
     
let hello: string
let bye = "bye" as const;
    
let bye: "bye"
const wolf = { caniformia: "Wolf" };
       
const wolf: {
    caniformia: string;
}
const fox = { caniformia: "Fox" } as const;
      
const fox: {
    readonly caniformia: "Fox";
}

const const

Khai báo hằng số có block scope. Không thể gán lại hoặc khai báo lại trong scope.

get Getter (get)

Khi property của object được tham chiếu, hàm tương ứng được gọi.

js
const exam = {
  scores: [50, 70, 90, 80, 100, 60],
  get best() {
    return Math.max(...this.scores);
  },
};
 
console.log(exam.best);
100

js
const exam = {
  scores: [50, 70, 90, 80, 100, 60],
  get best() {
    return Math.max(...this.scores);
  },
};
 
console.log(exam.best);
100

in Toán tử in (in operator)

Toán tử trả về true nếu property có trong object.

js
const book = { name: "Survival TypeScript" };
console.log("name" in book);
true
console.log("price" in book);
false

js
const book = { name: "Survival TypeScript" };
console.log("name" in book);
true
console.log("price" in book);
false

in Cú pháp for-in

Cú pháp for-in để lặp qua các enumerable property của object.

js
const drink = { name: "Coffee", price: 500 };
for (const property in drink) {
  console.log(property);
}

js
const drink = { name: "Coffee", price: 500 };
for (const property in drink) {
  console.log(property);
}

in Mapped Types

in xuất hiện trong Mapped Types.

ts
type MappedType = {
  [key in "foo" | "bar"]: string;
};

ts
type MappedType = {
  [key in "foo" | "bar"]: string;
};

📄️ Mapped Types

Với index type, bạn có thể tự do thiết lập bất kỳ key nào khi gán giá trị, nhưng khi truy cập phải kiểm tra undefined mỗi lần. Nếu format input đã được xác định rõ ràng, bạn có thể cân nhắc sử dụng Mapped Types.

is Một phần của type assertion function (user-defined type guard)

Từ khóa được sử dụng trong phần type annotation của return type của type assertion function dùng cho type guard.

ts
function isDuck(animal: Animal): animal is Duck {
  return animal.legs === 2;
}

ts
function isDuck(animal: Animal): animal is Duck {
  return animal.legs === 2;
}

keyof Toán tử kiểu keyof (keyof)

Toán tử kiểu trả về tên property từ kiểu object dưới dạng kiểu.

n Bigint literal (bigint literal)

Ký hiệu biểu thị số là bigint literal.

js
100n; // bigint 100

js
100n; // bigint 100

typeof Toán tử typeof (typeof)

Trả về string biểu thị kiểu của giá trị được cho.

js
console.log(typeof 123);
"number"

js
console.log(typeof 123);
"number"

typeof Toán tử kiểu typeof (typeof)

Toán tử trích xuất kiểu từ biến.

set Setter (set)

Khi property của object bị thay đổi, hàm tương ứng được gọi.

js
const prize = {
  latest: "",
  history: [],
  set winner(winner) {
    this.latest = winner;
    this.history.push(winner);
  },
};
 
prize.winner = "Stanislas Wawrinka";
prize.winner = "Rafael Nadal Parera";
prize.winner = "Novak Đoković";
 
console.log(prize.latest);
"Novak Đoković"
console.log(prize.history);
[ 'Stanislas Wawrinka', 'Rafael Nadal Parera', 'Novak Đoković' ]

js
const prize = {
  latest: "",
  history: [],
  set winner(winner) {
    this.latest = winner;
    this.history.push(winner);
  },
};
 
prize.winner = "Stanislas Wawrinka";
prize.winner = "Rafael Nadal Parera";
prize.winner = "Novak Đoković";
 
console.log(prize.latest);
"Novak Đoković"
console.log(prize.history);
[ 'Stanislas Wawrinka', 'Rafael Nadal Parera', 'Novak Đoković' ]

void Toán tử void (void)

Làm cho return value thành undefined.

js
console.log(void 123);
undefined

js
console.log(void 123);
undefined

void Kiểu void (void)

Được sử dụng khi return value là undefined hoặc không có.

ts
function returnUndefined(num: number): void {
  if (num === 0) {
    return undefined;
  }
 
  return;
}

ts
function returnUndefined(num: number): void {
  if (num === 0) {
    return undefined;
  }
 
  return;
}

📄️ Hàm không có return value và kiểu void

Trong TypeScript, để type annotation cho return value của hàm không có return value, sử dụng kiểu void. Kiểu void là kiểu đặc biệt dùng để type annotation cho return value của hàm.