, October 26, 2021

0 kết quả được tìm thấy

Kiểu dữ liệu, typeof, tham trị, tham chiếu trong JavaScript


  •   9 min reads
Kiểu dữ liệu, typeof, tham trị, tham chiếu trong JavaScript

Trong những phần trước, chúng ta đã tìm hiểu về khái niệm JavaScript là gì?, cách cài đặt môi trường cũng như cách sử dụng công cụ devtool cơ bản. Trong bài này, chúng ta sẽ cùng nhau bắt đầu đi vào phần đầu tiên và cũng là một trong những phần cơ bản cần phải nắm được khi chúng ta làm việc với ông thần JavaScript này nhé. Chúng ta bắt đầu thôi 😉

I. Các kiểu dữ liệu trong JavaScript

JavaScript về bản chất là một ngôn ngữ được nhập động, tức là kiểu dữ liệu của một biến phụ thuộc vào giá trị mà biến đó chứa. Nếu ta thay đổi giá trị hiện có của một biến thành giá trị có kiểu dữ liệu khác thì kểu dữ liệu của biến đó cũng thay đổi theo.

let a = 10;
typeof a; //--> number
a = '200lab';
typeof a; //--> string

Trong JavaScript, ta có hai kiểu dữ liệu chính là: kiểu dữ liệu nguyên thủy (Primitive data type) và kiểu dữ liệu object (Non-primitive data type).

1. Kiểu dữ liệu nguyên thủy (Primitive data type)

Bao gồm:

  • Number & bigInt: 0.5, 1, 2, ...
  • String: "200lab"
  • Boolean: true/false
  • Null
  • undefined
  • Symbol (ES6)

Number & Big Int

Đây là kiểu số, nó bao gồm cả số nguyên và số có dấu phẩy động (số thập phân)

let number = 123;
let dec = 0.1232;

Vậy BigInt là cái gì? Thì do giới hạn về mặt kỹ thuật nên một biến không thể lưu giá trị số nguyên vượt quá 2^53 - 1 = 900719925470991. Với những số vượt quá giới hạn trên, bạn chỉ cần dùng BigInt để lưu bằng cách thêm n ở cuối cùng là được nè.

let bigInt = 9007199254709912123n;

String

Đây là kiểu dữ liệu dạng chuỗi, dùng để lưu các giá trị ở dạng text. Ta có thể sử dụng cả dấu ngoặc kép "" hoặc dấu ngoặc đơn '' để tạo một giá trị chuỗi bất kỳ nhé.

let str_1 = "Welcome to 200lab";
let str_2 = 'Welcome to 200lab';

Trong JavaScript còn có dấu ` ` này, nó là một tính năng mở rộng, nó cho phép ta nhúng một một giá trị bất kỳ vào một chuỗi

let str_1 = '200lab';
let str_2 = `Welcome to ${str_1}`;
console.log(str_2); //--> 'Welcome to 200lab'

Boolean

Kiểu boolean có hai giá trị: true hoặc false. Nó thường được dùng để lưu giá trị yes/no hoặc 0/1

let isShow = true;
let isHidden = false;

Một cái hay ho trong JavaScript mà có thể các bạn rất ít gặp, đó là ta có thể lưu giá trị boolean như sau:

let isGreater = 9 > 3;  // true
let isLess = 6 < 3;   // false

Null và Undefined

Một số bạn sẽ thắc mắc "Vậy null với undefied nó khác nhau chỗ nào?" và đôi khi câu hỏi này cũng được một số nhà tuyển dụng hỏi với ứng viên cho vị trí Fresher JavaScript đấy, vì vậy các bạn cần lưu ý một chút nhé 😉

nullundefined về cơ bản thì cả hai bằng nhau về mặt giá trị, tuy nhiên chúng lại khác nhau về kiểu. (Trong JavaScript bạn có thể dùng typeof để kiểm tra kiểu dữ liệu)

