✨ Destructuring Assignment in Javascript

🔹 یک تکنیک در جاوا اسکریپت است که اجازه می‌دهد مقادیر موجود در آرایه‌ها یا شیء‌ها را به راحتی و به صورت مستقیم به متغیرها اختصاص دهید. این روش برای ساده‌سازی و خوانایی بیشتر کد استفاده می‌شود.

🔑 چرا از Destructuring Assignment استفاده می‌کنیم؟

این روش به شما این امکان را می‌دهد که به جای استخراج دستی مقادیر از آرایه‌ها یا شیء‌ها، به طور خلاصه و موثر این کار را انجام دهید. این می‌تواند کد شما را تمیزتر و قابل فهم‌تر کند.

🖋 مثال:

فرض کنید شما یک آرایه دارید:

let numbers = [1, 2, 3];

- بدون استفاده از Destructuring:

let a = numbers[0];
let b = numbers[1];
let c = numbers[2];

- با استفاده از Destructuring:

let [a, b, c] = numbers;

🔸بیایید یک مثال از استفاده Destructuring Assignment با یک object را ببینیم:

فرض کنید شما یک object دارید:

let person = { name: 'Sara', age: 30 };

- بدون استفاده از Destructuring:

let name = person.name;
let age = person.age;

- با استفاده از Destructuring:

let { name, age } = person;

در این مثال، با استفاده از Destructuring، به جای استخراج جداگانه هر مقدار از object، می‌توانیم این کار را در یک خط کد انجام دهیم.

✨ این روش نه تنها کد را ساده‌تر و خواناتر می‌کند، بلکه باعث کاهش احتمال خطا و افزایش کارایی نیز می‌شود.

📁 #javascript

☕️ به اتاق برنامه نویسی </> بپیوندید.

📌 @PapiDon_coding

✨ Optional Chaining in Javascript

🔹یکی از ویژگی‌های نسبتاً جدید در جاوا اسکریپت است که باعث می‌شود کار با ساختارهای داده‌ای که ممکن است ناقص یا undefined باشند، آسان‌تر شود.

🔑 کاربرد Optional Chaining:

این ویژگی از خطاهای رایج هنگام Accessing Nested Properties یک شیء که ممکن است undefined یا null باشد، جلوگیری می‌کند. به جای اینکه بررسی کنید هر بخش از یک شیء وجود دارد یا خیر، می‌توانید با استفاده از ?. به طور مستقیم از آن استفاده کنید.

🖋 مثال:

- بدون استفاده از Optional Chaining:

let street;
if (user && user.address) {
    street = user.address.street;
}

- با استفاده از Optional Chaining:

let street = user?.address?.street;

در این مثال، اگر user یا user.address undefined یا null باشند، به جای اینکه خطا رخ دهد، street به صورت خودکار undefined می‌شود.

✨ نکته کلیدی:
استفاده از Optional Chaining می‌تواند کد شما را بسیار مختصرتر و خواناتر کند و از خطاهای مرتبط با دسترسی به خصوصیات undefined جلوگیری کند.


📁 #javascript

☕️ به اتاق برنامه نویسی </> بپیوندید.

📌 @PapiDon_coding

🧩 Pattern Matching

تصور کنید یک جعبه پازل دارید و می‌خواهید هر قطعه را در جای مناسب خود قرار دهید. این دقیقاً مفهوم "Pattern Matching" یا "تطابق الگو" در برنامه‌نویسی است. ما به دنبال یافتن یک الگو یا قالب خاص در داده‌ها هستیم تا از آن برای انجام عملیات‌های خاص استفاده کنیم.

🧠 فلسفه پشت Pattern Matching چیست؟

به جای کار با داده‌ها به صورت خام، می‌توانیم الگوها و قوانینی تعریف کنیم تا داده‌ها را بهتر فهمیده و با آن‌ها کار کنیم. این روش به ما کمک می‌کند که کدمان را خواناتر، تمیزتر و منطقی‌تر بنویسیم.

🔍 چطور Pattern Matching در برنامه‌نویسی کار می‌کند؟

🔹 مثال: تطابق الگو با دستور switch

let fruit = 'apple';
switch (fruit) {
   case 'apple':
       console.log('It is an apple!');
       break;
   case 'banana':
       console.log('It is a banana!');
       break;
   default:
       console.log('Unknown fruit!');
}

🔹 تطابق الگو با داده‌های ساختاری

const person = { name: 'Ali', age: 25 };
const { name, age } = person;
console.log(name);  // Output: Ali
console.log(age);   // Output: 25

