مفاهیم جدید ES6+ ✨

با جدیدترین و خفن‌ترین امکانات جاوااسکریپت آشنا می‌شیم.

Destructuring: باز کردن جعبه!

این قابلیت خفن بهمون اجازه می‌ده مقادیر رو از توی آرایه‌ها یا آبجکت‌ها بکشیم بیرون و مستقیم بریزیم تو متغیرهای جدا.

// باز کردن آبجکت
const user = { name: 'رضا', age: 30 };
const { name, age } = user;
console.log(name); // 'رضا'
console.log(age);  // 30

// باز کردن آرایه
const colors = ['قرمز', 'سبز', 'آبی'];
const [firstColor, secondColor] = colors;
console.log(firstColor); // 'قرمز'

Spread (...) و Rest (...): سه نقطه جادویی

این سه نقطه (`...`) بسته به اینکه کجا استفاده بشه، دو تا کار کاملاً متفاوت انجام می‌ده:

Spread (پخش کردن): محتویات یه آرایه یا آبجکت رو "پخش" می‌کنه. برای کپی کردن یا ترکیب کردن عالیه.
Rest (بقیه): بقیه اعضای یه آرایه یا پارامترهای یه تابع رو جمع می‌کنه تو یه آرایه جدید.

// Spread Operator
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

const user1 = { name: 'علی' };
const userWithRole = { ...user1, role: 'admin' }; // { name: 'علی', role: 'admin' }

// Rest Operator
const [first, second, ...others] = [10, 20, 30, 40, 50];
console.log(others); // [30, 40, 50]

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

Template Literals: رشته‌های حرفه‌ای

به جای چسبوندن رشته‌ها با `+`، می‌تونیم از بک‌تیک (`` ` ``) استفاده کنیم و متغیرها رو مستقیم با `${}` داخل رشته بذاریم. خیلی تمیز و خوانا!

const userName = "مریم";
const userAge = 25;

// روش قدیمی
const messageOld = "سلام، اسم من " + userName + " است و " + userAge + " سال دارم.";

// روش جدید و خفن
const messageNew = `سلام، اسم من ${userName} است و ${userAge} سال دارم.`;

console.log(messageNew);

تمرین! 🧠

یه آبجکت `person` با ویژگی‌های `name`, `city` و `job` بساز. با استفاده از destructuring، این سه ویژگی رو به متغیرهای جدا تبدیل کن. بعد با استفاده از template literals، یه جمله مثل "علی در تهران یک برنامه‌نویس است." بساز و تو کنسول چاپ کن.

جواب تمرین

const person = {
  name: "علی",
  city: "تهران",
  job: "برنامه‌نویس"
};

// 1. Destructuring
const { name, city, job } = person;

// 2. Template Literals
const sentence = `${name} در ${city} یک ${job} است.`;

console.log(sentence);

درس قبلی

درس ۱۵ از ۱۶

درس بعدی: پروژه ۲ (هواشناسی)