null == undefined   //--> true
null === undefined  //--> false

typeof null 	 //--> object
typeof undefined //--> undefined

Khi bạn nhìn thấy kết quả, chắc chắn bạn sẽ thắc mắc rằng: "Ủa, tại sao typeof null cho ra kết quả là object kia mà sao lại bảo nó thuộc kiểu dữ liệu nguyên thủy 🤨? Vô lý thế 🙄".

Các bạn bình tĩnh, để mình giải thích 😁. Thực chất, ngay từ ban đầu xây dựng nên ngôn ngữ JavaScript này thì cha đẻ của nó, ông Crockford cùng đội ngũ phát triển đã vô tình tạo ra nó mà không nhận ra và thế là typeof nullobject ra đời.

Ok, vậy tại sao không chỉnh sửa lại nó sau khi đã nhận ra lỗi này? Chẳng hạn cho nó một kiểu dữ liệu mới chẳng hạn 🤔?.

Một điều bạn cần phải biết là có rất ít thời gian để hoàn thành phiên bản JavaScript đầu tiên nên việc xuất hiện quả bug như thế là điều không thể tránh khỏi.

Khi họ phát hiện ra thì mọi chuyện đã quá muộn, có quá nhiều người đã sử dụng nó. Do đó việc chỉnh sửa lại sẽ mang lại quá nhiều khó khăn - theo như ông Crockford đã nói:

"I think it is too late to fix typeof. The change proposed for typeof null will break existing code"

(Nếu bạn muốn biết thêm về quả bug này thì có thể đọc bài viết The history of "typeof null" tại đây nhé?)

Được rồi, chúng ta quay lại với nullundefined nào. Vậy làm sao để phân biệt hai đứa này?

Để phân biệt nullundefined thì ta có thể hiểu như sau:

null có nghĩa là rỗng, tức là không có gì cả (tuy nhiên rỗng ở đây khác với chuỗi rỗng '' nhé 😁) . Thường thì null được dùng cho object mà không có giá trị như mong đợi.

undefined có nghĩa là chưa xác định, tức chưa xác định được giá trị, undefined thường xuất hiện ở:

Biến đã được khai báo nhưng không khởi tạo giá trị

let a;
console.log(a); // --> undefined

Truy cập vào thuộc tính mà không có trong object

let animal = {species: 'cat'}
console.log(animal.longevity); //--> undefined

Truyền thiếu parameter vào function

function show(a, b) {
	console.log(a + ' and ' + b);
}
show(1); //-> 1 and undefined

Function không return hoặc return undefined

function show(a, b) {
	alert(a, b);
}
console.log(show(1, 2)); //undefined

Lưu ý: Bạn không thể truy cập vào các thuộc tính của null cũng như undefined đâu nhé.

function geProps(params) {
	return params.name;
}
getProps(null);      //--> TypeError
getProps(undefined); //--> TypeError

2. Kiểu dữ liệu object (Non-primitive data type)

Bạn có thể hiểu là kiểu dữ liệu nào mà không thuộc kiểu dữ liệu nguyên thủy (Primitive data type) trên thì đều thuộc kiểu object 😁.

Những kiểu dữ liệu thuộc kiểu object gồm: Object, Array object, Regular Expression, Function.

Object

Object chứa các cặp keyvalue. Nó không giống như array, các cặp keyvalue trong object có thể có nhiều kiểu dữ liệu khác nhau.

const user = {
   name: "Alice",
   posts: 2,
   isLoggedIn: false
};

Ta có thể truy cập vào giá trị của một object bằng cách ghi tên object đó ra sau đó là key mà bạn muốn lấy giá trị.

let welcomeMessage = `Hello ${user.name}`;
console.log(welcomeMessage); //--> 'Hello Alice'

Array

Array hay mảng, nó chứa một danh sách các giá trị thuộc cùng một kiểu dữ liệu, các giá trị trong mảng có thể thuộc bất kỳ kiểu dữ liệu nào.