📚 جاوااسکریپت و Pattern Matching با کتابخانه‌ی JUnify

در واقع JUnify کتابخانه‌ای است که امکان تطابق الگو را فراهم می‌کند. با استفاده از توابع unify و variable، تطابق الگو را انجام می‌دهیم.

🔹 مثال کاربردی: پیاده‌سازی تابع فاکتوریل

var fact = function (n) {
 var r;
 if (unify(0, n)) {
   return 1;
 }
 else if (r = unify($('n'), n)) {
   return r.n * fact(r.n - 1);
 }
};

🧐 مزایا و چالش‌های Pattern matching در جاوااسکریپت

✅ مزایا

1️⃣ خواندنی بودن
2️⃣ انعطاف‌پذیری
3️⃣ کاهش خطا

🧑‍💻چالش‌ها

1️⃣نیاز به یادگیری مکانیزم‌های جدید
2️⃣بعضی مواقع کارایی کمتر نسبت به روش‌های سنتی
3️⃣ افزایش پیچیدگی در برخی موارد

⚙️ نکته پایانی:

فراموش نکنید که Pattern Matching به عنوان یک Design pattern در برنامه‌نویسی شناخته نمی‌شود، بلکه یک ویژگی زبانی است که در برخی زبان‌های برنامه‌نویسی موجود است.


📁 #javascript


✅ کانال تخصصی لاراول
📌 @PapiDon_state

☕️ اتاق برنامه نویسی </>
📌 @PapiDon_coding

✨ Object.keys()

یک متد استاندارد در جاوااسکریپت است که به شما امکان می‌دهد کلیدهای (یا خصوصیات) یک شیء (object) را به صورت آرایه استخراج کنید. این متد، که بخشی از استاندارد ECMAScript 5 است، به شما این قابلیت را می‌دهد که بر روی کلیدهای موجود در شیء‌های مختلف جاوااسکریپت کار کنید.

🔑 نحوه استفاده:

برای استفاده از ()Object.keys, شما به یک شیء نیاز دارید که مایل به دریافت کلیدهای آن هستید. این متد را بر روی شیء فراخوانی می‌کنید و نتیجه به صورت یک آرایه از کلیدهای آن شیء خواهد بود.

let object = {
  name: "John",
  age: 30,
  city: "New York"
};

let keys = Object.keys(object);
console.log(keys); // نتیجه: ["name", "age", "city"]

🧩 کاربردها:

🔹شمارش خصوصیات: می‌توانید از ()Object.keys برای تعیین تعداد خصوصیات یک شیء استفاده کنید.

🔹پیمایش خصوصیات: این متد برای پیمایش و اجرای عملیات روی هر یک از خصوصیات شیء بسیار مفید است.

🔹فیلتر کردن خصوصیات: با استفاده از ()Object.keys و ترکیب آن با سایر متدها، می‌توانید خصوصیات خاصی از شیء را فیلتر و انتخاب کنید.

💡نکات مهم:

- فقط خصوصیات قابل شمارش شیء را برمی‌گرداند.

- ترتیبی که کلیدها برگردانده می‌شوند ممکن است در مرورگرها یا محیط‌های مختلف جاوااسکریپت متفاوت باشد.



📁 #javascript

✅ کانال تخصصی لاراول
📌 @PapiDon_state

☕️ اتاق برنامه‌نویسی
📌 @PapiDon_coding

🔥جدیدترین ویژگی‌های JavaScript در سال 2023

چهاردهمین نسخه ECMAScript 2023 این زبان، تغییرات فوق‌العاده‌ای دارد که زندگی برنامه‌نویسی شما را آسان‌تر می‌کند. در این مطلب به بررسی هر یک از این تغییرات می‌پردازم و توضیح می‌دهم که چرا آن‌ها مفید هستند. پس بیایید شیرجه بزنیم و نگاهی به برخی روش‌های بیندازیم.

⚙️ Object.groupBy

فرض کنید که شما یک آرایه از اشیاء دارید و می‌خواهید آن‌ها را بر اساس مقدار ویژگی، نوع یا تعداد جدا کنید.

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  // ... ادامه مثال
];

حالا ما یک روش جدید به نام GroupBy داریم که به شما اجازه می‌دهد همین کار را انجام دهید.
برای استفاده از آن، Object.groupBy را روی هر آرایه‌ای از اشیاء استفاده کنید و یک تابع که کلید مشخصی را که می‌خواهید دسته‌بندی کنید، برمی‌گرداند، پاس دهید.
در اینجا، ما یک آرایه از اشیاء به نام inventory داریم. و یک تابع myCallback که یک پارامتر quantity می‌گیرد و ok را در صورتی که تعداد بیشتر از 5 باشد، برمی‌گرداند، یا در غیر این صورت restock را برمی‌گرداند.

