🚀 یه متد خفن توی جاوااسکریپت: reduce()

با reduce() می‌تونی کل یه آرایه رو به یه مقدار تبدیل کنی؛ مثلاً مجموع اعدادش رو حساب کنی 👇

const nums = [10, 20, 30, 40];

const sum = nums.reduce((acc, num) => acc + num, 0);

console.log(sum); // 100

💡 acc مقدار جمع‌شده‌ست و num عدد فعلی.

خلاصه بگم: هر وقت خواستی آیتم‌های یه آرایه رو پردازش کنی و به یه نتیجه برسی، reduce() به کارت میاد. 😎

یه نکته ای رو میخواستم بگم در مورد کد زدنه

وقتی دارید کد میزنید مراحلی که پیش میرید رو برا خودتون بگید با خودتون حرف بزنید روش حل اون مسئله یا کد رو با خودتون بلند بگید
تست کنید ضرر نمیکنید یهو جرقه میخوره جواب مسئله حل نشدنی که داشتید حل میشه 😜

همیشه شاد باشید.

بچه ها یچیزی دوستانه بهتون بگم وقتی با ویدیو کد میزنید حتمی بعدش چند بار دوباره همون مسئله رو حل کنید کدشو بدون اینکه ویدیو رو ببینید بزنید اونجاست که به خطا و ارور میخورید

با یکبار ویدیو دیدن و یکبار کد زدن یاد نمیگیرید و متوجه نمیشید کامل حتمی بعد ویدیو دوباره کد رو حذف کنید خودتون سعی کنید بدون کمک بزنید کد رو

قول میدم بهتون با اینکار بهتر از قبل تون میشید.

لینک های دانلود دوبله دوره جاوااسکریپت جوناس:

فصل اول - فصل دوم - فصل سوم - فصل چهارم - فصل پنجم - فصل ششم - فصل هفتم - فصل هشتم - فصل نهم - فصل دهم - فصل یازدهم - فصل دوازدهم - فصل سیزدهم - فصل چهاردهم - فصل پانزدهم - فصل شانزدهم - فصل هفدهم - فصل هجدهم - فصل نوزدهم - فصل بیستم

فایل های مورد نیاز دوره

لینک های دانلود دوبله دوره ریکت جوناس:

فصل اول - فصل دوم - فصل سوم - فصل چهارم - فصل پنجم - فصل ششم - فصل هفتم - فصل هشتم - فصل نهم - فصل دهم - فصل یازدهم - فصل دوازدهم - فصل سیزدهم - فصل چهاردهم (چون تقریبا نیازی بهش ندارید، دوبله نشده) - فصل پانزدهم - فصل شانزدهم - فصل هفدهم - فصل هجدهم (بخش اول - بخش دوم) - فصل نوزدهم - فصل بیستم - فصل بیست و یکم - فصل بیست و دوم - فصل بیست و سوم - فصل بیست و چهارم - فصل بیست و پنجم - فصل بیست و ششم - فصل بیست و هفتم - فصل بیست و هشتم - فصل بیست و نهم (بخش اول - بخش دوم - بخش سوم) - فصل سی ام

فایل های مورد نیاز دوره

بزودی یکسری از دوره های رایگان بعضی از مباحث که فکر میکنم خوبن رو قرار میدم

خب یکسری دوره های مربوط به فرانت اند رو میخوام بزارم براتون

دوره html css ( صوفی لرن ) کامل و جامع رایگان

https://youtube.com/playlist?list=PLOjAN00I0bBc&si=ZjnFSxeRlis9WwHE

دوره فلکس باکس ( سالار حقیقت نیا ) رایگان

https://youtube.com/playlist?list=PLprvbQiR3cN-fVGiLy0DrevvfjJaFUNFq&si=AP6fuKwhV63lN6yT

دوره فلکس باکس ( سبز لرن )

https://sabzlearn.ir/course/flex-box/

دوره فلکس باکس ( میلاد بهرامی ) رایگان

https://youtube.com/playlist?list=PLhpS3tgUDZcpcJ9hfsSXZN0xEbNkBcR0n&si=_r9hahFObfmezdy4

