💡 JavaScript Tip #1

در جاوااسکریپت، کپی کردن آبجکت‌ها همیشه اون چیزی نیست که فکر می‌کنیم! 🤔
مثلاً:

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

💡 JavaScript Tip #2
فکر می‌کنی خروجی این کد چیه؟ 👀

console.log([] + [])

قبل از اینکه جواب رو ببینی، چند ثانیه بهش فکر کن...
👇
👇
👇
خروجی:

""

چون جاوااسکریپت قبل از استفاده از +، آرایه‌ها رو به رشته تبدیل می‌کنه:

String([]) // ""

و در نهایت:

"" + ""

📌 این یکی از مثال‌های جالب Type Coercion در JavaScript هست.

#JavaScript #CodeTrail
🔗https://t.me/codetrailWeb

💡 JavaScript Tip #3

در این پروژه با استفاده از OOP (Object-Oriented Programming) یک سیستم Modal قابل استفاده مجدد پیاده‌سازی شده است.

به جای نوشتن کد تکراری برای هر Modal، فقط کافی است یک Instance جدید از کلاس Modal بسازید.

✅ Reusable Code
✅ Clean Code
✅ Easy to Maintain

#JavaScript #OOP #CodeTrail

💡 #JavaScript OOP Fact Tip #4

میدونستی در 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

💡 #Frontend Insight

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

مرورگر فقط فایل‌های JavaScript رو دانلود نمی‌کنه؛ بعد از دانلود، باید اون‌ها رو در سه مرحله پردازش کنه:

Download → Parse → Execute

جالب اینجاست که توی بعضی پروژه‌ها، زمان Parse و Execute حتی از زمان Download هم بیشتره!

📌 یعنی همیشه مشکل کند بودن سایت، سرعت اینترنت یا حجم فایل نیست؛ گاهی خود JavaScript زمان زیادی برای پردازش نیاز داره

📌 برای همین، حذف یک کتابخونه‌ی غیرضروری بعضی وقت‌ها تأثیر بیشتری روی سرعت سایت داره تا کم کردن چند کیلوبایت از حجم فایل

📌 به همین دلیله که توسعه‌دهنده‌های حرفه‌ای سعی می‌کنن Taskهای سنگین رو به بخش‌های کوچک‌تر تقسیم کنن یا اجرای اون‌ها رو به زمان مناسب موکول کنن

🔗 https://t.me/codetrailWeb

#Frontend #JavaScript #Performance #CodeTrail

💡 #React Fact

در 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

🌐 Website معرفی

⭕️ Bundlephobia

تا حالا قبل از نصب یک پکیج، بررسی کردی چقدر به حجم پروژه اضافه می‌کنه؟😶

فقط اسم پکیج رو وارد کن تا ببینی:

📦 حجم واقعی پکیج
⚡ حجم بعد از Gzip
📊 تعداد وابستگی‌ها
⏱️ زمان تقریبی دانلود

📌 قبل از نصب هر کتابخونه، یک بار این سایت رو چک کن؛ شاید همون یک پکیج باعث کند شدن پروژه‌ات بشه🐌

🔗https://bundlephobia.com

#JavaScript #Performance #CodeTrail

✅ جواب چالش JavaScript#

اگر حدستون این بود:
[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

تا حالا به این فکر کردی که JavaScript چطور با وجود Dynamic بودن، می‌تونه این‌قدر سریع اجرا بشه؟🤔

پشت این سرعت، فقط خود JavaScript نیست؛ V8 Engine نقش مهمی داره

توی این پست یه نگاه کوتاه به کاری که V8 و JIT Compilation انجام میدن انداختیم👆


🔗https://t.me/codetrailWeb

#JavaScript #Performance #CodeTrail

💡 TypeScript Insight

📌یک نکته درباره TypeScript:

تایپ‌اسکریپت در زمان اجرای برنامه وجود نداره❕

در ابتدا کدهای TypeScript به JavaScript تبدیل می‌شن و در نهایت مرورگر فقط JavaScript رو اجرا می‌کنه

یعنی TypeScript خودش یک زبان Runtime نیست
بلکه در زمان توسعه، به بررسی Typeها و پیدا کردن خطاها کمک می‌کنه

📌 برای همین Typeهایی که در TypeScript تعریف می‌کنیم، در کد نهایی JavaScript وجود ندارن

🔗https://t.me/codetrailWeb

#TypeScript #JavaScript