Đôi điều về Object Reference trong JavaScript. Nhiều lúc quên thật phiền toái!

Đôi điều về Object Reference trong JavaScript. Nhiều lúc quên thật phiền toái!

Tin ngắn hàng ngày dành cho bạn
  • Manus đã chính thức mở cửa cho tất cả người dùng rồi đấy mọi người. Cho những ai chưa biết thì đây là một công cụ viết báo cáo (làm mưa làm gió) giống như Deep Research của OpenAI á. Mỗi ngày được miễn phí 300 Credits để nghiên cứu. Mỗi lượt nghiên cứu tiêu tốn tuỳ thuộc vào độ phức tạp của yêu cầu. À với cả họ đang có chương trình tặng miễn phí Credits hay sao á. Như mình thì vào thấy được hẳn 2000.

    Mình dùng thử, so sánh với cùng một lệnh giống như đợt trước dùng bên Deep Research thì nội dung khác biệt nhau hoàn toàn. Manus báo cáo như kiểu viết văn hơn so với OpenAI là các gạch đầu dòng và bảng biểu.

    À lúc đăng ký xong có bắt nhập số điện thoại để xác minh, nếu lỗi thì các bạn đợi qua ngày thử lại xem có được không nhé.

    » Xem thêm
  • Mọi người chắc nghe nhiều về xu hướng tìm kiếm thông tin bằng AI chứ không cần công cụ tìm kiếm như Google nữa rồi đúng không? Không đâu xa ánh xạ vào bản thân thì thấy đúng thật, thi thoảng mới tìm kiếm thôi chứ còn đâu toàn hỏi tụi AI.

    Ngay từ đầu viết blog, thứ mà mình hướng đến là chia sẻ kinh nghiệm chứ không phải là những bài mang nặng tính kỹ thuật, máy móc, hướng dẫn từ đầu... Vì thời điểm đó đã có quá nhiều người làm nội dung này rồi và họ làm rất tốt, tại sao mình phải cố phát minh lại bánh xe? Một điều nữa là tin tưởng độc giả của mình có khả năng tìm hiểu vấn đề. Nếu bạn đọc đủ nhiều các bài viết trên blog thì thấy mình luôn cố gắng chèn thêm các liên kết tham khảo ngoài bài viết, nêu ra vấn đề mở và rất ít khi kết luận chắc chắn một điều gì đó.

    Mình đã cố gắng rèn luyện kỹ năng viết, kỹ năng trình bày và cả cách tương tác với độc giả để mang lại giá trị cho họ. Nhiều lúc ngồi lật lại các con số thống kê thấy lượng đọc bài viết tăng lên lại cảm thấy vui. Nhưng khi nguồn truy cập đến từ Google thì lại thấy buồn, vì điều đó chứng tỏ họ biết đến mình chỉ khi đang cố đi tìm giải pháp, có thể họ chỉ đọc chớp nhoáng, may ra tìm được cách giải quyết và thế là đóng cửa sổ trình duyệt rồi đi như một cơn gió.

    Chừng vài tháng đổ lại đây, một điều khiến mình rất vui đó là lượng người truy cập thẳng vào trang chủ mà không thông qua công cụ tìm kiếm đang tăng dần lên, có nhiều hôm lượng truy cập tự nhiên còn cao hơn cả đến từ Google. Điều đó chứng tỏ độc giả đã có thói quen quay lại trang của mình nhiều hơn và họ tìm thấy được giá trị từ blog mang lại. Vui mừng khôn xiết 🤩

    Bên cạnh đó thì lượng truy cập vào chuyên mục Threads - tức là mục mình đang viết bài này đang cao hơn bao giờ hết. Điều đó chứng tỏ xu hướng đi theo tin nhanh là đúng đắn. Mình có thể ngồi cả ngày để viết tin ngắn cho bạn đọc vì nó rất nhanh mà tiện, không tốn công đi tìm tài liệu để viết, không tốn cả thời gian viết nữa, còn mình thì có rất nhiều thứ để chia sẻ 😅. Nhưng không vì thế mà bỏ bê các bài viết dài, vì dài thì có nhiều thông tin để chia sẻ hơn.

    Vài lời tâm sự thế thôi chứ hơn một tháng nay mình chưa viết bài viết mới nào vì công việc bận quá. Xong lâu dần cứ trì hoãn lại thành lười. À với cả tháng 5 này rất thích hợp để đọc các cuốn sách về cách mạng á. Có hôm đọc đến 2 giờ sáng mới đi ngủ 🥱

    » Xem thêm
  • Mình mới nhìn thấy một trang web khá thú vị nói về các cột mốc đáng nhớ trong lịch sử phát triển Internet toàn cầu: Internet Artifacts

    Chỉ từ 1977 - khi Internet còn nằm trong hộp thí nghiệm thì nhìn xem - giờ đây Internet đã khiến mọi thứ phát triển đến mức nào 🫣

    » Xem thêm