دوره سی اس اس گرید ( سبز لرن )

https://sabzlearn.ir/course/css-grid/

دوره تیلویند ( سالار حقیقت نیا )

https://youtube.com/playlist?list=PLprvbQiR3cN9Mt_rINlJX6UOn4utVPBX2&si=86RV8F_6_4SB3rLI

دوره تیلویتد ( میلاد بهرامی )

https://youtube.com/playlist?list=PLhpS3tgUDZcp1fZLQu5I58ubM8B5ahBya&si=sKVvaBAFt10mcmk0

دوره گیت و گیت هاب ( میلاد بهرامی )

https://youtube.com/playlist?list=PLhpS3tgUDZcpamFNTdjXyRKzFGaBAkcLq&si=s6X7aqx2WXVPpeyK

دوره جاواااسکریپت

صوفی لرن (پیشنهادی) پولی
https://soufilabs.ir/pages/single-course.html?course=khore-javascript


دوره جاوالسکریپت ( سالار حقیقت نیا )

https://youtube.com/playlist?list=PLprvbQiR3cN_s_scnGOn8hsp0QFHLz4uD&si=4tBMJ--G7f4phwfW

دوره جاوااسکریپت و ریکت ( جوناس )

https://t.me/undefinedee/273

همیشه در حال پیدا کردن بهترین کامیت:😂😂

منم همینطور 😂😂

میخوام در مورد سوالی که همیشه مطرح میشه نظر خودمو بگم

همیشه افرادی هستن که براشون سواله آیا با پیشرفت هوش مصنوعی خوبه من حوضه فرانت اند رو ادامه بدم یا نه؟ یا اصلا بیام سمت برنامه نویسی یا نه هوش مصنوعی جای برنامه نویس ها رو میگیره؟

نوع سوال ها فرق داره اما وقتی وارد میشی تهش میرسیم به جایگاه برنامه نویس و هوش مصنوعی

دوستان به نظر من هوش مصنوعی العان در حال حاضر جای برنامه نویس رو نمیگیره و توی کد زدن به برنامه نویس کمک میکنه که سرعت کد زدنش افزایش پیدا بکنه و پروژه رو در زمان کمتری کامل کنه
هوش مصنوعی جای برنامه نویس های جونیور و سینیور رو نمیگیره فقط داره نحوه کار برنامه نویسا رو تغییر میده
هوش مصنوعی همینطور که گفتم یه ابزاره که به برنامه نویس کمک میکنه اما تضمین کننده نتیجه نیست
هوش مصنوعی میتونه کد بزنه اما برنامه نویس باید کد رو تمیز کنه باید امنیت و عملکرد اون کد با نیاز پروژه رو بررسی کنه
در ضمن کد نویسی فقط کد نویسی نیست ، فهم مسئله راه حل برای حل مشکل پروژه معماری دیباگ کردن و تصمیم گیری فنی پروژه بخش مهمی هستن که توسط برنامه نویس انجام میشه و هوش مصنوعی نمیتونه جاش رو بگیره

به جای ترسیدن از هوش مصنوعی یاد بگیریم چطور ازش استفاده کنیم تا بتونیم خروجی بهتری بگیریم

کسایی برنده ان که از هوش مصنوعی استفاده میکنن به عنوان ابزار کمکی و بهبود سرعت کارشون.

متد includes در جاوااسکریپت

این متد یکی از کاربردی ترین متد های جاوااسکریپت که داخل آرایه و یا یک متن رو بررسی میکنه و میبینه که مثلا عدد ۵ داخل آن وجود داره یا نه

مثال برای آرایه :

const fruits = ["apple", "banana", "orange"];

