تا حالا شده بخوای مقادیر تکراری یک آرایه رو حذف کنی؟

❌ روش قدیمی:

const unique = arr.filter((item, index) => arr.indexOf(item) === index);

✅ روش مدرن با Set:

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

const uniqueNumbers = 
[...new Set(numbers)];

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

چرا از Set استفاده کنیم؟

✅ کد کوتاه‌تر و خواناتر می‌شود.
✅ عملکرد بهتری روی آرایه‌های بزرگ دارد.
✅ یکی از قابلیت‌های کاربردی ES6 است که در پروژه‌های واقعی زیاد استفاده می‌شود.

💡 هر وقت خواستی مقادیر تکراری یک آرایه را حذف کنی، Set یکی از بهترین انتخاب‌هاست.

#JavaScript #ES6 #CodeTips #WebDevelopment #Programming #Frontend

💡 یه ترفند باحال برای دیباگ کردن

اگه تا حالا یه آرایه از آبجکت‌ها رو با console.log() چاپ کردی، حتماً دیدی خروجیش یه‌کم شلوغ و اعصاب‌خردکنه. 😅

به جاش اینو امتحان کن:

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




console.table(users);



👀 به‌جای یه خروجی شلوغ، همه‌چی رو توی یه جدول مرتب بهت نشون می‌ده.
📌 دفعه بعد که خواستی داده‌های API یا یه آرایه از آبجکت‌ها رو بررسی کنی، console.table() رو فراموش نکن. احتمالاً دیگه کمتر سراغ console.log() می‌ری. 😉

#JavaScript #Programming #CodeTips

🚀 ۵ افزونه کروم که هر برنامه‌نویس فرانت‌اند باید نصب داشته باشه

🛠 Wappalyzer با یه کلیک می‌فهمی هر سایتی با چه تکنولوژی‌هایی ساخته شده؛ از React و Next.js گرفته تا CMS و سرویس‌های Analytics.

🎨 ColorZilla رنگ هر بخش از هر سایتی رو بردار، گرادینت بساز و کد HEX یا RGB رو کپی کن.

📏 Dimensions فقط با نگه داشتن Alt، فاصله بین المان‌های صفحه رو اندازه بگیر؛ خیلی به درد پیاده‌سازی دقیق از روی دیزاین می‌خوره.

⚡ React Developer Tools اگه با React کار می‌کنی، این افزونه واجبه! کامپوننت‌ها، State و Props رو راحت بررسی و دیباگ کن.

🌐 JSONVue فایل‌های JSON رو به‌جای یه متن شلوغ، به‌صورت مرتب، رنگی و قابل جمع‌کردن نمایش می‌ده.

#Frontend #React #Chrome #ChromeExtensions #JavaScript #WebDevelopment #Developer #Programming #Nextjs

⚛️ قبل از شروع آموزش React اینا رو بلد باش.

نه در حد اینکه اسمشون رو شنیده باشی:

DOM
Event
Promise
async/await
Array Methods
Destructuring
Modules
Scope
Closure
Fetch API

چون React قرار نیست JavaScript رو برات یاد بگیره.

اگر JavaScript رو نفهمیده باشی،
React
فقط مشکل رو پیچیده‌تر می‌کنه.

📌 این پست رو برای کسی بفرست که تازه می‌خواد React شروع کنه.

#JavaScript #React #فرانت_اند #جاوااسکریپت #یادگیری_برنامه_نویسی #برنامه_نویسی

🤔 Library
و Framework چه فرقی دارن؟

خیلی ساده:

🔹 Library → تو تصمیم می‌گیری کِی ازش استفاده کنی.
🔹 Framework → ساختار و جریان کلی پروژه بیشتر توسط Framework
مشخص میشه.

مثلاً در دنیای Front-End:
React
معمولاً به‌عنوان Library شناخته میشه،

در حالی که Next.js یک Framework بر پایه React محسوب میشه.

📌 این تفاوت رو برای مصاحبه هم بلد باش.

#React #NextJS #JavaScript #فرانت_اند #برنامه_نویسی #FrontEnd

💾 LocalStorage یا SessionStorage؟

🔹 localStorage اطلاعات بعد از بستن Browser هم باقی می‌مونه.

🔹 sessionStorage اطلاعات معمولاً با پایان Session همان Tab از بین میره.

مثلاً:
تنظیمات ساده کاربر → localStorage اطلاعات موقت یک Session → sessionStorage

⚠️ هیچ‌کدوم جای مناسبی برای نگهداری Secretهای حساس نیستن.

📌 این تفاوت ساده رو خوب یاد بگیر.