ما آرایه inventory و تابع myCallback را به Object.groupBy پاس می‌دهیم تا اقلام موجود در آرایه را بر اساس تعداد دسته‌بندی کند.

function myCallback({ quantity }) {
  return quantity > 5 ? "ok" : "restock";
}

const result2 = Object.groupBy(inventory, myCallback);

نتیجه یک شیء خواهد بود که کلید که دسته بندی است و داده‌های مشخص داخل آن را دارد.

{
    "restock": [ ... ],
    "ok": [ ... ]
}

🔄 Array.toSliced(), Array.toSorted(), و Array.toReversed()

زمانی که ما روش‌هایی مثل ()splice یا ()sort یا ()reverse را استفاده می‌کنیم، آن‌ها آرایه اصلی را تغییر می‌دهند. گاهی اوقات این می‌تواند مشکل‌ساز باشد.

اما زمانی که از ()toSorted یا ()toSpliced یا ()toReversed استفاده می‌کنیم، ما می‌توانیم آرایه را بدون تغییر دادن آرایه منبع، جدا، مرتب، و معکوس کنیم. نحوه کارکرد آن به این صورت است:

const numbers = [3, 4, 1, 5, 2];

const splicedNumbers = numbers.toSpliced(1, 1);
const sortedNumbers = numbers.toSorted();
const reversedNumbers = numbers.toReversed();

در این مثال، ما از ()toSpliced برای جداسازی آرایه، ()toSorted برای مرتب‌سازی آرایه، و ()toReversed برای معکوس کردن آرایه استفاده می‌کنیم. آن‌ها دقیقاً مانند splice، sort، و reverse عمل می‌کنند اما تفاوت آن‌ها این است که آن‌ها یک آرایه جدید برمی‌گردانند و آرایه اصلی را تغییر نمی‌دهند.


🔍 findLast() و findLastIndex()

قبل از ES14، اگر می‌خواستید آخرین عنصر یا شاخص را در آرایه پیدا کنید که شرط خاصی را برآورده می‌کند، شما باید ابتدا آرایه را معکوس می‌کردید.

function findLastIndexByReversing(arr, target) {
  // ... کد مثال
}

function findLastIndex(arr, target) {
  // ... کد مثال
}

اما حالا، ما یک روش به نام ()lastIndexOf داریم که از انتهای آرایه شروع می‌شود و مقدار اولین عنصری را که شرط را برآورده می‌کند برمی‌گرداند.

const fruits = ['apple', 'banana', 'orange', 'banana', 'kiwi'];

const lastIndex = fruits.lastIndexOf('banana');

🎬 خلاصه

این‌ها تغییراتی بودند که در JavaScript به عنوان ECMAScript 2023 معرفی شدند.
ممنون از حضورت و حمایتت، یه لایک هم بزن که حالمون جا بیاد 😉🫶



📁 #javascript

✅ کانال تخصصی لاراول
📌 @PapiDon_state

☕️ اتاق برنامه‌نویسی
📌 @PapiDon_coding

✨ چگونه از متد ()Array reduce در جاوااسکریپت استفاده کنیم !

👨‍💻چگونگی کارکرد متد ()reduce

متد ()reduce از قابلیتی که ارائه می‌دهد، یعنی تکرار و «کاهش» مقادیر یک آرایه به یک مقدار، نام‌گذاری شده است.

🔹ساده‌ترین راه برای فهمیدن نحوه کارکرد متد ()reduce از طریق یک مثال است، پس بیایید اول یک مثال آسان ببینیم.

فرض کنید شما یک آرایه از اشیاء دارید که شامل ویژگی‌های name و price به شرح زیر است:

const items = [
  { name: 'Apple', price: 1 },
  { name: 'Orange', price: 2 },
  { name: 'Mango', price: 3 },
];

🔢 سپس، وظیفه شما این است که جمع قیمت‌ها را بگیرید و قیمت کل را بدست آورید. شما می‌توانید این کار را با استفاده از متد ()forEach به شکل زیر انجام دهید:

let totalPrice = 0;

items.forEach(item => {
  totalPrice += item.price;
})

console.log(totalPrice); // 6

