Cấu trúc và các kiểu dữ liệu trong Javascript

Các kiểu dữ liệu trong JavaScript định nghĩa ra sao?

Kiểu dữ liệu là một cách gọi phân loại các loại dữ liệu cho trình biên dịch hiểu những lập trình viên đang code cái gì và muốn sử dụng dữ liệu nào. Hầu hết các ngôn ngữ lập trình đều hỗ trợ nhiều kiểu dữ liệu khác nhau, điển hình như số thực, số nguyên hay Boolean.

Kiểu dữ liệu trong JS có thể nói là khái niệm cực kỳ dễ hiểu và phù hợp cho người mới học lập trình bởi nó không đánh đó hay quá nhiều phương thức. Ví dụ, kiểu dữ liệu Boolean là dữ liệu nguyên thủy của Java, nó là chỉ trả về hai biến số là True hoặc False.

Các kiểu dữ liệu cơ bản trực thuộc JavaScript

Có nhiều thống kê về kiểu dữ liệu của JavaScript và theo mình tìm kiếm thì nó không đồng nhất.

Các kiểu dữ liệu cơ bản:
1. Boolean. true và false. VD: var bien = true;
2. null. Một từ khóa đạc biệt biểu thị giá trị null. Vì JavaScript là case-sensitive, null sẽ không giống với Null, NULL, hoặc bất kỳ biến thể khác.
3. undefined. Giá trị khai báo của biến là không xác định (như bài trước ta đã biết)
4. Number. Một số nguyên (integer) hoặc số thực dấu chấm động (floating point number) 42 hoặc 3.14159.
5. BigInt. Một số nguyên với giá trị rất lớn. VD: 9007199254740992n.
6. String. Strings là một chuỗi gồm một hoặc nhiều ký tự (chữ cái, số, ký hiệu). Các chuỗi hữu ích ở chỗ chúng đại diện cho dữ liệu văn bản. Ví dụ: var char = "Ngày sinh của tôi là 01/01/2000";.
7. Symbol (mới trong ECMAScript 6). Một kiểu dữ liệu mà các giá trị của nó là duy nhất và bất biến (chúng ta sẽ nói đến nó sau).

Các kiểu dữ liệu trong JS có 6 kiểu cơ bản:

Number và BigInt

Hay còn gọi là kiểu số, nó không phân biệt kiểu nguyên hay không nguyên mà là các số bất kỳ loại nào, cụ thể là dùng được cho cả integer và float. Vì không phân biệt giữa số nguyên và số thực nên có thể viết số nguyên dạng như nhau chấm hoặc không chấm, còn đối với số thập có thể viết dưới dạng <0.abc> hoặc <.abc>.

Về các phép toán tử:

Tương tự trong các ngôn ngữ lập trình khác, các phép tính toán trong JS đều có điểm đặc biệt khi kết hợp với các kiểu dữ liệu khác, điển hình như:

– Đối với phép cộng, khi cộng một kiểu số với một kiểu chuỗi sẽ trả kết quả là string hay còn được gọi là phép nối chuỗi.

– Đối với các loại phép tính khác như nhân, chia hay trừ thì giữa hai chuỗi có chứa số, JS sẽ chuyển đổi thành số cả chuỗi và thực hiện tính.

Một số giá trị đặc biệt cần lưu ý là <Infinity> và <NaN>:

– Infinity chính là biểu tượng “vô cực” trong toán học.

– NaN là viết tắt của Not and Number nghĩa là không phải một số.

Cùng để khai báo dữ liệu dạng số. Tuy nhiên Number bị giới hạn bởi giá trị an toàn từ -9007199254740991 đến 9007199254740991 (2 mũ 53 – 1). Ta có thể sử dụng Number.MAX_SAFE_INTEGER và Number.MIN_SAFE_INTEGER để xác định các giá trị an toàn này.

var x = Number.MAX_SAFE_INTEGER + 1;

var y = x + 1;