#JavaScript #WebStorage #LocalStorage #SessionStorage #فرانت_اند #برنامه_نویسی

چرا filter یکی از کاربردی‌ترین متدهای JavaScriptـه؟

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

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





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



حالا:

console.log(adults);


خروجی:

[
  { name: "Ali", age: 22 },
  { name: "Reza", age: 25 }
]


یعنی filter میاد از بین آیتم‌های آرایه، فقط مواردی که شرطت رو پاس می‌کنن نگه می‌داره.

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

#JavaScript #Filter #Frontend #Programming #برنامه_نویسی #کدنویسی

اگه می‌خوای Frontend Developer بشی:

❌ هر روز دنبال Framework جدید نباش.

✅ JavaScript رو عمیق یاد بگیر.

چون Frameworkها عوض می‌شن؛
ولی JavaScript هنوز سر جاشه. 🔥

#Frontend #JavaScript #React #WebDevelopment #برنامه_نویسی

فرق slice و splice رو قاطی نکن!

این دو تا اسمشون شبیه همدیگه‌ست ولی رفتار متفاوتی دارن.




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

numbers.slice(1, 3);



خروجی:




[2, 3]  



و Array اصلی تغییر نمی‌کنه.
اما:




numbers.splice(1, 2);



آیتم‌ها رو از خود Array حذف می‌کنه.
📌 خلاصه:

slice → بخشی از Array رو برمی‌داره،
بدون تغییر اصل آرایه

splice → خود Array رو تغییر میده

#JavaScript #Array #JS #Frontend
#Programming

🔥 ۷ چیزی که قبل از استخدام شدن به‌عنوان Frontend Developer باید بلد باشی

Git و GitHub
کار با API
Authentication
مدیریت State
Error Handling
Debugging
Deploy کردن پروژه

ولی نکته اینجاست 👇
خیلی‌ها اینا رو تئوری بلدن.

ولی وقتی میگی:
«خب حالا یه پروژه از صفر بساز.»

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

اگه هدفت اینه که فقط آموزش نبینی و واقعاً بتونی پروژه بسازی، مسیر یادگیریت باید پروژه‌محور باشه.

#برنامه_نویسی #فرانت_اند #جاوااسکریپت #Frontend #JavaScript #React #Git #GitHub #برنامه_نویس #بازار_کار #استخدام #Codelines

🔥 این ترفند JavaScript رو خیلی‌ها نمی‌دونن

فرض کن اینو داری:

const user = {
  name: "Ali",
  age: 22
};



می‌خوای name رو ازش بگیری.
احتمالاً می‌نویسی:

const name = user.name;



اما می‌تونی خیلی تمیزتر بنویسی:

const { name } = user;



این قابلیت اسمش Destructuringـه.

حتی می‌تونی چندتا مقدار بگیری:

const { name, age } = user;



و جالب‌تر اینکه می‌تونی اسم متغیر رو هم عوض کنی:

const { name: username } = user;





console.log(username);



📌 اینو زیاد توی React، کار با API و پروژه‌های واقعی می‌بینی.
اگر JavaScript می‌زنی، Destructuring از اون چیزهاییه که باید واقعاً بلد باشی، نه فقط اسمش رو شنیده باشی.

#JavaScript #JS #Frontend #React
#Programming #کدنویسی #برنامه_نویسی #Codelines

🔥 ۵ قابلیت JavaScript که کدت رو تمیزتر می‌کنه

اگه هنوز اینا رو استفاده نمی‌کنی، وقتشه یادشون بگیری 👇

1. Optional Chaining



user?.profile?.name



2. Nullish Coalescing



const name = user.name ?? "Guest";



3. Destructuring



const { name, age } = user;



4. Spread



const newUser = { ...user, age: 25 };



5. Default Parameter



function greet(name = "Guest") {}



📌 اینا چیزهای کوچیکین، ولی توی پروژه‌های واقعی خیلی زیاد استفاده میشن.

#JavaScript #JS #Frontend #Programming #کدنویسی #برنامه_نویسی #Codelines

🚨 ۵ موردی که قبل از Push کردن کدت باید چک کنی

قبل از اینکه این دستور رو بزنی:
git push

اینارو ببین:

☑️ console.log
اضافی نداری؟

☑️ فایل .env اشتباهی Push نمی‌شه؟

☑️ Error
توی Console نداری؟

☑️ اسم متغیرهای تستی باقی نمونده؟

☑️ پروژه روی سیستم خودت واقعاً کار می‌کنه؟

همین ۳۰ ثانیه می‌تونه جلوی یک دردسر واقعی رو بگیره.

#Git #GitHub #Programming #Developer #Frontend #JavaScript #کدنویسی #Codelines