const rainbowColours = ["Red","Orange","Yellow","Green","Blue","Purple"];
let numbers = [1,2,3,5,6,7,12,31,768];

Để truy cập đến một giá trị bất kỳ trong mảng thì bạn phải biết vị trí index của giá trị đó trong mảng (Trong JavaScript, mảng bắt đầu từ 0 nhé).

const rainbowColours = ["Red","Orange","Yellow","Green","Blue","Purple"];
console.log(rainbowColours[0]); //--> 'Red'

Regular Expression

Hay còn được gọi là biểu thức chính quy (Phần này chúng ta sẽ tìm hiểu trong một bài viết khác nhé?)

let regex = /ab+c/

Function

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

Lưu ý: Mặc dù function cũng được xem là thuộc kiểu object tuy nhiên nếu bạn dùng typeof để kiểm tra một function bất kỳ thì nó cho kết quả là function đấy nhé. Nó cũng giống như typeof null vậy 😆.

function sum (a, b) {
	return a + b;
}
typeof sum  //--> function
typeof null //--> object

II. Tham trị và tham chiếu

Tham trị và tham chiếu là hai thứ khá là nhọc nhằn, khó "hấp thu" không chỉ với những bạn mới học JavaScript mà đôi khi cả những bạn đã làm dev JavaScript tầm 1 - 2 năm cũng sẽ hay nhầm lẫn hai ông thần này (trong đó có mình 🤣).

Vậy trong phần này, mình sẽ sơ lược những điểm quan trọng để chúng ta dễ hiểu và dễ nhớ hơn về hai ông thần này nhé 😉.

1. Tham trị

Tham trị đối với kiểu dữ liệu nguyên thủy nhé. Khi ta gán biến này cho biến kia thì giá trị của hai biến là hoàn toàn độc lập. Nói một cách đơn giản thì biến sẽ lưu giá trị của biến đó.

let num_1 = 100;
let num_2 = num_1;
console.log(num_1 + ' - ' + num_2); //--> 100 - 100
num_1 = 200;
console.log(num_1 + ' - ' + num_2); //--> 200 - 100

Khi ta gán num_2 = num_1 thì bản chất num_2 sẽ lưu giá trị của num_1 tức là 100. Sau đó, ta gán giá trị mới cho num_1 = 200 thì num_2 vẫn không thay đổi. Vì việc thằng num_1 nó thay đổi giá trị thì thằng num_2 nó không quan tâm, nó chỉ biết rằng nó có nhiệm vụ là lưu giá trị là 100 mà nó được cho ban đầu mà thôi 😄.

Nếu bạn dùng function để thay đổi thì cũng sẽ như vậy

let str_1 = '200lab';

function changeText(str) {
	str = 'Welcome to 200lab';
}
changeText(str_1);
console.log(str_1); //--> '200lab'

2. Tham chiếu

Tham chiếu đối với object. Đối với tham chiếu thì nó khác với tham trị ở chỗ là tham chiếu khi gán hoặc copy giá trị thì nó chỉ lưu ở dạng địa chỉ vùng nhớ trên RAM, nơi mà dùng để lưu giá trị đó. Để dễ hiểu thì chúng ta xem ví dụ dưới nè 😊

const user = {
   name: "Alice",
   posts: 2,
   isLoggedIn: false
};

const temp = user; //--> {name: "Alice", posts: 2, isLoggedIn: false}

Ví dụ object user được lưu ở địa chỉ 4R15T trên RAM nhé 😉. khi mà ta gán temp = user thì cái mà biến temp lưu lại đó là địa chỉ 4R15T nơi chứa giá trị của user mà thôi nhé. Việc gán như vậy thực chất là copy địa chỉ vùng nhớ mà thôi 😀.