🔄 اما، از آنجا که ما به دنبال به دست آوردن یک مقدار تکی از آرایه هستیم، متد ()reduce برای این کار مناسب‌تر خواهد بود.

✅ متد ()reduce به شیوه‌ای مشابه به متد ()forEach کار می‌کند، با این توانایی اضافه که نتیجه هر تکرار را به عنوان یک مقدار تکی جمع‌آوری کند.

🧮 بیایید سعی کنیم قیمت کل را با استفاده از متد ()reduce بدست آوریم. ابتدا، شما باید متد ()reduce را فراخوانی کرده و دو پارامتر را به تابع callback ارسال کنید: accumulator و item.

const totalPrice = items.reduce((accumulator ,item) => {
  return accumulator

 += item.price;
}, 0)

🔥 چرا مقدار اولیه Accumulator در متد ()reduce جاوااسکریپت مهم است؟

در برنامه‌نویسی، بخصوص وقتی با آرایه‌ها کار می‌کنیم، گاهی اوقات نیاز داریم که مقادیر داخل آرایه را به یک مقدار تکی تبدیل کنیم. متد ()reduce در جاوااسکریپت دقیقاً برای این کار طراحی شده است. اما برای استفاده صحیح از این متد، باید درک کنیم چرا مقدار اولیه برای accumulator اهمیت دارد.

🌟 مقدار اولیه Accumulator چیست؟

در ساده‌ترین شکل، Accumulator مانند یک جعبه است که مقادیر حاصل از هر دور تکرار (iteration) را در خود جمع‌آوری می‌کند. شما می‌توانید تصور کنید که در هر دور تکرار، مقدار جدیدی به این جعبه اضافه می‌شود.

🛠 چرا مقدار اولیه مهم است؟

وقتی متد ()reduce را شروع می‌کنیم، باید به این "جعبه" یا Accumulator یک مقدار اولیه بدهیم. این مقدار اولیه نقطه شروعی برای جمع‌آوری مقادیر است.

🔔 اگر مقدار اولیه را مشخص نکنیم، متد ()reduce اولین مورد در آرایه را به عنوان مقدار شروع انتخاب می‌کند. این می‌تواند باعث نتایج غیرمنتظره شود، چرا که شاید مقدار اولیه آرایه با آنچه ما می‌خواهیم مطابقت نداشته باشد.

🔸 برای مثال، اگر ما می‌خواهیم مجموع قیمت‌های محصولات را محاسبه کنیم، مقدار اولیه باید صفر باشد، چون از صفر شروع به جمع کردن قیمت‌ها می‌کنیم.

🧩 به عبارت دیگر، مقدار اولیه Accumulator به متد ()reduce می‌گوید که از کجا و با چه مقداری شروع به جمع‌آوری و کاهش مقادیر کند. این یک قدم حیاتی در استفاده صحیح از متد ()reduce است.

👨‍🏫 نتیجه‌گیری

و این همه چیز است! در نگاه اول، متد ()reduce پیچیده‌تر از سایر متدهای آرایه جاوااسکریپت مانند ()forEach و ()filter به نظر می‌رسد. اما وقتی مفهوم Reducer و Accumulator را درک کنید، این متد در واقع بسیار ساده است.



📁 #javascript

✅ کانال تخصصی لاراول
📌 @PapiDon_state

☕️ اتاق برنامه‌نویسی
📌 @PapiDon_coding

✨JS Design Patterns: A Comprehensive Guid

✨ این مطلب یک راهنمای جذاب در زمینه الگوهای طراحی در جاوا اسکریپت است که اهمیت بالایی در دنیای برنامه‌نویسی دارد. این الگوها، که راه‌حل‌های امتحان‌پس‌داده برای مشکلات متداول در برنامه‌نویسی هستند، به شما کمک می‌کنند تا کدهای خود را به شکلی منظم، قابل نگهداری و گسترش‌پذیر بنویسید. در اینجا به بررسی چند نمونه از این الگوها در جاوا اسکریپت پرداخته می‌شود

1️⃣ الگو Singleton Pattern:

این الگو اطمینان می‌دهد که یک کلاس تنها یک نمونه (instance) داشته باشد. مثلاً برای مدیریت پایگاه‌داده یا تنظیمات سیستمی در جاوا اسکریپت کاربرد دارد. کد نمونه زیر نشان‌دهنده این است که چگونه دو شیء از یک کلاس به یک نمونه اشاره می‌کنند:

   let instance;
   class Database {
       constructor(data) {
           if (instance) {
               return instance;
           }
           this.data = data;
           instance = this;
       }
       getData() {
           return this.data;
       }
   }
   const db1 = new Database('db1');
   const db2 = new Database('db2');
   console.log(db1 === db2); // true
   