console.log(fruits.includes("banana");  // true 

console.log(fruits.includes("grape");  // false 

در مثال بالا میبینید که ما یک متغییر تعریف کردیم به نام fruits که داخلش یک آرایه قرار دادیم و داخل آرایه چند مقدار گذاشتیم

پایین متغییر لاگ گرفتیم برای بررسی و متد includes رو روی متغیر fruits فراخانی میکنیم

این متد میاد داخل متن یا آرایه دنبال کلمه ای که مشخص کردیم میگرده اگر وجود داشت اون مقدار داخل آرایه یا متن در جواب true رو بر میگردونه ولی اگر وجود نداشت false رو بر میگردونه

خب حالا بریم سراغ مثال متنی

const text = "I love JavaScript";

console.log(text.includes("JavaScript")); // true
console.log(text.includes("Python"));     // false

در مثال بالا یک متن هست که یک متن در مورد جاوااسکریپت نوشته شده داخل متغیر و بعد لاگ گرفته و با متد includes اول دنبال کلمه Javascript بوده که چون داخل کلمه داخل متن هست مقدار true رو بر میگردونه

داخل لاگ بعدی دنبال کلمه Python بوده و چون داخل متن نبوده false رو برگردونده

📌 متد forEach در جاوااسکریپت

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

🔹 مثال کاربردی:

const names = ["Ali", "Sara", "Mohsen"];

names.forEach((name) => {
  console.log(name);
});

📤 خروجی:

Ali
Sara
Mohsen

💡 چند نکته مهم:

- روی هر عنصر آرایه، تابع رو اجرا می‌کنه.
- به‌صورت پیش‌فرض مقدار جدیدی برنمی‌گردونه ("undefined").
- برای متوقف کردن حلقه با break مناسب نیست.
- اگه به اندیس هر عنصر نیاز داشته باشی، می‌تونی پارامتر دوم رو بگیری:

names.forEach((name, index) => {
  console.log(index, name);
});

✅ کِی ازش استفاده کنیم؟

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

موقع کد زدن گوش بدید ❤️

توی تلگرام باگ جدیدی پیدا شده که با کلیک روی این لینک اکانت تلگرام شما پاک میشه.

روی هر لینکی کلیک نکنید!

🌙 بعضی شب‌ها، آدم نه خوابش می‌برد، نه دلش می‌خواهد بیدار بماند...

فقط دلش می‌خواهد کمی کمتر فکر کند، کمی کمتر دلش بگیرد، و کمی بیشتر آرام باشد. 🖤

🟨 متد map() در جاوااسکریپت

متد map() یکی از متدهای پرکاربرد آرایه‌ها در جاوااسکریپت است که به ما اجازه می‌دهد روی تمام اعضای یک آرایه عملیات انجام دهیم و یک آرایه جدید با نتایج تغییر‌یافته بسازیم.

📌 مثال ساده

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

const doubled = numbers.map(num => num * 2);

console.log(doubled);
// [2, 4, 6, 8]

در این مثال، هر عدد در ۲ ضرب شده و نتیجه در یک آرایه جدید قرار گرفته است.

💡 نکات مهم

- متد map() روی تمام اعضای آرایه اجرا می‌شود.
- آرایه اصلی را تغییر نمی‌دهد.
- آرایه جدیدی با همان تعداد اعضا برمی‌گرداند.
- برای تبدیل داده‌ها و ساخت لیستی از نتایج جدید بسیار کاربردی است.

🎯 چه زمانی از map() استفاده کنیم؟

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

نکته برنامه‌نویسی: اگر فقط می‌خواهی روی اعضای آرایه حلقه بزنی و عملیات انجام بدهی، بدون اینکه آرایه جدیدی بسازی، معمولاً forEach() انتخاب مناسب‌تری است.

در مورد import و export توی جاوااسکریپت پست بزارم؟
ریکشن بزارید.

🔴امروز 7 آبان، سالروز بزرگداشت اولین و بزرگترین پادشاه هخامنشیان، کوروش بزرگه🤴
سال ۵۳۹ قبل از میلاد، در تاریخ ۷ آبان، کوروش بعد از جنگ‌های طولانی بابل رو فتح کرد و وارد این سرزمین شد.
مردم این منطقه تصور می‌کردن بعد از این فتح قراره توسط سربازان ایرانی کشته یا اسیر بشن؛ ولی برخلاف تفکر اونا، کوروش احترام زیادی واسشون قائل بود و ذره‌ای بهشون ستم نکرد.

قسمت اول export

در پروژه های وپچیک معمولا تمام کد ها رو توی یک فایل قرار میدیم ولی توی پروژه های بزرگ تر توی یک فایل نوشتن کد ها کار درستی نیست و خوانایی کد رو کم میکنه برای بهتر شدن خوانایی کد میتوانیم کد ها را در فایل جداگانه قرار بدیم و از قابلیت ماژول ها استفاده کنیم.

توی این پست میخوایم در مورد export بگیم و ادامه رو توی پست بعدی براتون می نویسم.

دستور export به ما این اجازه رو میده که متغیر ها و توابع و کلاس ها و سایر قابلیت هایی یک فایل رو برای استفاده توی یک فایل دیگ در دسترس بزاریم

بیاین یک مثال بزنیم برای درک بهتر مثلا شما میخواهید هدر وبسایت خودتان را به صورت داینامیک توی همه ی صفحات نمایش بدید اگر به صورت استاتیک این کار رو بخواید انجام بدید حتمی باید تمام کد های هدر رو توی تمام فایلا بزارید ولی با ماژول ها یک بار اون رو میسازید و export میگیرید و توی تمام صفحات فقط یک خط کد اضافه میکنید با اینکار هم کد خودتون خوانا تر میشه و هم از تکرار کد ها جلوگیری میشه.

بریم تو دل کد که کاربرد واقعی اون رو متوجه بشیم

برای مثال فایلی به نام calculator.js ایجاد میکنیم:


‍‍‍

export const number = 10;

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

توی این مثال متغیر number و تایع sum با استفاده از export در دسترس ماژول های دیگ قرار گرفتند

یه نکته اینجا وجود داره متغیر ها و توابعی که صادر نشده اند به طور مستقیم از طریق این ماژول قابل وارد کردن نیستند.

مثلا:

const name = "Mohsen";

export const age = 21;

توی این مثال فقط سن صادر شده و نام همچنان داخل همین ماژول باقی میماند


انواع export توی جاوااسکریپت

named export:
برای صادر کردن قابلیت هایی با نام مشخص میتوان چندین خروجی نام دار داشت
default export:
برای تعریف یک خروجی پیشفرض هر ماژول حداکثر یک خروجی پیش فرض دارد

من پیشنهاد میکنم از روش named export استفاده کنید و توی این پست هم همین روش رو توضیح میدم اگر خواستید روش دیفالت اکسپورت هم یاد بگیرید میسپارم به خودتون یه سرچی دربارش بکنید.


توی روش named export میتونیم چند متغیر تایبع یا کلاس را از یک فایل صادر کنیم هر خروجی نام مشخص خودشو داره
روش اول استفاده از export هنگام تعریف

توی این روش ما وقتی تایع یا متغیر را تعریف میکنیم همراهش اکسپورت هم میگیریم مثلا فرض کنید فایلی به نام user.js داریم:

export const name = "mohsen";
export const age = 21;

export function great(){
console.log("Hello World);
};

توی این مثالی که زدم سه خروجی name , age , great داریم با این روش هرکدام از این قابلیت ها میتونند توی فایل های دیگ استفاده بشن

روش دوم استفاده از export در انتهای فایل

ما اول میتونیم متغیر ها تابع ها را تعریف کنیم و بعد همه را انتهای فایل صادر کنیم مثال:

const name = "mohsen";
const age = 21;

function great(){
console.log("Hello World");
};

export { name , age , great};

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

حالا بریم سراغ کاربرد این روش

این روش فقط وقتی مفید که یه فایل چند قابلیت مرتبط داشته باشه

مثلا توی فایل calculator.js میتونیم چند تا تابع ریاضی داشته باشیم:

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

export function subtract(a, b) {
  return a - b;
}

export function multiply(a, b) {
  return a * b;
};

حالا این فایل سه تابع صادر میکند که هر کدوم اسم مشخصی دارد.

توی این پست export رو توضیح دادم توی پست بعدی نحوه import هم براتون توضیح میدم.

باتشکر.

یه کارت مقالات برای تمرین و افزایش مهارت هاتون.

فردا قسمت import رو پستش رو میزارم☺️