امشب دوبلشم میزاریم
همزمان داریم باهاش پیش می‌بریم ✌🏻
تا الان تمامی دوره ها تکمیل شدن

تا این دوره تکمیل بشه و بقیه دوره ها آپدیتشون بیاد قصد دارم کاریو انجام بدیم


یکی از دوستانم طراح سوالات آزمونای شرکتای مختلفه که این آزمونارو شرکتای بزرگ از کارمنداش هر سال میگیرن برای تایین ارتقاء سطحشون و ارزیبایی


که به شدتم سوالاش زیاد و چالشیه که از اینا براتون میزارم هر روز و پیش ببریم ❤️

#استخدامی

سوال: تفاوت بین const، var و let تو جاوااسکریپت چیه؟
آقا این سوال همیشه میاد، همیشه!
خیلی آسونه ولی چرا همیشه می‌پرسن؟؟
چون نحوه‌ی جواب دادنتون به این سوال نشون می‌ده که واقعا سطحتون چیه!


جواب درست چیه؟  var:

قدیمی و پراستفاده تو کدهای قدیمی. می‌تونی دوباره تعریفش کنی، مقدارش رو عوض کنی و تو scope تابع یا global کار می‌کنه. ولی یه مشکل بزرگ داره: Hoisting! یعنی قبل از تعریف، می‌تونی ازش استفاده کنی و این گاهی باگ‌های عجیب درست می‌کنه.  


let

اومد که مشکلات var رو حل کنه. Block Scope داره (فقط تو همون بلاک {} کار می‌کنه) و دیگه خبری از hoisting عجیب نیست. می‌تونی مقدارش رو عوض کنی ولی نمی‌تونی دوباره تعریفش کنی. 
const:

مثل let تو block scope کار می‌کنه، ولی یه فرق بزرگ داره: نمی‌تونی مقدارش رو عوض کنی. فقط مراقب باش! اگه const یه شیء یا آرایه باشه، می‌تونی محتویاتش رو تغییر بدی، ولی نمی‌تونی خود متغیر رو به یه چیز دیگه assign کنی.

چرا این سوال مهمه؟
این سوال ساده، عمق فهمتون از Scope، Hoisting و Reassignment رو لو می‌ده.

نه این که فقط بگیم خب let همون var هستش تغییر میکنه const نمیکنه 😅

var x = 10; // Global یا Function Scope
let y = 20; // Block Scope
const z = 30; // Block Scope، غیرقابل تغییر

if (true) {
  var x = 100; // همون x قبلی رو تغییر می‌ده!
  let y = 200; // یه y جدید تو این بلاک
  const z = 300; // یه z جدید تو این بلاک
}

console.log(x); // 100 😱
console.log(y); // 20 😎
console.log(z); // 30 🛡️

حالا تو نظرت چیه؟ اگه بخوای تو مصاحبه این سوال رو جواب بدی، چی می‌گی؟
یا اگه بخوام یه نکته دیگه به این پست اضافه کنم، دوست داری چی باشه؟؟🔥

  #جاوااسکریپت #برنامه_نویسی #مصاحبه_استخدامی

@developersubtitle
🌐devsub.ir

#استخدامی 💡

برای فیلتر و مپ کردن یه آرایه بزرگ، چطور سرعت رو بالا ببریم و حافظه رو کم کنیم؟

جواب: استفاده از ()reduce 

چرا reduce؟

به جای دو پیمایش با filter و map، همه‌چیز تو یه پیمایش انجام می‌شه.
حافظه کمتر (بدون آرایه میانی) و سرعت بیشتر.

مثال:javascript

const bigArray = [1, 15, 3, 20, 8];


const result1 = bigArray.filter(x => x > 10).map(x => x * 2); // [30, 40]

const result2 = bigArray.reduce((acc, x) => {
  if (x > 10) acc.push(x * 2);
  return acc;
}, []); // [30, 40]

کی استفاده کنیم؟

برای آرایه‌های بزرگ (مثل ۱۰۰۰+ داده)، reduce معجزه می‌کنه. برای آرایه‌های کوچیک، filter و map هم اوکیه.شما چه روشی برای آرایه‌های بزرگ استفاده می‌کنید؟ تو کامنت‌ها بگید! ✈

#جاوااسکریپت #بهینه‌سازی
#مصاحبه_استخدامی

@developersubtitle
🌐devsub.ir

#دوبله

سلام به رفقای عزیزم

اینم یه سبک جدید از دوبلمون هستش


امیدوارم خوشتون بیاد 🔥

از قصد با زیرنویس گذاشتم براتون که موقعیم اصلا صدا مثلا از سیستم میاد نه مدرس صدای دوبلور ما هم با ادیت عوض میشه