console.log(console.log(Number.MAX_SAFE_INTEGER);

// 9007199254740991

console.log(x);

// 9007199254740992

console.log(y);

// 9007199254740992

console.log(x === y);

// true

Như chúng ta thấy khi x và y vượt ngoài giá trị an toàn thì việc so sánh giữa các giá trị này cũng dẫn đến sai số.

BigInt cũng giống như Number trong một vài trường hợp, xong khác nhau lớn nhất giữa chúng là nó không thể sử dụng được dươi các phương thức của đối tượng Math và không thể sử dụng chung với các biến Number.

Để sử dụng BigInt dưới dạng Number bạn phải chuyển đổi dữ liệu và phải cẩn thận vì giá trị của BigInt lớn hơn mức an toàn của Number nên có thể dẫn đến sai số.

const theBiggestInt = 9007199254740991n;

const alsoHuge = BigInt(9007199254740991);

// 9007199254740991n

const hugeHex = BigInt("0x1fffffffffffff");

// 9007199254740991n

const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111");

// 9007199254740991n

1 2	`typeof` `1n;` `// bigint` `typeof` `BigInt('1') ===` `'bigint'` `// true`

Phần lớn trong các trường hợp thông thường chúng ta ít khi phải sử dụng đến BigInt, nếu như bạn cần tìm hiểu thêm về toán tử và so sánh các giá trị BigInt có thể xem ở đây.

String

Đây là kiểu chuỗi, gồm một hoặc nhiều ký tự và không có ký tự đơn riêng biệt.

Các chuỗi dữ liệu hoặc dữ liệu sẽ được đặt trong dấu <,> và sử dụng phép <+> để nối các chuỗi lại với nhau.

Lưu ý rằng, tuy trong một số ngôn ngữ lập trình đều có một loại ký tự đặc biệt cho ký tự đơn, chẳng hạn trong ngôn ngữ C nó được <char>, nhưng các kiểu dữ liệu trong JS liên quan đến chuỗi thì chỉ có một loại: <string>. Chuỗi này có thể chỉ bao gồm một hoặc nhiều ký tự.

string là kiểu dữ liệu dạng chuỗi các ký tự. Trong các ứng dụng thực tế, để người dùng cuối hiểu được nội dung thì việc giao tiếp giữa ứng dụng và người dùng phải thông qua ngôn ngữ tự nhiên tức là chuỗi và các ký tự.

Chính vì thế dữ liệu dạng string là vô cùng quan trọng.

Việc khai báo biến sử dụng kiểu dữ liệu này thì giá trị khai báo sẽ được đặt trong dấu nháy đơn '' hoặc nháy kép "".

var string_text = 'string text';

var string_text_2 = "string text";

var string_text_3 = "中文 español deutsch English हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 தமிழ் עברית";

Thông thường để ghép các chuỗi hay để in ra chuỗi và biến chúng ta sẽ sử dụng phép toán + để nỗi chuỗi.

var string = "Đây là giá trị của a: ";

var a = 10;

console.log(string + "Không xác định");

// Đây là giá trị của a: Không xác định

console.log(string + a);

// Đây là giá trị của a: 10

Từ ECMAScript 2015 có thêm một cách khai báo nữa là Template literals (Template strings) cho phép bạn sử dụng các string dưới dạng các biểu thức nhúng. Việc khai báo giá trị sẽ được đặt trong dấu ``.

Bạn hoàn toàn có thể gán biến nhanh vào chuỗi bằng cách sử dụng ${ biến } và có thể sử dụng các toán tử tính toán, so sánh… ở bên trong ${}.

var a = 5;

var b = 10;

console.log(`Giá trị của biểu thức bằng ${a + b} không bằng ${2 * a + b}.`);

// Giá trị của biểu thức bằng 15 không bằng 20.

Có một điều chú ý rằng khi thực hiện phép toán cộng + một string (giá trị này có thể convert sang number) với một number sẽ trả về dữ liệu là string trong khi các phép toán khác lại trả về kết quả number.

var x = '100';

var y = 10;

console.log(x +y);

// 10010

console.log(typeof(x+y));

// string

console.log(x-y);

// 90

console.log(x-y);

// number

Boolean

Boolean hay còn gọi là Bool được ứng dụng nhiều trong các trường hợp rẽ nhánh bởi nó là kiểu logic chỉ trả về 2 giá trị là true (đúng) và false (sai). Bản thân nó được sử dụng chủ yếu trong các phép so sánh liên quan đến logic toán học hay thuật toán nào đó. VD:

var khoa_cua = true; //Đã khóa cửa

if (khoa_cua) {

console.log('Phải mở khóa mới vào được nhà!!!');

} else {

console.log('Vào nhà thôi!!!');

}

// Vì 'khoa_cua = true' nên câu lệnh if sẽ chạy điều kiện 'đúng'

// Kết quả console.log: Phải mở khóa mới vào được nhà!!!

Null

Null có nghĩa là giá trị rỗng hoặc giá trị không tồn tại, nó có thể được sử dụng để gán cho một biến như là một đại diện không có giá trị.

var bien = null;

console.log(bien);

// null

Có một điều lạ là khi sử dụng typeof để xác định kiểu dữ liệu của giá trị null sẽ trả về kết quả object.

var bien = null;

console.log(typeof(bien));

// object

Undefined

Kiểu dữ liệu thể hiện biến chưa được có hay gán giá trị nào.

Undefined có nghĩa là không xác định. Trong javascript, khi bạn khai báo một biến nhưng chưa gán giá trị cho nó, giá trị của biến đó sẽ là undefined.

var bien;

console.log(bien);

// undefined

undefined và null đều biểu thị giá trị rỗng của biến nhưng chúng khác nhau về kiểu dữ liệu, vì thế khi so sách 2 biến có giá trị undefined và null chúng ta phải chú ý.

var bien_undefined;

var bien_null = null;

bien_undefined == bien_null; // true

bien_undefined === bien_null; // false

Đối tượng Object

Javascript object

Object là kiểu đối tượng thuộc các kiểu dữ liệu trong JS, đặc biệt, đối tượng ở đây chỉ đối tượng trong thực tế như một chiếc xe đạp, một cái áo,…

Đối tượng được chia làm 2 phần gồm có thuộc tính và phương thức. Đây là kiểu dữ liệu phức hợp và được ứng dụng nhiều nhất bởi tính linh hoạt mạnh mẽ trong việc xử lý dữ liệu.

Object là kiểu dữ liệu rất quan trọng trong JavaScript, nó thường được sử dụng để lưu trữ dữ liệu dưới dạng các từ khóa và chỉ mục.

Chúng ta có thể dùng hàm typeof() để kiểm tra kiểu dữ liệu của biến.

var myvalue = true;

console.log(typeof(myvalue)); // Boolean

var myNull = null;

console.log(typeof(myNull)); // null

var x;

console.log(typeof(x)); // undefined

var num = 1;

console.log(typeof(num)); // Number

var num_bigint = 9007199254740991n;

console.log(typeof(num_bigint)); // BigInt

var my_string = "Hôm nay, ngày 01/01/1900 là sinh nhật của một ai đó";

console.log(typeof(my_string)); // String

Trong JS, kiểu dữ liệu này là một thực thể độc lập và để định nghĩa đặc tính nó còn phải phụ thuộc các thuộc tính vốn có.

Đối tượng trong JS là tập hợp cặp <khóa – giá trị> tương tự như hashtable trong các ngôn ngữ lập trình khác:

– Object là đối tượng và nó tập hợp các thuộc tính của đối tượng.

– Thuộc tính là một cặp <khóa – giá trị> có chứa tên và giá trị tương ứng.

– Tên là một giá trị tồn tại duy nhất và có thể bị thêm vào một chuỗi, đồng thời có thể trỏ đến giá trị khác.

– Giá trị tương ứng là bất kỳ giá trị nào bao hàm cả đối tượng khác hoặc hàm hay liên kết với tên object.

Cách tạo kiểu dữ liệu phức hợp Object trong JS

Tạo đối tượng <khóa – giá trị>

Bạn có thể khai báo đối tượng trong JavaScript theo 3 cách:

– Áp dụng khóa {}

– Áp dụng khóa <new Object( )>

– Áp dụng phương thức static

Tiếp nhận và thiết đặt thuộc tính (Get and Set Properties)

Sau khi tạo ra đối tượng rỗng trong JS ở bước đầu, chúng ta cần thêm thuộc tính vào đối tượng trống để nó hoàn thiện bằng cách sử dụng các tình truy cập.

Lưu ý về các thuộc tính hợp lệ sẽ bao gồm chữ cái, ký tự, số,… có thể liên kết thành một chuỗi nhưng không được sử dụng các từ chuyên dụng như function, var hay return,…

Cách viết tắt dễ dàng để thiết lập thuộc tính như sau:

let hello;

let world;

// Old way

const obj = {

hello: hello,

world: world

}

// Modern way

const obj = {

hello,

world,

}

Để sử dụng thuộc tính được tính toán, hãy dùng một biến hoặc một biểu thức làm tên thuộc tính và đặt nó trong dấu [].

Khi bạn tạo sai thuộc tính của đối tượng có thể xóa với từ khóa <delete>.

Sử dụng hàm this để tham chiếu đối tượng

Trong những mã lệnh thông thường, <this> được dùng để đề cập đối tượng mà nó được định nghĩa.

Ví dụ, bạn muốn nêu đề cập giới thiệu tên của bản thân, hãy sử dụng lệnh sau:

const obj = {

username: ‘Thanh’ ,

hello() {

console.log(`My name is ${this.username}`)

}

Những lưu ý đối với kiểu dữ liệu phức hợp Object

Setter và Getter

Mỗi một thuộc tính của đối tượng còn được thiết lập bằng hàm setter hoặc getter.

Nếu bạn dùng setter, nó được gọi qua toán tử gán giá trị cho nó, hàm được định nghĩa bằng cách cho thêm lệnh <set>.

Ngược lại, nếu dùng getter thì chỉ được gọi truy cập lấy giá trị thuộc tính và được định nghĩa bằng cách cho thêm lệnh <get>.

Trong trường hợp cần định nghĩa setter hay getter trong hàm tạo đối tượng thì bạn chỉ cần theo nguyên tắc thêm một thuộc tính vào đối tượng có sẵn với lệnh <Object.defineProperty>.

Những Object trong JS là kiểu tham chiếu

Nghĩa là chúng tồn tại hai hay nhiều đối tượng không bao giờ bằng nhau, thậm chí có cùng thuộc tính, khi và chỉ khi so sánh với chính nó thì kết quả trả về mới là True.

Phương thức Constructor

Đây là phương thức đặc biệt dùng để khởi tạo một Object và được tạo trong <Class>.

Cú pháp như sau: constructor([arguments]) { … }

Hơn hết, chỉ có một phương thức duy nhất tên là constructor ở trong class, nếu bạn để nhiều hơn một phương thức trong class thì sẽ gây ra lỗi SyntaxError. Nếu phương thức constructor không được chỉ định thì constructor mặc định sẽ được sử dụng.

Special Values

Hai loại value đặc biệt thuộc các kiểu dữ liệu trong JS là NaN và Infinity như đã nói đề cập ở kiểu Number. Cụ thể:

– Giá trị NaN được trả khi cho chạy lệnh tính không hợp lệ như string không có nội dung là số chia number, khi đó phép tính trả về sẽ là NaN. Bạn có thể sử dụng hàm <isNaN()> để kiểm tra một số có mang giá trị NaN hay không để có thể sửa chữa và sử dụng đúng cách.

– Giá trị Infinity gồm có dương vô cực và âm vô cực được trả lại khi kết quả biểu thức lớn vượt mức so với giới hạn của JS. Ngoài ra, kết quả vô cực cũng được trả khi chia một số cho 0 hoặc tính biểu thức có Infinity.

Những trick hữu hiệu để viết code nhanh liên quan tới Boolean

– Shorthand evaluate: bạn có thể viết nhanh bằng cách thêm “&&” vào giữa <condition> và <statement>, trick này sử dụng tốt và nhanh hơn vì JS tối ưu hóa phép so sánh AND.

– Default value: nếu bạn muốn kiểm tra dữ liệu nhập vào có tồn tại hay không thì bạn có thể viết code nhanh gọn với lệnh <function>.

Thật ra, trong các phép so sánh logic thì JS chuyển các phần thành boolean, vế trái sẽ trở thành lệnh trong điều kiện “có dữ liệu hay không”. Nếu true thì không cần so sánh vế phải mà toàn bộ phép OR sẽ được trả về vế trái, ngược lại, nếu false thì nghĩa là không có dữ liệu.

– Number hack trick: hai phép lệnh <and> và <or> cũng được sử dụng với các số theo cách tương tự boolean. Nếu vế trái là true thì trả về vế phải, nếu vế trái false thì trả về vế trái.

Biến dữ liệu thuộc các kiểu dữ liệu trong JS

Biến trong JavaScript có thể hiểu là những thùng xốp có tên, bạn có thể đặt dữ liệu vào các “thùng chứa” đó để tham khảo dữ liệu sau này bằng cách đặt tên cho nó.

Biến của JS được lưu ở đâu trong tiến trình

Hiểu nôm na về biến, ta có thể hình dung được các biến JavaScript được lưu trong bộ nhớ của tiến trình trình duyệt hay có thể hiểu là lưu trong phần Ram mà trình duyệt đang dùng.

Hướng dẫn khai báo biến

Tương tự với các ngôn ngữ lập trình khác, để máy chủ hiểu được lập trình viên đang muốn sử dụng các biến để làm gì với các dữ liệu, bạn phải khai báo biến. Để khai báo có thể sử dụng:

– <const> dùng khai báo hằng số và giá trị bất biến trong suốt chương trình

– <let> khai báo biến có thể truy cập được trong các trường bao quanh được xác định bằng cặp {}

– <var> dùng khai báo các biến có thể truy cập ở phạm vi hàm số hoặc toàn cục bên ngoài.

Quy tắc đặt tên biến của JS

– Phải là các chữ không dấu, viết hoa hoặc viết thường, các chữ số bao gồm từ 0- 9, có dấu gạch dưới (_) và kí hiệu $.

– Tên biến bắt đầu là chữ hoặc (_), bắt đầu bằng số sẽ lỗi.

– Không sử dụng các từ định danh, từ dành riêng của các chức năng hay các lệnh thuộc JavaScript làm tên.

– Các tên cũng có phân biệt chữ thường và chữ hoa.

Phạm vi của biến

Trong JavaScript có 2 loại phạm vi cần nắm, đó là biến cục bộ hay local scope và biến toàn cục.

Như đã đề cập trong phần hướng dẫn khai báo biến, biến toàn cục global scope được khai báo bên ngoài hàm và có thể được truy cập hoàn toàn từ ngoại hàm.

Ngược lại, đối với biến cục bộ local scope được khai báo trong nội tại một hàm, cùng một tên biến có thể khai báo ở các hàm khác nhau, và chắc chắn rằng, biến cục bộ chỉ được phép truy cập từ nội bộ trong hàm. Nếu bạn cố gắng truy cập ngoài hàm, hệ thống sẽ trả về kết quả lỗi “undefined variable”.

Qua bài viết này, Chúng tôi đã chia sẻ các kiểu dữ liệu trong JS, các biến thuộc hệ, các lưu ý và một số tips tricks để có thể code nhanh hơn. Hy vọng bài viết có thể giúp được một phần nào đó giải đáp các thắc mắc cơ bản về dữ liệu trong JS. Nhớ theo dõi thêm các bài viết mới của BẮC VIỆT nhé!

Kiến thức thiết kế web

Cấu trúc và các kiểu dữ liệu trong Javascript