วิธีเพิ่ม Element ใหม่ที่ต้น Array ใน JavaScript (unshift)

เมธอด unshift()

Array.unshift() เพิ่ม Element หนึ่งหรือหลายตัวที่ ต้น Array (Index 0) และ คืนค่า Length ใหม่ของ Array (Mutate Original)

Syntax

array.unshift(element1, element2, ..., elementN);

ตัวอย่างโค้ด

<html>
<head>
  <title>JavaScript Array unshift Method</title>
</head>
<body>
  <script>
    var arr = new Array("orange", "mango", "banana", "sugar");
    var length = arr.unshift("water");
    document.write("Returned array is : " + arr);
    document.write("<br /> Length of the array is : " + length);
  </script>
</body>
</html>

ผลลัพธ์

Returned array is : water,orange,mango,banana,sugar
Length of the array is : 5

รายละเอียด

• Element ใหม่จะถูกแทรกที่ Index 0
• Element เดิมจะถูก Shift ไปทางขวา (Index เพิ่มขึ้น)
• คืนค่า Length ใหม่ (ไม่ใช่ Array)
• เพิ่มหลาย Element ได้พร้อมกัน: arr.unshift('a', 'b', 'c')

วิธีอื่นๆ (ไม่ Mutate)

1. Spread Operator (ES6+) - คืนค่า Array ใหม่

const arr = ['orange', 'mango'];
const newArr = ['water', ...arr]; // ['water', 'orange', 'mango']

2. concat()

const newArr = ['water'].concat(arr);

ตารางเปรียบเทียบ

ข้อควรระวัง

• unshift() ช้ากว่า push() เพราะต้อง Re-index ทุก Element
• ถ้าทำบ่อยใน Array ใหญ่ ควรพิจารณาใช้ Linked List หรือ Collections อื่น
• คืนค่า Length ไม่ใช่ Array ต้องระวัง: var newArr = arr.unshift(x) จะได้ Number ไม่ใช่ Array

สรุป

unshift() ใช้เพิ่ม Element ที่ต้น Array Mutate ต้นฉบับ คืนค่า Length ใหม่ สำหรับ Functional Style ใช้ Spread Operator [newItem, ...arr]