2️⃣ الگو Observer Pattern:

این الگو به شما اجازه می‌دهد تغییرات در یک شیء را رصد کنید و در صورت وقوع تغییرات، اطلاع‌رسانی کنید. این کد نشان می‌دهد چگونه می‌توانید اشیاء را به یک موضوع مشترک متصل کنید و در هنگام تغییر داده‌ها، اطلاع‌رسانی کنید:

   class Subject {
       constructor() {
           this.observers = [];
       }
       subscribe(observer) {
           this.observers.push(observer);
       }
       unsubscribe(observer) {
           this.observers = this.observers.filter(obs => obs !== observer);
       }
       notify(data) {
           this.observers.forEach(observer => observer.update(data));
       }
   }
   class Observer {
       update(data) {
           console.log(`Observer received data: ${data}`);
       }
   }
   const subject = new Subject();
   const observer1 = new Observer();
   const observer2 = new Observer();
   subject.subscribe(observer1);
   subject.subscribe(observer2);
   subject.notify('Hello World');
   

3️⃣ الگو Module Pattern:

این الگو به شما کمک می‌کند تا کد خود را به صورت ماژول‌های مستقل سازمان‌دهی کنید تا از تداخل متغیرها و توابع در فضای نام جلوگیری شود:

   const MyModule = (() => {
       let privateVar = 'I am private';
       return {
           publicMethod: () => `The value of privateVar is: ${privateVar}`
       };
   })();
   console.log(MyModule.publicMethod());
   

📁 #javascript #DesignPatterns

✅ کانال تخصصی لاراول
📌 @PapiDon_state

☕️ اتاق برنامه‌نویسی
📌 @PapiDon_coding

✨ سه الگوریتم با جاوا اسکریپت

1️⃣ وارونه کردن یک رشته

این یکی از اولین چالش‌های الگوریتمی است که ممکن است با آن روبرو شوید. حل آن در جاوا اسکریپت بسیار آسان است.

⚙️ دستورالعمل‌ها:
با توجه به یک رشته، یک رشته جدید با ترتیب وارونه کاراکترها برگردانید.

مثال‌ها:

- reverse('apple') === 'leppa'
- reverse('hello') === 'olleh'
- reverse('Greetings!') === '!sgniteerG'

🔸 راه حل(ها):

- روش سریع و آسان:

function reverse(str) {
  return str.split("").reverse().join("");
}
console.log(reverse("apple"));
// خروجی: 'leppa';

- استفاده از ()reduce:

function reverse(str) {
  return str.split("").reduce((rev, char) => char + rev, "");
}
console.log(reverse("apple"));
// خروجی: 'leppa';

- استفاده از حلقه for of:

function reverse(str) {
  let reversed = "";

  for (let character of str) {
    reversed = character + reversed;
  }

  return reversed;
}
console.log(reverse("apple"));
// خروجی: 'leppa';

2️⃣ وارونه کردن یک عدد صحیح

وارونه کردن یک عدد صحیح شبیه به وارونه کردن یک رشته است، با این تفاوت که باید نوع داده مقدار بازگشتی را به عدد تغییر دهید.

⚙️ دستورالعمل‌ها:
با توجه به یک عدد صحیح، یک عدد صحیح که ترتیب وارونه اعداد است برگردانید.

مثال‌ها:

- reverseInt(15) === 51
- reverseInt(981) === 189
- reverseInt(500) === 5
- reverseInt(-15) === -51
- reverseInt(-90) === -9

🔸 راه حل:

- استفاده از ()parseInt:

function reverseInt(n) {
  const reversed = n.toString().split("").reverse().join("");

  return parseInt(reversed) * Math.sign(n);
}
console.log(reverseInt(15));
// خروجی: 51

3️⃣ بزرگ کردن حروف اول یک رشته

⚙️ دستورالعمل‌ها:
یک تابع بنویسید که یک رشته را قبول کند. تابع باید حرف اول هر کلمه در رشته را بزرگ کند و سپس رشته بزرگ‌شده را برگرداند.

مثال‌ها:

- `capitalize('hello, there!')
➡️ 'Hello, There!'`

- `capitalize('a lazy fox')
➡️ 'A Lazy Fox'`

- `capitalize('look, it is working!')
➡️ 'Look, It Is Working!'`

🔸 راه حل(ها):