Vấn đề

Object Reference là một khái niệm thể hiện một biến tham chiếu, tức là thay vì lưu trữ giá trị thực nó lưu lại địa chỉ ô nhớ & thao tác với dữ liệu dựa trên địa chỉ đó. Điều này giúp tiết kiệm bộ nhớ cho các ứng dụng. Tuy nhiên cũng không ít điều phiền toái từ nó mà ra.

Kiểu dữ liệu nguyên thuỷ

Trong Javascript, chúng ta có những kiểu dữ liệu "nguyên thuỷ" (Primitive Types) bao gồm: undefinednullstringnumberboolean và symbol.

Các biến khi được khởi tạo với các giá trị này sẽ được cấp pháp một ô nhớ nhất định không có liên quan đến nhau. Ví dụ:

let name = "estacks";
let name2 = name; // estacks
name = "estacks.icu";
console.log(name); // estacks.icu
console.log(name2); //estacks

Bất kì khi nào thay đổi biến name thì những biến trước được gán bằng name vẫn giữ nguyên giá trị. Điều này cũng tương tự với kiểu dữ liệu number, boolean...

Object & Array

Không giống với Primitive Types, Object & Array, khi có nhiều hơn một biến được tạo để lưu trữ một object, array, function. Những biến đó được trỏ đến địa chỉ đã được phân bổ tương tự trong bộ nhớ.

const arr1 = ['e', 's', 't', 'a', 'c', 'k', 's'];
const arr2 = arr1;
arr1[0] = 'a';
console.log(arr2); // ['a, 's', 't', 'a', 'c', 'k', 's']

Nhìn vào ví dụ trên, khi phần tử thứ nhất trong arr1 bị thay đổi, kéo theo đó thì arr2 cũng bị thay đổi theo. Tại sao vậy?

Khi arr1 được khai báo, bộ nhớ sẽ được cấp phát và một địa chỉ được lưu lại bởi nó. Sau đó arr2 được gán bằng arr1. Vì arr1 là một mảng thay vì tạo mới một bản sao của mảng đó, arr2 chỉ đơn giản là trỏ đến địa chỉ lưu arr1. Bằng cách đó, bất kỳ thay đổi nào được thực hiện trên arr1 cũng sẽ được thay đổi trên arr2 hoặc ngược lại bởi vì chúng trỏ đến cùng một vị trí.

Điều này cũng tương tự với object & function.

Những phiền toái

"Quên" mất việc biến đang tham chiếu

Đây cũng là trường hợp mình thấy phổ biến nhất. Khai báo một biến dựa trên một biến khác mà quên mất biến đó có tính chất reference.

Những bạn mới vào nghề sẽ rất dễ bị mắc lỗi này, vì thế khi biết được tính chất này thì hãy tránh khai báo một biến dựa trên một biến khác nhé, thay vào đó hãy sao chép nó ra.

const person1 = {
  name: 'Nguyễn Văn A',  
  age: 20,  
  address: {
    city: 'Hà Nội',  
    district: 'Cầu Giấy',  
  }
};
const person2 = { ...person1 };

