💡 JavaScript Tip #1
در جاوااسکریپت، کپی کردن آبجکتها همیشه اون چیزی نیست که فکر میکنیم! 🤔
مثلاً:
خروجی:
چرا؟
چون user1 و user2 به جای داشتن دو آبجکت جدا، هر دو به یک آبجکت در حافظه اشاره میکنند.
برای ساخت یک کپی واقعی میتوانیم از روشهایی مثل
استفاده کنیم:
این موضوع در کار با React، مدیریت State و جلوگیری از باگها خیلی مهم است.
#JavaScript #CodeTrail
در جاوااسکریپت، کپی کردن آبجکتها همیشه اون چیزی نیست که فکر میکنیم! 🤔
مثلاً:
let user1 = {
name: "Sara"
};
let user2 = user1;
user2.name = "Raha";
console.log(user1.name);خروجی:
Saraچرا؟
چون user1 و user2 به جای داشتن دو آبجکت جدا، هر دو به یک آبجکت در حافظه اشاره میکنند.
برای ساخت یک کپی واقعی میتوانیم از روشهایی مثل
spread operator
استفاده کنیم:
let user2 = { ...user1 };این موضوع در کار با React، مدیریت State و جلوگیری از باگها خیلی مهم است.
#JavaScript #CodeTrail
❤3🤩1
💡 JavaScript Tip #2
فکر میکنی خروجی این کد چیه؟ 👀
قبل از اینکه جواب رو ببینی، چند ثانیه بهش فکر کن...
👇
👇
👇
خروجی:
چون جاوااسکریپت قبل از استفاده از
و در نهایت:
📌 این یکی از مثالهای جالب Type Coercion در JavaScript هست.
#JavaScript #CodeTrail
🔗https://t.me/codetrailWeb
فکر میکنی خروجی این کد چیه؟ 👀
console.log([] + [])
قبل از اینکه جواب رو ببینی، چند ثانیه بهش فکر کن...
👇
👇
👇
خروجی:
""
چون جاوااسکریپت قبل از استفاده از
+، آرایهها رو به رشته تبدیل میکنه:String([]) // ""
و در نهایت:
"" + ""
📌 این یکی از مثالهای جالب Type Coercion در JavaScript هست.
#JavaScript #CodeTrail
🔗https://t.me/codetrailWeb
❤2👏1
CodeTrail🚀
📌خروجی پروژه امروز کد این مینی پروژه در پست بعدی👇
💡 JavaScript Tip #3
در این پروژه با استفاده از OOP (Object-Oriented Programming) یک سیستم Modal قابل استفاده مجدد پیادهسازی شده است.
به جای نوشتن کد تکراری برای هر Modal، فقط کافی است یک Instance جدید از کلاس Modal بسازید.
✅ Reusable Code
✅ Clean Code
✅ Easy to Maintain
#JavaScript #OOP #CodeTrail
در این پروژه با استفاده از OOP (Object-Oriented Programming) یک سیستم Modal قابل استفاده مجدد پیادهسازی شده است.
به جای نوشتن کد تکراری برای هر Modal، فقط کافی است یک Instance جدید از کلاس Modal بسازید.
✅ Reusable Code
✅ Clean Code
✅ Easy to Maintain
#JavaScript #OOP #CodeTrail
❤2👏1
💡 #JavaScript OOP Fact Tip #4
میدونستی در JavaScript لازم نیست دو کلاس از یک والد ارثبری کنن تا Polymorphism داشته باشی؟
اگر چند آبجکت فقط متدی با اسم یکسان داشته باشن، میتونی با همهشون یکسان رفتار کنی
خروجی 👇
📌 جاوااسکریپت به جای اینکه بپرسه «این آبجکت از چه کلاسی ساخته شده؟»، فقط میبینه آیا متد "speak()" رو داره یا نه
به این سبک، Duck Typing میگن.
#JavaScript #OOP #CodeTrail
میدونستی در JavaScript لازم نیست دو کلاس از یک والد ارثبری کنن تا Polymorphism داشته باشی؟
اگر چند آبجکت فقط متدی با اسم یکسان داشته باشن، میتونی با همهشون یکسان رفتار کنی
speak() {
console.log("Woof!");
}
}
class Cat {
speak() {
console.log("Meow!");
}
}
function makeSound(animal) {
animal.speak();
}
makeSound(new Dog());
makeSound(new Cat());خروجی 👇
Woof!
Meow!📌 جاوااسکریپت به جای اینکه بپرسه «این آبجکت از چه کلاسی ساخته شده؟»، فقط میبینه آیا متد "speak()" رو داره یا نه
به این سبک، Duck Typing میگن.
#JavaScript #OOP #CodeTrail
❤2🔥1
💡 #Frontend Insight
یه نکته جالب که امروز یاد گرفتم...
مرورگر فقط فایلهای JavaScript رو دانلود نمیکنه؛ بعد از دانلود، باید اونها رو در سه مرحله پردازش کنه:
Download → Parse → Execute
جالب اینجاست که توی بعضی پروژهها، زمان Parse و Execute حتی از زمان Download هم بیشتره!
📌 یعنی همیشه مشکل کند بودن سایت، سرعت اینترنت یا حجم فایل نیست؛ گاهی خود JavaScript زمان زیادی برای پردازش نیاز داره
📌 برای همین، حذف یک کتابخونهی غیرضروری بعضی وقتها تأثیر بیشتری روی سرعت سایت داره تا کم کردن چند کیلوبایت از حجم فایل
📌 به همین دلیله که توسعهدهندههای حرفهای سعی میکنن Taskهای سنگین رو به بخشهای کوچکتر تقسیم کنن یا اجرای اونها رو به زمان مناسب موکول کنن
🔗 https://t.me/codetrailWeb
#Frontend #JavaScript #Performance #CodeTrail
یه نکته جالب که امروز یاد گرفتم...
مرورگر فقط فایلهای JavaScript رو دانلود نمیکنه؛ بعد از دانلود، باید اونها رو در سه مرحله پردازش کنه:
Download → Parse → Execute
جالب اینجاست که توی بعضی پروژهها، زمان Parse و Execute حتی از زمان Download هم بیشتره!
📌 یعنی همیشه مشکل کند بودن سایت، سرعت اینترنت یا حجم فایل نیست؛ گاهی خود JavaScript زمان زیادی برای پردازش نیاز داره
📌 برای همین، حذف یک کتابخونهی غیرضروری بعضی وقتها تأثیر بیشتری روی سرعت سایت داره تا کم کردن چند کیلوبایت از حجم فایل
📌 به همین دلیله که توسعهدهندههای حرفهای سعی میکنن Taskهای سنگین رو به بخشهای کوچکتر تقسیم کنن یا اجرای اونها رو به زمان مناسب موکول کنن
🔗 https://t.me/codetrailWeb
#Frontend #JavaScript #Performance #CodeTrail
❤2🔥1
💡 #React Fact
در React، تغییر دادن مستقیم یک "state" میتونه باعث بشه UI اصلاً آپدیت نشه
مثلاً این کار اشتباهه:
اینجا مقدار "name" تغییر کرده، اما React لزوماً متوجه این تغییر نمیشه
باید یک object جدید بسازی:
📌 دلیلش اینه که React برای تشخیص خیلی از تغییرات، به reference آبجکتها توجه میکنه، نه اینکه تکتک propertyهای داخلشون رو بررسی کنه
یعنی برای React:
oldUser === newUser
اگر "true" باشه، ممکنه نتیجه بگیره که چیزی تغییر نکرده.
🤯 پس در React، گاهی حتی وقتی مقدار داخل یک Object رو تغییر دادی، React میگه: «من چیزی ندیدم.»
#React #JavaScript #Frontend #CodeTrail
در React، تغییر دادن مستقیم یک "state" میتونه باعث بشه UI اصلاً آپدیت نشه
مثلاً این کار اشتباهه:
const [user, setUser] = useState({
name: "Fateme"
});
user.name = "Sara";اینجا مقدار "name" تغییر کرده، اما React لزوماً متوجه این تغییر نمیشه
باید یک object جدید بسازی:
setUser({
...user,
name: "Sara"
});📌 دلیلش اینه که React برای تشخیص خیلی از تغییرات، به reference آبجکتها توجه میکنه، نه اینکه تکتک propertyهای داخلشون رو بررسی کنه
یعنی برای React:
oldUser === newUser
اگر "true" باشه، ممکنه نتیجه بگیره که چیزی تغییر نکرده.
🤯 پس در React، گاهی حتی وقتی مقدار داخل یک Object رو تغییر دادی، React میگه: «من چیزی ندیدم.»
#React #JavaScript #Frontend #CodeTrail
❤6👏1
🌐 Website معرفی
⭕️ Bundlephobia
تا حالا قبل از نصب یک پکیج، بررسی کردی چقدر به حجم پروژه اضافه میکنه؟😶
فقط اسم پکیج رو وارد کن تا ببینی:
📦 حجم واقعی پکیج
⚡ حجم بعد از Gzip
📊 تعداد وابستگیها
⏱️ زمان تقریبی دانلود
📌 قبل از نصب هر کتابخونه، یک بار این سایت رو چک کن؛ شاید همون یک پکیج باعث کند شدن پروژهات بشه🐌
🔗https://bundlephobia.com
#JavaScript #Performance #CodeTrail
⭕️ Bundlephobia
تا حالا قبل از نصب یک پکیج، بررسی کردی چقدر به حجم پروژه اضافه میکنه؟😶
فقط اسم پکیج رو وارد کن تا ببینی:
📦 حجم واقعی پکیج
⚡ حجم بعد از Gzip
📊 تعداد وابستگیها
⏱️ زمان تقریبی دانلود
📌 قبل از نصب هر کتابخونه، یک بار این سایت رو چک کن؛ شاید همون یک پکیج باعث کند شدن پروژهات بشه🐌
🔗https://bundlephobia.com
#JavaScript #Performance #CodeTrail
Bundlephobia
Bundlephobia | Size of npm dependencies
Bundlephobia helps you find the performance impact of npm packages. Find the size of any javascript package and its effect on your frontend bundle.
🔥4❤1
CodeTrail🚀
🧠 چالش JavaScript به نظرتون خروجی این کد چی میشه؟ const a = [1, 2, 3]; const b = a.map(Number); console.log(b); console.log(b == a); console.log(b === a); خروجی هر سه "console.log" رو حدس بزنید❓ جوابهاتون رو میتونین توی کامنت بنویسید👇
✅ جواب چالش JavaScript#
اگر حدستون این بود:
[1, 2, 3]
false
false
درست حدس زدید! 🎯
اما چرا؟ 🤔
const b = a.map(Number);
چون map یک آرایه جدید ایجاد میکنه
بنابراین a و b با اینکه دقیقا محتویات یکسانی دارن، اما دو آرایه متفاوت هستن
پس:
b == a // false
b === a // false
چون آرایهها در JavaScript با Reference مقایسه میشن، نه با محتویاتشون
برای مثال:
اینجا "b" و "a" به همون آرایه اشاره میکنن، پس نتیجه "true" میشه
📌 نکته مهم:
[1, 2, 3] === [1, 2, 3] // false
حتی اگر محتویات دو آرایه کاملاً یکسان باشه، چون دو Reference متفاوت دارن، نتیجه "false" خواهد بود.
#JavaScript #JS #Frontend #Programming
اگر حدستون این بود:
[1, 2, 3]
false
false
درست حدس زدید! 🎯
اما چرا؟ 🤔
const b = a.map(Number);
چون map یک آرایه جدید ایجاد میکنه
بنابراین a و b با اینکه دقیقا محتویات یکسانی دارن، اما دو آرایه متفاوت هستن
پس:
b == a // false
b === a // false
چون آرایهها در JavaScript با Reference مقایسه میشن، نه با محتویاتشون
برای مثال:
const a = [1, 2, 3];
const b = a;
console.log(b === a); // true
اینجا "b" و "a" به همون آرایه اشاره میکنن، پس نتیجه "true" میشه
📌 نکته مهم:
[1, 2, 3] === [1, 2, 3] // false
حتی اگر محتویات دو آرایه کاملاً یکسان باشه، چون دو Reference متفاوت دارن، نتیجه "false" خواهد بود.
#JavaScript #JS #Frontend #Programming
❤3🔥1
تا حالا به این فکر کردی که JavaScript چطور با وجود Dynamic بودن، میتونه اینقدر سریع اجرا بشه؟🤔
پشت این سرعت، فقط خود JavaScript نیست؛ V8 Engine نقش مهمی داره
توی این پست یه نگاه کوتاه به کاری که V8 و JIT Compilation انجام میدن انداختیم👆
🔗https://t.me/codetrailWeb
#JavaScript #Performance #CodeTrail
پشت این سرعت، فقط خود JavaScript نیست؛ V8 Engine نقش مهمی داره
توی این پست یه نگاه کوتاه به کاری که V8 و JIT Compilation انجام میدن انداختیم👆
🔗https://t.me/codetrailWeb
#JavaScript #Performance #CodeTrail
❤3👌2
💡 TypeScript Insight
📌یک نکته درباره TypeScript:
تایپاسکریپت در زمان اجرای برنامه وجود نداره❕
در ابتدا کدهای TypeScript به JavaScript تبدیل میشن و در نهایت مرورگر فقط JavaScript رو اجرا میکنه
یعنی TypeScript خودش یک زبان Runtime نیست
بلکه در زمان توسعه، به بررسی Typeها و پیدا کردن خطاها کمک میکنه
📌 برای همین Typeهایی که در TypeScript تعریف میکنیم، در کد نهایی JavaScript وجود ندارن
🔗https://t.me/codetrailWeb
#TypeScript #JavaScript
📌یک نکته درباره TypeScript:
تایپاسکریپت در زمان اجرای برنامه وجود نداره❕
در ابتدا کدهای TypeScript به JavaScript تبدیل میشن و در نهایت مرورگر فقط JavaScript رو اجرا میکنه
یعنی TypeScript خودش یک زبان Runtime نیست
بلکه در زمان توسعه، به بررسی Typeها و پیدا کردن خطاها کمک میکنه
📌 برای همین Typeهایی که در TypeScript تعریف میکنیم، در کد نهایی JavaScript وجود ندارن
🔗https://t.me/codetrailWeb
#TypeScript #JavaScript
👏3❤1
💡 JavaScript Insight
پشت صحنه اجرای JavaScript چه اتفاقی میافته؟ 🤔
🔗https://t.me/codetrailWeb
#JavaScript #Frontend
پشت صحنه اجرای JavaScript چه اتفاقی میافته؟ 🤔
برای فهمیدن این موضوع، باید با چند مفهوم مهم آشنا بشیم:
🔹 Call Stack
🔹 Web APIs
🔹 Task Queue
🔹 Event Loop
━━━━━━━━━━━━━━
🔹 ۱. Call Stack
محلیه که کدهای معمولی JavaScript برای اجرا واردش میشن
مثلاً:
console.log("A");
setTimeout(() => {
console.log("B");
}, 1000);
console.log("C");
ابتدا "A" اجرا میشه
بعد "setTimeout" اجرا میشه، اما JavaScript برای یک ثانیه منتظر نمیمونه
مرورگر مدیریت Timer رو بر عهده میگیره و JavaScript میره سراغ دستور بعدی
در نتیجه "C" هم اجرا میشه
━━━━━━━━━━━━━━
🔹 ۲. Web APIs
بعضی قابلیتها مستقیماً توسط موتور JavaScript انجام نمیشن و محیط مرورگر مدیریتشون میکنه.
مثلاً:
⏱️ "setTimeout" و "setInterval"
🌐 درخواستهای شبکه مثل "fetch"
🖱️ رویدادهایی مثل کلیک و تایپ
📍 بعضی قابلیتهای مرورگر مثل Geolocation
━━━━━━━━━━━━━━
🔹 ۳. Task Queue
وقتی کارهایی مثل Timer آماده اجرا میشن، Callback اونها در صف منتظر میمونه
در مثال ما، بعد از یک ثانیه:
console.log("B");
آماده اجرا میشه و منتظر میمونه
━━━━━━━━━━━━━━
🔹 ۴. Event Loop
اینجا Event Loop وارد ماجرا میشه
Event Loop مرتب بررسی میکنه:
«آیا Call Stack خالیه؟»
اگر خالی باشه و کاری در صف منتظر اجرا باشه، اون کار رو وارد Call Stack میکنه
بعد JavaScript اون رو اجرا میکنه
پس در نهایت:
A
C
B
📌 خلاصه:
Call Stack → محل اجرای کدها
Web APIs → مدیریت بعضی قابلیتهای مرورگر
Task Queue → صف کارهای آماده اجرا
Event Loop → هماهنگکننده انتقال کارها به Call Stack
نکته مهم اینه که Event Loop خودش کد رو اجرا نمیکنه؛ فقط زمان مناسب ورود کارهای آماده به Call Stack رو هماهنگ میکنه
🔗https://t.me/codetrailWeb
#JavaScript #Frontend
❤2👍1🔥1
💡 یک نکته برای مسیر یادگیری
وقتی یک پروژه رو از روی آموزش میسازید، سعی کنید بعد از تمام شدن آموزش پروژه رو همونجا رها نکنید
چند قابلیت جدید بهش اضافه کنید که مدرس آموزش نداده
مثلاً من توی پروژه Mini Store بعد از دیدن آموزش، قابلیتهایی مثل:
🔹 جستوجوی محصولات
🔹 مرتبسازی بر اساس قیمت
🔹 دریافت اطلاعات با Fetch
🔹 نمایش جزئیات محصول در Modal
🔹 نمایش ۴ محصول جدید با هر بار کلیک روی «محصولات بیشتر»
🔹 ذخیره تم دارک و لایت در LocalStorage
رو خودم به پروژه اضافه کردم
📌 این کار باعث میشه فقط کد مدرس رو تکرار نکنید و مجبور بشید خودتون فکر کنید که:
این قابلیت رو چطور پیاده کنم؟
همینجا یادگیری واقعیتر شروع میشه⚡️
چون ممکنه هنگام اضافه کردن یک قابلیت مجبور بشید مستندات بخونید، سرچ کنید، خطاها رو بررسی کنید و چند راه مختلف رو امتحان کنید📃
📌به نظرم پروژه آموزشی زمانی واقعاً ارزشمند میشه که بعد از تموم شدن آموزش دیگه دقیقاً ندونید قدم بعدی چیه و مجبور بشید خودتون تصمیم بگیرید👌
💻 Source Code :
https://github.com/Helali-Dev/Mini-Store-Js
#JavaScript #Frontend
وقتی یک پروژه رو از روی آموزش میسازید، سعی کنید بعد از تمام شدن آموزش پروژه رو همونجا رها نکنید
چند قابلیت جدید بهش اضافه کنید که مدرس آموزش نداده
مثلاً من توی پروژه Mini Store بعد از دیدن آموزش، قابلیتهایی مثل:
🔹 جستوجوی محصولات
🔹 مرتبسازی بر اساس قیمت
🔹 دریافت اطلاعات با Fetch
🔹 نمایش جزئیات محصول در Modal
🔹 نمایش ۴ محصول جدید با هر بار کلیک روی «محصولات بیشتر»
🔹 ذخیره تم دارک و لایت در LocalStorage
رو خودم به پروژه اضافه کردم
📌 این کار باعث میشه فقط کد مدرس رو تکرار نکنید و مجبور بشید خودتون فکر کنید که:
این قابلیت رو چطور پیاده کنم؟
همینجا یادگیری واقعیتر شروع میشه⚡️
چون ممکنه هنگام اضافه کردن یک قابلیت مجبور بشید مستندات بخونید، سرچ کنید، خطاها رو بررسی کنید و چند راه مختلف رو امتحان کنید📃
📌به نظرم پروژه آموزشی زمانی واقعاً ارزشمند میشه که بعد از تموم شدن آموزش دیگه دقیقاً ندونید قدم بعدی چیه و مجبور بشید خودتون تصمیم بگیرید👌
💻 Source Code :
https://github.com/Helali-Dev/Mini-Store-Js
#JavaScript #Frontend
❤4