- با استفاده از حلقه for:

function capitalize(str) {
  let result = str[0].toUpperCase();

  for (let i = 1; i < str.length; i++) {
    if (str[i - 1] === " ") {
      result += str[i].toUpperCase();
    } else {
      result += str[i];
    }
  }

  return result;
}
console.log(capitalize("hello, there!"));
// خروجی: 'Hello, There!'

- با استفاده از حلقه for of:

function capitalize(str) {
  const words = [];

  for (let word of str.split(" ")) {
    words.push(word[0].toUpperCase() + word.slice(1));
  }

  return words.join(" ");
}
console.log(capitalize("hello, there!"));
// خروجی: 'Hello, There!'

📁 #javascript

✅ کانال تخصصی لاراول
📌 @PapiDon_state

☕️ اتاق برنامه‌نویسی
📌 @PapiDon_coding

⚙️ URLSearchParams

یک ویژگی در جاوا اسکریپت است که امکان کار با پارامترهای کوئری (Query Parameters) موجود در URL‌ها را به شکلی ساده و کارآمد فراهم می‌کند. این پارامترها معمولاً پس از نماد ? در URL قرار می‌گیرند و برای ارسال اطلاعات اضافی به وب‌سایت‌ها استفاده می‌شوند.

🧐 چگونه استفاده می‌شود؟

1️⃣ ایجاد و دسترسی:

let params = new URLSearchParams(window.location.search);
   

این خط کد یک شیء URLSearchParams را از پارامترهای کوئری موجود در URL فعلی صفحه وب ایجاد می‌کند.

2️⃣ خواندن و تغییر دادن:

- برای خواندن مقادیر:

console.log(params.get('key')); // خواندن مقدار پارامتر 'key'
     

- برای افزودن یا تغییر دادن پارامترها:

params.append('newKey', 'newValue'); // افزودن پارامتر جدید
params.set('existingKey', 'newValue'); // تغییر مقدار پارامتر موجود
     

3️⃣ حذف و پاکسازی:

- برای حذف یک پارامتر خاص:

params.delete('key'); // حذف پارامتر 'key'
     

- برای پاک کردن همه پارامترها:

params.clear(); // پاک کردن تمام پارامترها
     

✨ مثال:

فرض کنید URL شما این است:
http://example.com/?product=shirt&color=blue

let params = new URLSearchParams(window.location.search);
console.log(params.get('product')); // نتیجه: "shirt"
console.log(params.get('color'));   // نتیجه: "blue"

🧩 مزایا:

- سادگی و خوانایی:
کار با پارامترهای کوئری URL به جای رشته‌های خام بسیار ساده‌تر است.

- سازگاری:
این ویژگی در اکثر مرورگرهای مدرن پشتیبانی می‌شود.

- انعطاف‌پذیری:
تغییر، اضافه کردن، و حذف پارامترها به راحتی امکان‌پذیر است.

🛠 کاربردها:

- ایجاد URLهای پیچیده برای API:
مدیریت پارامترهای دقیق برای درخواست‌های API.

- بررسی و تغییر پارامترهای کوئری:
بر اساس کاربرد کاربر در صفحه وب، مانند تغییر محتوا بر اساس انتخاب کاربر.

🔑 نکات امنیتی:

- هنگام استفاده از URLSearchParams، مهم است که به جلوگیری از تزریق کد ناخواسته توجه شود. همیشه مقادیر ورودی را تأیید کنید و از ایمن‌سازی آن‌ها در برابر حملات احتمالی اطمینان حاصل کنید.

📝 بنابراین، URLSearchParams یک ابزار قدرتمند در جاوا اسکریپت است که به توسعه‌دهندگان اجازه می‌دهد تا به راحتی با URLها کار کنند و تجربه کاربری بهتری را ارائه دهند.




📁 #javascript

✅ کانال تخصصی لاراول
📌 @PapiDon_state

☕️ اتاق برنامه‌نویسی
📌 @PapiDon_coding

🔥 درسگفتار کامل درباره Spread Syntax و Rest Operator در جاوااسکریپت

جاوااسکریپت دو قابلیت بسیار مهم و کاربردی داره که شاید در نگاه اول شبیه به هم به نظر بیان، ولی در واقع کاربردهای کاملاً متفاوتی دارن:

🔸 Spread Syntax

🔹 Rest Operator



هر دو از سه نقطه (...) استفاده می‌کنن، اما تفاوت اصلی اینه که:

- Spread Syntax برای باز کردن (پخش کردن) داده‌ها استفاده می‌شه.
- Rest Operator برای جمع کردن (گروه‌بندی کردن) داده‌ها استفاده می‌شه.

حالا بریم سراغ توضیح دقیق و ساده برای هرکدوم.

🟢 Spread Syntax → باز کردن محتوا

کاربرد اصلی:

استفاده برای کپی کردن، ترکیب کردن، یا ارسال مقدارهای جدا از هم به یک تابع.

در واقع، Spread Syntax محتوا رو از داخل آرایه یا آبجکت "پخش" می‌کنه و اون رو جدا از هم استفاده می‌کنه.

✅ مثال ۱: کپی کردن آرایه

const numbers = [1, 2, 3];
const newNumbers = [...numbers]; // کپی آرایه اصلی

console.log(newNumbers); // [1, 2, 3]

✅ این روش به جای تغییر آرایه اصلی، یک نسخه جدید می‌سازه که باعث جلوگیری از تغییرات ناخواسته می‌شه.


مثال ۲: ترکیب دو آرایه

const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];

const combined = [...numbers1, ...numbers2];

console.log(combined); // [1, 2, 3, 4, 5, 6]

✅ این روش یک روش تمیز و سریع برای ترکیب آرایه‌هاست، بدون نیاز به ()concat.


مثال ۳: ارسال آرایه به عنوان آرگومان‌های یک تابع

const numbers = [1, 2, 3];

function sum(a, b, c) {
  return a + b + c;
}

console.log(sum(...numbers)); // 6

✅ این روش به جای فرستادن آرایه، مقدارهای درونش رو جدا جدا به تابع ارسال می‌کنه.



مثال ۴: کپی کردن و ترکیب آبجکت‌ها

const person = { name: "Ali", age: 30 };
const newPerson = { ...person, city: "Tehran" };

console.log(newPerson); 
// { name: "Ali", age: 30, city: "Tehran" }

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



🔴 Rest Operator → جمع کردن مقادیر

کاربرد اصلی:
برای جمع‌آوری مقادیر باقی‌مانده در آرایه‌ها یا توابع استفاده می‌شه.

برخلاف Spread Syntax که "باز" می‌کنه، Rest Operator مقدارها رو "جمع" می‌کنه و داخل یک آرایه می‌ذاره.

✅ مثال ۱: گرفتن چند آرگومان در تابع

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15

✅ این روش همه‌ی ورودی‌ها رو جمع می‌کنه و داخل یک آرایه numbers ذخیره می‌کنه.


مثال ۲: جداسازی اولین مقدار و جمع‌آوری بقیه

const [first, ...rest] = [10, 20, 30, 40];

console.log(first); // 10
console.log(rest);  // [20, 30, 40]

✅ و `first` مقدار اول رو دریافت کرده، و `rest` بقیه‌ی مقدارها رو درون آرایه ذخیره کرده.

مثال ۳: دریافت مقادیر باقی‌مانده در آبجکت

const person = { name: "Ali", age: 30, city: "Tehran" };

const { name, ...rest } = person;

console.log(name); // "Ali"
console.log(rest); // { age: 30, city: "Tehran" }

✅ و name مقدار Ali رو دریافت کرده، و rest بقیه‌ی ویژگی‌ها رو جمع‌آوری کرده.


✨ جمع‌بندی نهایی

🔹 اگر می‌خواهی داده‌ها را از داخل یک آرایه یا آبجکت بیرون بکشی و در جاهای مختلف استفاده کنی → `Spread Syntax`

🔹 اگر می‌خواهی چندین مقدار را به عنوان یک مجموعه بگیری و در قالب یک آرایه نگه داری → `Rest Operator`


📁 #javascript

✅ کانال تخصصی لاراول
📌 @PapiDon_state

☕️ اتاق برنامه‌نویسی
📌 @PapiDon_coding

✨ نحوه عملکرد ارسال و دریافت درخواست‌ها در SPA + چرخه‌ی حیات (Lifecycle)


1️⃣ (درخواست اولیه) Initial Request – ورود به سایت برای اولین بار

داستان از اینجا شروع می‌شه که کاربر برای اولین بار سایت رو باز می‌کنه.

🔸 توی SPA این یعنی:

1. مرورگر کاربر درخواست (Request) رو به سرور می‌فرسته تا کل ساختار برنامه (HTML, CSS, JavaScript) رو دریافت کنه.

2. سرور فایل اصلی HTML رو ارسال می‌کنه (معمولاً یه صفحه‌ی ساده که فقط یه <div id="app"> داخلشه).