Ở ví dụ trên mình vừa copy person1 sang person2. Hãy thử thay đổi giá trị của name hoặc ageperson1 thì person2 vẫn không bị thay đổi. Nhưng nếu thay đổi city hoặc district thì person2 vẫn bị thay đổi theo. Lý do là bởi address được khai báo với giá trị là object nên address vẫn có tính chất reference.

Cách copy object bằng cú pháp spread (...) ở trên hay nhiều cách copy khác như dùng Object.assign chỉ có thể sao chép "nông" (shallow) được đối tượng, để có thể sao chép được toàn bộ đối tượng lồng nhau như vậy mà tránh reference có thể dùng một trong ba cách sau:

Thứ nhất là dùng tổ hợp cú pháp JSON.parse & JSON.stringify. Đây là cách đơn giản & nhanh chóng nhất.

const person1 = {
  name: 'Nguyễn Văn A',  
  age: 20,  
  address: {
    city: 'Hà Nội',  
    district: 'Cầu Giấy',  
  }
};
const person2 = JSON.parse(JSON.stringify(person1));

Tuy nhiên đây lại là cách tồi nhất, do việc parse một string thành object hoàn toàn không tốt cho hiệu năng, chưa kể nếu như string đó là lớn.

Thứ hai là viết mã để thực hiện việc deep copy:

function deepCopy(obj) {
    if(typeof obj !== 'object' || obj === null) {
        return obj;
    }

    if(obj instanceof Date) {
        return new Date(obj.getTime());
    }

    if(obj instanceof Array) {
        return obj.reduce((arr, item, i) => {
            arr[i] = deepCopy(item);
            return arr;
        }, []);
    }

    if(obj instanceof Object) {
        return Object.keys(obj).reduce((newObj, key) => {
            newObj[key] = deepCopy(obj[key]);
            return newObj;
        }, {})
    }
}

Và cuối cùng, sử dụng thư viện có sẵn các hàm deepCopy như lodash, ramda... hoặc dùng package clone có sẵn trên npm.

Đặt một đối tượng dùng chung

Hình dung như bạn có một config để sử dụng làm mặc định nếu không tìm thấy những config riêng của chúng, bạn sẽ export ra một object chứa những config đó & thật tai hại nếu như trong quá trình sử dụng chúng, bạn vô tình thay đổi giá trị ở một nơi nào đó.

// file config.js
module.export = {
  appName: "estacks",  
  connection: {
    host: "0.0.0.0",  
    port: 80,  
}
// file app.js
const conf = require('./config.js');

let config = findConfig(); // null
if (!config) config = conf;
...  
// vô tình thay đổi conf
config.connection.port = 443;

Thì lúc này ở những file khác đang có import config.js thì connection.port đều bị chuyển thành 443 hết.

Giải pháp cho vấn đề này là hãy deep clone config ra trước khi sử dụng. Để tránh việc thay đổi chúng sẽ dẫn đến những lỗi ngớ ngẩn mà có thể mất cả tuần để debug :D.

Kết luận

Kiến thức về Object Reference chỉ đơn giản là chỉ một biến tham chiếu. Khi làm việc với biến tham chiếu bạn phải hết sức cẩn thận để không phải mắc những sai lầm như tôi ở trên nhé!

Cao cấp
Hello

5 bài học sâu sắc

Mỗi sản phẩm đi kèm với những câu chuyện. Thành công của người khác là nguồn cảm hứng cho nhiều người theo sau. 5 bài học rút ra được đã thay đổi con người tôi mãi mãi. Còn bạn? Hãy bấm vào ngay!

Mỗi sản phẩm đi kèm với những câu chuyện. Thành công của người khác là nguồn cảm hứng cho nhiều người theo sau. 5 bài học rút ra được đã thay đổi con người tôi mãi mãi. Còn bạn? Hãy bấm vào ngay!

Xem tất cả

Đăng ký nhận thông báo bài viết mới

hoặc
* Bản tin tổng hợp được gửi mỗi 1-2 tuần, huỷ bất cứ lúc nào.

Bình luận (0)

Nội dung bình luận...