امیدوارم خوشتون بیاد , ریکشن شما به این ویدیو باعث میشه با تو این مسیر دلسرد نشیم و بهتر از قبل برگردیم

ریکشنا بالا باشه یه خبر خیلی خوب دارم ❤


@developersubtitle

#استخدامی

در چه شرایطی استفاده از Arrow Function در جاوااسکریپت باعث مشکل می‌شه؟ بیاید کوتاه و کلیدی بررسی کنیم:


مشکلات Arrow Function:

✅ عدم اتصال به this مناسب: Arrow function‌ها this رو از محیط اطراف (lexical scope) می‌گیرن، نه از جایی که فراخونی می‌شن. این تو کار با اشیا یا رویدادها می‌تونه دردسرساز بشه.

✅ عدم استفاده به‌عنوان متد شیء: چون this درست کار نمی‌کنه، برای متدهای شیء مناسب نیستن.


✅ عدم پشتیبانی از arguments: Arrow function‌ها شیء arguments ندارن، که تو بعضی سناریوها مشکل‌سازه.

const obj = {
  value: 10,
  regular: function() { console.log(this.value); }, // 10
  arrow: () => { console.log(this.value); } // undefined
};
obj.regular(); // کار می‌کنه
obj.arrow(); // مشکل! چون this به window/global اشاره می‌کنه

کی مراقب باشیم؟

تو متدهای شیء، event listener ها یا وقتی نیاز به this پویا (dynamic) داری، از فانکشن معمولی استفاده کن.🌹

برای callbackهای ساده یا تو scopeهای مشخص (مثل map/filter)، arrow function عالیه.

شما کجا از arrow function به مشکل خوردید؟ تو کامنت‌ها بگید  ‼

@developersubtitle

#جاوااسکریپت #برنامه‌نویسی

#استخدامی

تفاوت == و === در جاوااسکریپت چیه؟ بیاید کوتاه و کلیدی ببینیم:


⭕قبلش فقط بگم که این سوال آسونه خیلی ولی تو 5 تا آزمون فنی که دادم اکثرا همشون پرسیدن

== :(برابری با تبدیل نوع)

مقایسه مقدار انجام می‌ده، ولی قبلش نوع داده‌ها رو تبدیل می‌کنه (type coercion).
ممکنه نتایج غیرمنتظره بده!

مثلا :

5 == "5"; // true (چون رشته "5" به عدد تبدیل می‌شه)
null == undefined; // true

=== (برابری دقیق)

مقایسه مقدار و نوع داده با هم انجام می‌ده، بدون تبدیل نوع.
امن‌تر و قابل پیش‌بینی‌تره.

مثلا

5 === "5"; // false (چون نوع داده فرق داره: number ≠ string)
null === undefined; // false

⭕ کی از کدوم استفاده کنیم؟

همیشه از === استفاده کن مگر اینکه عمداً بخوای تبدیل نوع انجام بشه (که بنظرم خیلی کم پیش میاد).

== می‌تونه باگ‌های عجیب ایجاد کنه، چون رفتار تبدیل نوعش گنگه.

یه مثال باحال:

console.log(0 == "0"); // true
console.log(0 === "0"); // false

امیدوارم خوشتون بیاد . با ریکشنتون و حمایتتون انرژی مارو بالا میبرید 🔥
#جاوااسکریپت #برنامه‌نویسی

@developersubtitile
🌐devsub.ir

#استخدامی

1.Event bubbling , Event Capturing

آقا دارم مقاله جمع میکنم برای سوالایی که از خودم پرسیدن و احتمال زیاد از شما میپرسن
تا موقعی که تموم شه دونه دونه براتون اینجا پست میکنم 🌹

خب آقای x خانم y , شما راجب مفهوم event bubbling  میتونید به ما یه توضیحی بدید؟؟

قبل از توضیح بزارید با کد نشونتون بدم

<div >
    <p >Click Me</p>
</div>

حالا مثلا یه onclick به جفتشون میدم هم div هم بچش که p هستش

document.querySelector('div');
  .addEventListener('click', function() {
    Console.log("you click div");
  });

document.querySelector('p');
  .addEventListener('click', function() {
    Console.log("you click P!");
  });

اوکیه ؟؟؟

من الان اگه رو P بزنم ، یعنی رو Click Me
چه اتفاقی میفته بنظرتون ؟؟؟

✅اول p اجرا میشه ، بعد بلافاصله div اجرا میشه

یعنی از child رفت به parent ، رفتش بالا

به این مفهموم میگن bubbling

حالا capturing دقیقا برعکس اینه 😁


یه سوال خفن دیگه ، اومد پرسید برای مدیریت کردن این موضوع از چه متودی استفاده میکنی چی بگیم؟؟

یعنی اومد گقت که میخوام فقط رو هر چی کلیک کردی مثلا فقط p اجرا بشه !!

