در مورد 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 رو پستش رو میزارم☺️

خروجی این کد JavaScript چیست؟ 🤔

در این مثال با Closure و اشتراک Reference بین دو متغیر سروکار داریم. دقت کنید تغییر مقدار در second چه تأثیری روی first می‌گذارد و چرا third رفتار متفاوتی دارد.

خروجی تمام console.logها را به ترتیب بنویسید.

🔖 #JavaScript #JS #چالش_جاوااسکریپت

به المنتور کاران میگن برنامه نویس وردپرس 🤦‍♂️😂😂

قسمت دوم import

📌نکته: اول مقاله export رو بخونید بعد این رو بخونید.❗️

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

برای مثال فرض کن تابعی برای محاسبه مجموع دو عدد در فایل calculator.js نوشته ای و میخواهی توی فایل اصلی جاوااسکریپت main.js از اون استفاده کنی به جای نوشتن دوباره تابع میتونی اون رو با import وارد کنی

این دستور برای وارد کردن قابلیت هایی استفاده میشه که قبلا با export از یه ماژول دیگ صادر شدند.

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

‍‍‍

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

حالا میتونیم توی فایل main.js تابع sum را وارد کنیم:

import { sum } from "./calculator.js";

console.log(sum(10,20));

توی این مثال خروجی میشه 30

خیلی راحت تونستیم اطلاعاتی که توی فایل calculatr.js صادر کردیم رو توی فایل main.js بدون نوشتن دوباره توابع تا کد ها اضافه کنیم و فقط با import اینکار رو کردیم.

جندین نوع برای import وجود داره توی جاوااسکریپت

Named Import
Default import
Namespace import
side-effect import
dynamic import

که ما توی این مقاله در مورد Named import توضیح میدیم

توی این روش میتونیم قابلیت هایی رو وارد کنیم که با Named export صادر شده باشند

برای مثال فایل calculator.js رو در نظر بگیرید:

export const PI = 3.14;

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

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

حالا در فایل main.js میتونیم به شکل زیر عمل کنیم:

import { PI, sum, subtract } from "./calculator.js";

console.log(PI);
console.log(sum(10, 5));
console.log(subtract(10, 5));

خروجی میشه:

3.14
15
5

توی این روش نام قابلیت‌هایی که وارد می‌کنیم باید با نام خروجی‌های ماژول اصلی مطابقت داشته باشد.
وارد کردن فقط یک قابلیت لازم نیست تمام خروجی‌های یک فایل را وارد کنیم. می‌توانیم فقط قابلیت موردنیاز خود را انتخاب کنیم:

import { sum } from "./calculator.js";

console.log(sum(10, 20));

برای وارد کردن چند قابلیت باید بصورت زیر عمل کنیم:

import { PI, sum, subtract } from "./calculator.js";

متد filter در JavaScript

متد filter() یکی از متدهای کاربردی آرایه‌ها در جاوااسکریپت است که برای فیلتر کردن عناصر آرایه بر اساس یک شرط مشخص استفاده می‌شود.

📌 سینتکس (Syntax)

array.filter((element, index, array) => {
  return condition;
});

🔹 مثال ساده

فرض کنید می‌خواهیم اعداد بزرگ‌تر از ۱۰ را از یک آرایه جدا کنیم:

const numbers = [5, 12, 8, 20, 3, 15];

const result = numbers.filter(num => num > 10);

console.log(result);

// [12, 20, 15]

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

فرض کنید لیستی از کاربران داریم و می‌خواهیم فقط کاربران بالای ۱۸ سال را دریافت کنیم:

const users = [
  { name: "Ali", age: 16 },
  { name: "Reza", age: 22 },
  { name: "Sara", age: 19 }
];

const adults = users.filter(user => user.age >= 18);

console.log(adults);

⚡ نکات مهم

- متد filter() یک آرایه جدید برمی‌گرداند.
- آرایه اصلی را تغییر نمی‌دهد.
- فقط عناصری را نگه می‌دارد که شرط true را برگردانند.
- اگر هیچ عنصری با شرط مطابقت نداشته باشد، آرایه خالی [] برمی‌گرداند.
- اگر شرط را return نکنید، نتیجه فیلتر خالی خواهد بود.