3. بعد از اینکه صفحه‌ی HTML لود شد، مرورگر می‌ره سراغ فایل‌های جاوااسکریپت که شامل React, Vue یا Angular هستن.

4. جاوااسکریپت اجرا می‌شه و کل اپلیکیشن روی مرورگر کاربر ساخته می‌شه بدون اینکه صفحه دوباره لود بشه.

2️⃣ (جابجایی بین صفحات بدون رفرش) Routing

خب، حالا که صفحه‌ی اولیه لود شد، کاربر می‌خواد روی یه لینک کلیک کنه (مثلاً بره به صفحه‌ی پروفایل خودش).

💡 در MPA این یعنی درخواست جدید به سرور و لود شدن یک صفحه‌ی جدید، اما در SPA ما اینو هوشمندانه‌تر مدیریت می‌کنیم.

🔸 اینجا اتفاقی که می‌افته اینه:

1. وقتی کاربر روی لینک کلیک می‌کنه، جاوااسکریپت جلوی رفرش شدن صفحه رو می‌گیره.

2. React Router / Vue Router / Angular
تشخیص می‌ده Router که کاربر کدوم صفحه رو می‌خواد ببینه.

3. اگر اطلاعات جدیدی نیاز باشه، یه درخواست AJAX یا Fetch API به سرور فرستاده می‌شه.

4. داده‌های جدید به‌صورت JSON برمی‌گردن و کامپوننت‌ها آپدیت می‌شن.

3️⃣ (دریافت اطلاعات از سرور) Fetching Data

وقتی صفحه‌ی جدید باز می‌شه، شاید نیاز باشه که داده‌ها از سرور گرفته بشن.
مثلاً کاربر به صفحه‌ی پروفایلش می‌ره و می‌خواد اطلاعات کاربری‌اش رو ببینه.

🔸 توی این مرحله:

1. جاوااسکریپت یه درخواست به سرور ارسال می‌کنه (معمولاً با ()fetch یا axios).

2. سرور اطلاعات رو از دیتابیس می‌گیره و به‌صورت JSON به مرورگر می‌فرسته.

3. بعد از دریافت داده‌ها، React/Vue/Angular کامپوننت‌ها رو با اطلاعات جدید آپدیت می‌کنن.

4️⃣ (مدیریت وضعیت) State Management

اینجا زمانی پیش میاد که داده‌های برنامه باید توی حافظه نگه داشته بشن تا تجربه‌ی کاربری بهتر بشه.

مثلاً وقتی لاگین می‌کنی، دیگه نمی‌خوای هر بار که صفحه رو عوض می‌کنی، دوباره از سرور اطلاعاتت گرفته بشه.

🔸 توی SPA معمولاً از یکی از این روش‌ها استفاده می‌شه:

1. LocalStorage یا SessionStorage:
اطلاعات در مرورگر ذخیره می‌شه.

2. State Management Libraries مثل Redux, Vuex, یا Zustand:
یه بخش مرکزی برای ذخیره‌ی وضعیت (State) داریم.

3. React Context یا useState:
برای نگه‌داشتن داده‌های کوچک در سطح کامپوننت.

5️⃣ (آپدیت شدن رابط کاربری بدون رفرش) Updating UI

یکی از جذاب‌ترین بخش‌های SPA اینه که وقتی چیزی تغییر می‌کنه، فقط همون بخش آپدیت می‌شه، نه کل صفحه!

مثلاً وقتی یه پیام جدید توی چت واتساپ می‌گیری، فقط همون پیام اضافه می‌شه، نه اینکه کل صفحه رفرش بشه.

🔸 نحوه‌ی کار:

1. داده‌های جدید از سرور میاد.
2. در واقع در React/Vue فقط همون بخش صفحه رو تغییر می‌ده.
3. کاربر هیچ تغییری حس نمی‌کنه جز اینکه محتوا آپدیت شده.

6️⃣ (بستن و تمیزکاری) Unmounting & Cleanup

وقتی کاربر از یه صفحه خارج می‌شه، داده‌ها و رویدادهای قبلی باید پاک بشن تا عملکرد سایت کند نشه.

مثلاً توی React وقتی یه کامپوننت بسته می‌شه، باید از useEffect یا componentWillUnmount برای حذف رویدادهای غیرضروری استفاده کرد.




📁#javascript

✅ کانال تخصصی لاراول
📌 @PapiDon_state

☕️ اتاق برنامه‌نویسی
📌 @PapiDon_coding