Spread ба Rest оператор

... гэсэн гурван цэгийн тэмдэглэгээ JavaScript-д хоёр өөр зорилгоор ашиглагддаг: spread нь утгуудыг тарааж дэлгэдэг, rest нь утгуудыг цуглуулан нэгтгэдэг. Хэрэглэх байр суурь нь хоёрыг ялгана.

Spread оператор — массив

Spread нь массивын элементүүдийг задалж тарааж өгнө. Массивуудыг нэгтгэхэд маш тохиромжтой.

const эхний = [1, 2, 3];
const хоёр дах = [4, 5, 6];

const нэгтгэсэн = [...эхний, ...хоёр дах];
console.log(нэгтгэсэн); // [1, 2, 3, 4, 5, 6]

Дунд нь утга нэмж болно:

const шинэ = [...эхний, 99, ...хоёр дах];
console.log(шинэ); // [1, 2, 3, 99, 4, 5, 6]

Массив хуулах

Spread ашиглан массивын бүрэн хуулбар үүсгэж болно. Энэ нь эх массивыг өөрчлөхгүйгээр ажиллах боломж олгодог.

const эх = [10, 20, 30];
const хуулбар = [...эх];

хуулбар.push(40);

console.log(эх); // [10, 20, 30]  ← өөрчлөгдөөгүй
console.log(хуулбар); // [10, 20, 30, 40]

Зүгээр const хуулбар = эх гэж бичвэл хоёул нэг массивыг заана — spread ашиглавал жинхэнэ хуулбар гарна.

Spread оператор — объект

Объектын шинж чанаруудыг ч spread-ээр дэлгэж болно. Объектуудыг нэгтгэх, хуулахад хэрэглэнэ.

const үндсэн = { нэр: "Болд", нас: 25 };
const нэмэлт = { хот: "Улаанбаатар" };

const бүрэн = { ...үндсэн, ...нэмэлт };
console.log(бүрэн);
// { нэр: "Болд", нас: 25, хот: "Улаанбаатар" }

Давхардсан key байвал хожуу бичигдсэн нь давна:

const шинэчлэгдсэн = { ...үндсэн, нас: 30 };
console.log(шинэчлэгдсэн); // { нэр: "Болд", нас: 30 }

Rest оператор — функцийн параметр

Rest нь функцид дурын тооны аргумент хүлээн авах боломж олгоно. Параметрийн сүүлд ... бичихэд бусад бүх аргументыг массивд цуглуулна.

function нийлбэр(...тоонууд) {
  let нийт = 0;
  for (const тоо of тоонууд) {
    нийт += тоо;
  }
  return нийт;
}

console.log(нийлбэр(1, 2, 3)); // 6
console.log(нийлбэр(10, 20, 30, 40)); // 100

Rest оператор — destructuring

Destructuring дотор rest ашиглан зарим элементийг тусад нь авч, үлдсэнийг нь нэгтгэж болно.

const [эхний, хоёр дах, ...үлдсэн] = [1, 2, 3, 4, 5];

console.log(эхний);   // 1
console.log(хоёр дах); // 2
console.log(үлдсэн);  // [3, 4, 5]

Объект destructuring дээр ч адилхан:

const { нэр, ...бусад } = { нэр: "Болд", нас: 25, хот: "УБ" };

console.log(нэр); // Болд
console.log(бусад); // { нас: 25, хот: "УБ" }

Дараагийн хичээлд:

Алдаа зохицуулах — try/catch ашиглан кодын алдааг хэрхэн барьж, хэрэглэгчид ойлгомжтойгоор мэдэгдэх талаар үзнэ. Энэ нь найдвартай программ бичихэд зайлшгүй шаардлагатай.