ปัญหา reference value ตัวแปร Array ใน JavaScript ES6 ,TypeScript

ปัญหา reference value ตัวแปร Array ใน JavaScript เกิดจากการ Copy Array โดยใช้ = ตัวแปร Array
เมื่อ Copy Array ใน JS โดยใช้ = มันจะ Copy ค่าและอ้างอิงไปยัง Array ตัวเดิมด้วยคือเมื่อตัวแปรนึงถูกเปลี่ยนค่าตัวแปรอีกตัวนึงจะถูกเปลี่ยนค่าไปด้วย เช่น

const B = [1, 2, 3, 4];
const C = B;
console.log(C === B);
// true

ตัวอย่าง Code

var A = ['A1', 'A2'];
var B = A;
B.push('B1');

console.log(B);
//["A1", "A2", "B1"]

//😱 เราเพิ่มค่าให้ตัวแปร B แต่ A ก็ถูกเปลี่ยนค่าตาม B
console.log(A);
//["A1", "A2", "B1"]

วิธีแก้ปัญหาการ reference value ตัวแปร Array

**สามารถใช้ได้ทั้ง JavaScript ,JavaScript ES6 ,TypeScript**

1Copy Array โดยใช้คำสั่ง Array.from(ตัวแปร Array)

ดังนั้นถ้าเราต้องการ Copy ค่า Array A ให้กับ Array B โดยที่ต้องการให้ B กับ A แยกจากกันเลยต้องใช้ Array.from(ตัวแปร Array)

var A = [1, 2, 3, 4];

var B = Array.from(A);

console.log(A === B);
// false

ตัวอย่าง Code

var A = ['A1', 'A2'];

var B = Array.from(A);

B.push('B1');

console.log(B);
//["A1", "A2", "B1"]

//✅เพิ่มค่าให B ก็จะไม่ส่งผลต่อ A เพราะกรณีนี้ถือว่า A กับ B เป็น Array คนล่ะตัวกัน
console.log(A);
//["A1", "A2"]

2Copy Array โดยใช้คำสั่ง Object.assign([], ตัวแปร Array)

ผลลัพธ์ที่ได้จะเหมือนกับการใช้คำสั่ง Array.from(ตัวแปร Array) คือ ตัวแปร Array B กับ A จะเป็น Array คนล่ะตัวกัน

ตัวอย่าง Code

var A = ['A1', 'A2'];

var B = Object.assign([], A);

B.push('B1');

console.log(B);
//["A1", "A2", "B1"]

//✅เพิ่มค่าให B ก็จะไม่ส่งผลต่อ A เพราะกรณี้ถือว่า A กับ B เป็น Array คนล่ะตัวกัน
console.log(A);
//["A1", "A2"]

3Copy Array โดยใช้คำสั่ง slice(start,end)คือคำสั่งตัด Array

ตัวอย่าง Code

const wordArray = ['A', 'B', 'C','D'];
const cloneWordArray = wordArray.slice();

wordArray.push('F');
console.log(wordArray);
//output >> ["A", "B", "C", "D", "F"]

console.log(cloneWordArray);
//output >> ["A", "B", "C", "D"]

ดังนั้นหากเราใช้คำสั่ง Array.from(), Object.assign() หรือ slice() คำสั่งใดคำสั่งนึงแอดมินรับรองว่าคุณจะไม่พบปัญหา reference value ตัวแปร Array ใน JavaScript อีกต่อไป 👍

ใครชื่นชอบบทความ "ปัญหา reference value ตัวแปร Array ใน JavaScript ES6 ,TypeScript" ขอฝากกด Like แฟนเพจเทพควิชให้ด้วยน่ะค่ะอิๆ บ๊ายบายเจอกันใหม่ในบทความหน้า 😜