✅میگی closest()


فصل ۱۳ دوره جوناس 😄🌹


پستو سیو کنید ، اگه این کارم حمایت شه و ریکشن خوبی بگیره هر روز سعی میکنم یه سوال خفن بزارم براتون و از #استخدامی برای دسترسی سریع به سوالا استفاده کنید ❤️

🌎 devsub.ir
@developersubtitle

سلام رفقا

با اجازه تمامی دوستانم یه پست متفاوت میزارم براتون

یه خانمی هست بنده خدا سرطان داره و بچشم مریضه ، من ایشونو نمیشناسم ولی مادرم برام فرستاده شماره کارتشو

منم گفتم اینجا میزارم باز هر کسی کمکی کرد به ایشون دمش گرم ❤️


۵۸۹۴۶۳۱۵۷۷۵۲۸۳۳۴


فاطمه دهقانیان

13 سپتامبر روز برنامه نویس مبارک❤️🔥

به افتخار همه کدهایی که نوشتیم، دیباگ‌ هایی که شکست دادیم و کدهایی که نصف شب به ذهنمون رسید😎💻

#استخدامی

خب آقای X، خانم Y، یه سوال React خفن!

سوال : useEffect  چی هستش اصلا کی به کار مون میادش  و چطور جلوی  (render) رندرای بی‌موردشو بگیریم؟ 

آقا  useEffect مثل یه دستیار باهوشه که می‌گه : «هی، اگه بخوای یه کار جانبی (side effect) تو کامپوننتت انجام بدی، من اینجام!» ✌🏻🌹

این کارای جانبی چی‌ان؟  دریافت داده از API
تغییر چیزی تو DOM (مثلاً تغییر title صفحه) 
تنظیم تایمر یا interval (مثلاً یه تایمر شمارش معکوس) 
اشتراک (subscribe) به یه سرویس (مثلاً WebSocket)

به عبارتی، هر چیزی که بخوای «خارج از رندر معمولی» کامپوننت انجام بدی، useEffect جای اونه!

مثال:

  useEffect(() => {
  fetch('https://api.example.com/users')
    .then(res => res.json())
    .then(data => setUsers(data));
})


مشکل کجاست؟😅🤏🏻

اگه حواست نباشه، useEffect هی رندر می‌کنه و اپ‌تو کند می‌کنه! 

راه‌حل: چطور جلوی رندر بی‌مورد رو بگیریم؟

اولی و اصلیش اینه که Dependency Array رو درست کن!


💥 همیشه یه آرایه به عنوان آرگومان دوم useEffect بده. این آرایه می‌گه useEffect کی باید اجرا بشه:

▫ [] → فقط یه بار موقع mount کامپوننت اجرا می‌شه (مثل componentDidMount).

▫ خالی نباشه یعنی  [variable] → هر وقت متغیر داخل آرایه تغییر کنه، useEffect اجرا می‌شه. 

▫ بدون آرایه → هر بار رندر، useEffect اجرا می‌شه (خطرناکه!).


⛔⛔⛔ پس کد بالا اصلا بهینه نیستش !!!


useEffect(() => {
  fetch('https://api.example.com/users')
    .then(res => res.json())
    .then(data => setUsers(data));
},[])


این درستشه ⚡


یه سوال خفن دیگه!

اومدن تو مصاحبه گفتن: «اگه بخوای useEffect فقط یه بار موقع لود کامپوننت اجرا بشه، چی کار می‌کنی؟»
جواب: یه آرایه خالی ([]) می‌ذاری!


سیو کن این پستو! اگه این سبک سوال و جواب به دلت نشست، یه 🔥 بذار و بگو بعدی چی باشه!   

🌐devsub.ir
@developersubtitle

هوک جدید Next.js که میتونه چند لول UX اپ شمارو بهتر کنه.

اسمش useLinkStatus هست و میاد و وضعیت لودینگ کامپوننت Link والدش رو مشخص میکنه و اگر درحال لودینگ بود pending رو true بر میگردونه.

به این صورت دغدغه بزرگ لودینگ پیج ها حل میشه و متونیم به راحتی در UI به کاربر نمایشش بدیم.


لینک رفرنس:

https://nextjs.org/docs/app/api-reference/functions/use-link-status



دیگه لازم نیست بیایم اقا یه useState برای لودینگمون بزاریم هر جا داره دیتا میاد true کنیم هر جام دیتا تموم شد فالسش کنیم

موفق باشید 🌹

@developersubtitle

رفقا سلام خوبید
رفقایی که دوره ریکتو تهیه میکنن
با یه لایسنس هم زیرنویس رو دارن هم دوبلرو
دیگه جدا نیست 👍

میتونید تماشا کنید و لذتشو ببرید ❤️