💡 جمع‌بندی

هر زمان خواستید از یک آرایه، عناصری را که با شرط خاصی مطابقت دارند جدا کنید، متد filter() انتخاب مناسبی است.

نکته : وقتی شما یک دستور میخواید بزارید داخل arrow function نیازی نیست کریلی بریسس باز کنید( {} ) فقط سینتکس رو بزارید و جلوش علامت دستور رو بنویسید و این خودش return میکنه نیازی به نوشتن return نیست وقتی نیازه شما ریترن کنید که داخل کریلی بریسس دستور خودتونو بنویسید.

سلام دوستان گروه توسعه دهندگان جاوااسکریپت
https://t.me/javascript_mode

میتونید برای تبادل اطلاعات جوین بشین

هیچ روز صفری نداشته باشید😉

متد find در JavaScript؛ پیدا کردن اولین نتیجه!

یکی از متدهای کاربردی آرایه‌ها در جاوااسکریپت، متد find() هست.

این متد به ما کمک می‌کنه اولین عضوی از آرایه رو پیدا کنیم که با شرط موردنظر ما مطابقت داشته باشه.

📌 مثال:

const numbers = [10, 15, 20, 25, 30];

const result = numbers.find((num) => {
  return num > 20;
});

console.log(result); // 25

در این مثال، متد find() آرایه رو بررسی می‌کنه و به محض اینکه به اولین عدد بزرگ‌تر از ۲۰ برسه، همون مقدار رو برمی‌گردونه.

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

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

تفاوت find و filter چیه؟

متد find() فقط اولین نتیجه رو برمی‌گردونه، اما filter() تمام نتایجی که با شرط مطابقت دارن رو داخل یک آرایه جدید قرار می‌ده.

💠 نسخه جدید کتابخانه تیلویند (Tailwind) منتشر شده است

🔸 ارتقا از نسخه 4.3.3 به 4.3.4

https://github.com/tailwindlabs/tailwindcss/blob/main/CHANGELOG.md

3 وبسایت کاربردی برای طراحان سایت

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

https://ui.glass/generator/

سایت دوم خیلی سایت خوبیه برای اینکه خلاقیت شما رو بالاتر ببره ایده بده بهتون یک سایت که اونواع دکمه های آماده رو در اختیار شما قرار میده و کدش رو هم میتونید دریافت بکنید:
https://cssbuttons.io/
https://uiverse.io/
دوتا لینک داره هر کدوم باز کرد براتون میتونید استفاده کنید

سایت سوم یک سایتیه که شما میتونید با استفاده از اون بکگراند های ویدیو رو حذف بکنید و کاربردیه بنظرم:
canva.com/features/video-background-remover/

موفق باشید

فردا مقاله داریم 😍

میخوام در مورد شرط های if و else براتون یه مقاله بزارم پس آماده باشید.❤️‍🔥

یکی از عزیزان یه لایبرری کامپوننت فارسی برای ساخت رابط‌های کاربری با 𝗥𝗲𝗮𝗰𝘁 و 𝗡𝗲𝘅𝘁.𝗷𝘀 توسعه دادن:

‏- راست چین از پایه
‏- 500+ بلوک آماده + دمو
‏- اعداد فارسی
‏- تقویم شمسی
‏ - نصب با CLI
‏- پشتیبانی از MCP
‏- متن‌باز و بر پایه shadcn/ui
- قابلیت انتخاب دیزاین‌سیستم

🔗 Docs

@Rads_notes

شرط if و else در جاوااسکریپت

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

دستور if زمانی اجرا می‌شود که شرط موردنظر درست (true) باشد.

let age = 20;

if (age >= 18) {
  console.log("مجاز به ورود هستید");
}

دستور else زمانی اجرا می‌شود که شرط if برقرار نباشد (false).

let age = 16;

if (age >= 18) {
  console.log("مجاز به ورود هستید");
} else {
  console.log("اجازه ورود ندارید");
}

همچنین با استفاده از else if می‌توان چندین شرط مختلف را بررسی کرد.

در نهایت، دستورات if و else به ما کمک می‌کنند تا برنامه‌ها بر اساس ورودی‌ها و شرایط مختلف، تصمیم‌های متفاوتی بگیرند.