Lưu ý: Tuy nhiên, việc 2 biến cùng trỏ đến một địa chỉ vùng nhớ như vậy nên khi một trong 2 ổng đi thay đổi giá trị bên trong vùng nhớ đó thì ông còn lại cũng bị thay đổi theo luôn.

const user = {
   name: "Alice",
   posts: 2,
   isLoggedIn: false
};
const temp = user; 
console.log(temp);//--> {name: "Alice", posts: 2, isLoggedIn: false}
user.name = 'Kirito'
console.log(temp);//--> {name: "Kirito", posts: 2, isLoggedIn: false}

III. Tổng kết

Qua bài viết này, hy vọng nó sẽ giúp các bạn có cái nhìn tổng quan hơn về các kiểu dữ liệu trong JavaScript, giúp các bạn hiểu rõ hơn về tham trị và tham chiếu cũng như phân biệt được hai ông thần này. Trong bài viết tiếp theo, chúng ta sẽ cùng nhau tìm hiểu cách khai báo biến, khái niệm hoisting, scope trong JavaScript nhé. Cảm ơn các bạn đã đọc 🤗.

Bài viết cùng seri

Bài viết liên quan

Hướng dẫn clone instagram với React JS và Firebase phần 2.

Trong phần 1 của series này, chúng ta tiến hành setup một project ReactJS bằng câu lệnh create-react-app,đăng ký và tạo app trên firebase để có thể sử dụng và lưu trữ data. Trong phần 2 này, chúng ta sẽ tạo header cho nó và tạo component post để hiển thị bài đăng nhé 😉. Nào bắt đầu thôi 😁!...

Hướng dẫn clone instagram với React JS và Firebase phần 2.
Hướng dẫn clone instagram với React JS và Firebase phần 1.

Trong bài viết này, chúng ta sẽ cùng nhau clone một trang mạng xã hội nỗi tiếng, là nơi chia sẽ hình ảnh và video của hàng trăm triệu người trên toàn thế giới, đó chính là Instagram. Chúng ta bắt đầu thôi 😁!...

Hướng dẫn clone instagram với React JS và Firebase phần 1.
Number, string, array và object trong JavaScript

Chúng ta đã cùng nhau tìm hiểu các kiểu dữ liệu có trong JavaScript ở bài trước, tuy nhiên chúng ta vẫn chưa biết cách thao tác với chúng như thế nào trong JavaScript, nó có hổ trợ các phương thức nào hay không? Vấn đề đó, chúng ta sẽ cùng nhau tìm hiểu trong bài này nhé 😉....

Number, string, array và object trong JavaScript
Tìm hiểu thêm về Window Object trong Javascript

Nếu các bạn đã xem các bài trước thuộc series JavasScript cơ bản của mình hoặc đã xem các tài liệu khác thì chắc hẵn đã từng thấy trong bài viết có đề cập đến ông thần window object rồi nhỉ 😉. Vậy trong bài này, chúng ta sẽ cùng nhau tìm hiểu về nó để xem window object là loại object như thế nào nhé...

Tìm hiểu thêm về Window Object trong Javascript
Tìm hiểu về "this" trong JavaScript.

Chắc hẵn bạn đã từng nhìn thấy từ this trong một ngôn ngữ lập trình nào trước đó hoặc là trong một vài đoạn code nào đó của JavaScript. Bạn thắc mắc nó có tác dụng gì hoặc là bạn đang mơ hồ về this trong JavaScript. Yên tâm, trong bài này chúng ta sẽ cùng nhau tìm hiểu this có ý nghĩa gì nhé....

Tìm hiểu về "this" trong JavaScript.
You've successfully subscribed to 200Lab Blog
Great! Next, complete checkout for full access to 200Lab Blog
Xin chào mừng bạn đã quay trở lại
OK! Tài khoản của bạn đã kích hoạt thành công.
Success! Your billing info is updated.
Billing info update failed.
Your link has expired.