«اگر فقط ۳ ماه وقت داشتی برای ورود به بازار کار آماده بشی...»

این کارها رو می‌کردم:

ماه اول:
JavaScript + Git + API
ماه دوم:
React + یک پروژه واقعی
ماه سوم:
TypeScript + next + پروژه دوم + Portfolio + تمرین مصاحبه

نه اینکه:
۵ Framework
۳ زبان
۱۰ دوره
رو نصفه شروع کنم.

هدف ورود به بازار کاره، نه جمع کردن تکنولوژی.

#بازار_کار #مسیر_یادگیری #Frontend #JavaScript #React #Programming #Codelines

🚨 ۵ موردی که قبل از Push کردن کدت باید چک کنی

قبل از اینکه این دستور رو بزنی:
git push

اینارو ببین:

☑️ console.log
اضافی نداری؟

☑️ فایل .env اشتباهی Push نمی‌شه؟

☑️ Error
توی Console نداری؟

☑️ اسم متغیرهای تستی باقی نمونده؟

☑️ پروژه روی سیستم خودت واقعاً کار می‌کنه؟

همین ۳۰ ثانیه می‌تونه جلوی یک دردسر واقعی رو بگیره.

#Git #GitHub #Programming #Developer #Frontend #JavaScript #کدنویسی #Codelines

🔥 این ترفند JavaScript رو خیلی‌ها نمی‌دونن

فرض کن اینو داری:

const user = {
  name: "Ali",
  age: 22
};



می‌خوای name رو ازش بگیری.
احتمالاً می‌نویسی:

const name = user.name;



اما می‌تونی خیلی تمیزتر بنویسی:

const { name } = user;



این قابلیت اسمش Destructuringـه.

حتی می‌تونی چندتا مقدار بگیری:

const { name, age } = user;



و جالب‌تر اینکه می‌تونی اسم متغیر رو هم عوض کنی:

const { name: username } = user;





console.log(username);



📌 اینو زیاد توی React، کار با API و پروژه‌های واقعی می‌بینی.
اگر JavaScript می‌زنی، Destructuring از اون چیزهاییه که باید واقعاً بلد باشی، نه فقط اسمش رو شنیده باشی.

#JavaScript #JS #Frontend #React
#Programming #کدنویسی #برنامه_نویسی #Codelines

چرا filter یکی از کاربردی‌ترین متدهای JavaScriptـه؟

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

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





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



حالا:

console.log(adults);


خروجی:

[
  { name: "Ali", age: 22 },
  { name: "Reza", age: 25 }
]


یعنی filter میاد از بین آیتم‌های آرایه، فقط مواردی که شرطت رو پاس می‌کنن نگه می‌داره.

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

#JavaScript #Filter #Frontend #Programming #برنامه_نویسی #کدنویسی

«اگر فقط ۳ ماه وقت داشتی برای ورود به بازار کار آماده بشی...»

این کارها رو می‌کردم:

ماه اول:
JavaScript + Git + API
ماه دوم:
React + یک پروژه واقعی
ماه سوم:
TypeScript + next + پروژه دوم + Portfolio + تمرین مصاحبه

نه اینکه:
۵ Framework
۳ زبان
۱۰ دوره
رو نصفه شروع کنم.

هدف ورود به بازار کاره، نه جمع کردن تکنولوژی.

#بازار_کار #مسیر_یادگیری #Frontend #JavaScript #React #Programming #Codelines

⚛️ قبل از شروع آموزش React اینا رو بلد باش.

نه در حد اینکه اسمشون رو شنیده باشی:

DOM
Event
Promise
async/await
Array Methods
Destructuring
Modules
Scope
Closure
Fetch API

چون React قرار نیست JavaScript رو برات یاد بگیره.

اگر JavaScript رو نفهمیده باشی،
React
فقط مشکل رو پیچیده‌تر می‌کنه.

📌 این پست رو برای کسی بفرست که تازه می‌خواد React شروع کنه.

#JavaScript #React #فرانت_اند #جاوااسکریپت #یادگیری_برنامه_نویسی #برنامه_نویسی

⚡️ Arrow Function

به جای اینکه اینجوری بنویسی:

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

میتونی خیلی خلاصه‌تر بنویسی:

const sum = (a, b) => a + b;

هم کد کوتاه‌تره، هم خواناتر.

📌 فقط یادت باشه Arrow Function همیشه جای Function معمولی رو نمی‌گیره و توی بحث this رفتار متفاوتی داره.

ولی برای اکثر کارهای روزمره، انتخاب فوق‌العاده‌ایه.

#JavaScript #Frontend