Tham Trị Và Tham Chiếu Trong Javascript - Gists · GitHub

Skip to content Search Gists Search Gists All gists Back to GitHub Sign in Sign up Sign in Sign up Dismiss alert {{ message }}

Instantly share code, notes, and snippets.

trunghd2809/js-value-reference-type-video.js Last active May 12, 2023 17:32 Show Gist options

• Download ZIP

• Star 2 (2) You must be signed in to star a gist
• Fork 0 (0) You must be signed in to fork a gist

• Embed Select an option
  • Embed Embed this gist in your website.
  • Share Copy sharable link for this gist.
  • Clone via HTTPS Clone using the web URL.

  No results found

  Learn more about clone URLs Clone this repository at <script src="https://gist.github.com/trunghd2809/89e3c2c7a78576b29e84fab0388f1077.js"></script>
• Save trunghd2809/89e3c2c7a78576b29e84fab0388f1077 to your computer and use it in GitHub Desktop.

Code Revisions 4 Stars 2 Embed Select an option

• Embed Embed this gist in your website.
• Share Copy sharable link for this gist.
• Clone via HTTPS Clone using the web URL.

No results found

Learn more about clone URLs Clone this repository at <script src="https://gist.github.com/trunghd2809/89e3c2c7a78576b29e84fab0388f1077.js"></script> Save trunghd2809/89e3c2c7a78576b29e84fab0388f1077 to your computer and use it in GitHub Desktop. Download ZIP Tham trị và tham chiếu trong javascript Raw js-value-reference-type-video.js This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters Show hidden characters

// Youtube channel: https://www.youtube.com/channel/UCG2ovypNCpVOTFeY1YCocmQ

// https://kipalog.com/posts/Pass-by-reference-va-pass-by-value

// THAM TRỊ vs THAM CHIẾU trong Javascript

// CHIA SẺ

// 1. Tham trị vs tham chiếu là gì?

// 2. Các khái niệm:

// - stored by value

// - stored by reference

// - pass by value

// - pass by reference

// 3. Cách khắc phục lỗi liên quan tới reference

// 4.Tất cả các kiểu primitive trong js đều là immutable.

// 5.Khi so sánh 2 biến có kiểu primitive với nhau thì chúng sẽ so sánh giá trị:

// 6. Khi so sánh object hoặc array thì nó so sánh vị trí lưu trong bộ

// -----------------

// THAM TRỊ - VALUE TYPE

// Lưu giá trị vào biến

// - Ví dụ cái box sau đây là đại diện cho biến trong JS.

// | |

// | number |

// | string | => lưu luôn giá trị

// | boolean | vd số 1000, string 'Easy Frontend'

// | null, undefined |

// |__________________|

// const a = 1000;

// | |

// | 1000 |

// | 'Easy Frontend' |

// | true, false |

// | null, undefined |

// |__________________|

// -----------------

// THAM CHIẾU - REFERENCE TYPE

// | | ===> | KHO CHỨA 1E2F |

// | object, array | ===> | |

// | | ===> | {name: 'Hau'} |

// | const a = {name: 'Hau'} | ===> | |

// | thực chất a = 1E2F | ===> | |

// |_________________________| ===> |________________|

// => chỉ lưu địa chỉ nơi giữ giá trị

// => phép gán với object === copy địa chỉ

// const b = a; --> b cũng trỏ về địa chỉ 1E2F

// tham trị - stored as value type

let a = 5;

let b = a;

a = 10;

console.log(b);

// tham chiếu - stored as reference type

const a = { name: 'Hau' }; // 1E2F

const b = a; // 1E2F

a.name = 'Po';

console.log(b.name);

// truyền tham số dạng tham trị - pass by value

function doMagic1(number) {

number = 10;

}

const a = 5;

doMagic1(a);

console.log(a); // 5 or 10

// truyền tham số dạng tham chiếu - pass by reference

function doMagic2(a1) {

a1.name = 'Po';

}

const a = { name: 'Hau' };

// const a1 = a; // 1e2f

doMagic2(a);

console.log(a.name); // Hau or Po???

// Làm sao để không bị dính tham chiếu

// --> Clone object

// --> Clone array

// ES6: spread operator (...)

const a = { name: 'Hau' }; // 1E2F

const b = { ...a }; // 1E2G

a.name = 'Po';

console.log(b.name);

const a = [1, 2, 3];

const b = [...a];

a.push(4);

console.log(b);

// Tham trị vs cả tham chiếu

// Cái này liên quan gì tới ReactJS, Redux?

// Có đó nha! :P

// Thỉnh thoảng component hk re-render

// mặc dù bạn nói đã thay đổi giá trị props rồi.

class App extends PureComponent {

constructor(props) {

super(props);

this.state = {

numberList: [],

};

}

componentDidMount() {

const { numberList } = this.state;

const newNumberList = [...numberList];

newNumberList.push(1);

// will it re-render?

// shallow comparison

this.setState({ numberList: newNumberList });

}

render() {

// 0 or 1 --> 1

const { numberList } = this.state;

return <p>{numberList.length}</p>;

}

}

// NHỚ NÈ

// - Tham trị chứa giá trị (mấy kiểu dữ liệu đơn giản)

// - Tham chiếu chứa địa chi (kiểu dữ liệu phức tạp như object, array)

// - Nhớ clone ra object mới khi thay đổi props/state trong ReactJS / Redux.

// 💻 HAPPY CODING! ❤️

// Nhớ like, share và subscribe để ủng hộ mình nhen.

// Còn nếu muốn ủng hộ 💰 thì tìm trong phần mô tả video nhé!

// BÀI TẬP GIẢI TRÍ

// Câu 1:

function doSomethingCool(number, obj) {

number = 1500;

obj.value = 2500;

};

const a = 1000;

const b = { value: 2000 };

doSomethingCool(a, b);

console.log(a + b.value); // in ra bao nhiêu?

// Câu 2:

function doSomethingGreat(obj, arr) {

obj.value = 3500;

arr.push(obj.value);

}

const a = { value: 1500 };

const b = [1000];

b.push(a.value);

doSomethingGreat(a, b);

console.log(b); // in ra cái gì?

// Giải và comment đáp án của bạn bên dưới nhé 😅

Copy link

tiendzok11111 commented Jul 27, 2021

Quá tuyệt vời anh ơi =))

Uh oh!

There was an error while loading. Please reload this page.

Copy link

VoNo1412 commented Sep 28, 2021

// function doSomethingCool(number, obj) { // number = 1500; // a = 1000 because it copy value // obj.value = 2500; // b.value = 2500 change memory data here. // }; // const a = 1000; // Tham tri copy value not change data memory // const b = { value: 2000 }; // Tham chieu den dia chi change data memory // doSomethingCool(a, b); // a = 1000, b = 2500 (2) // console.log(a + b.value); // -> 3500

// function doSomethingGreat(obj, arr) { // obj.value = 3500; // a.value - 3500 change memory(tham chieu) // arr.push(obj.value); // => b.push(a.value) => b[1000, 1500, 3500] // } // const a = { value: 1500 }; // const b = [1000]; // b.push(a.value); // b is array => b[1000, 1500] (1) // doSomethingGreat(a, b); // console.log(b); // in ra cái gì? // [1000, 1500, 3500]

Uh oh!

There was an error while loading. Please reload this page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment You can’t perform that action at this time.