جامع ترین لیست سوالات استخدامی جاوا اسکریپت

در این مقاله قصد داریم به جامع ترین لیست سوالات استخدامی جاوا اسکریپت در مصاحبه های کاری بپردازیم. همانطور که میدانید تقریباً در تمامی شرکت ها چنانچه قصد استخدام داشته باشید، بایستی حداقل یک مرحله مصاحبه یا آزمون را بگذرانید.

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

پس دست دست نکن و بزن بریم..🥇

مقدمه در رابطه با مصاحبه های استخدامی

جاوا اسکریپت یک زبان مهم در توسعه وب سایت های مدرن است. برای ایجاد صفحات وب پویا و تعاملی که می توانند به ورودی کاربر و سایر رویدادها پاسخ دهند، استفاده می شود.

جاوا اسکریپت همچنین برای برنامه نویسی سمت سرور، توسعه بازی و برنامه های کاربردی موبایل استفاده می شود.

در این مقاله با بررسی سوالات استخدامی، در اصل به بررسی مفاهیم اساسی جاوا اسکریپت و کاربردهای مختلف آن در توسعه وب خواهیم پرداخت. همچنین در مورد مزایای استفاده از جاوا اسکریپت نسبت به سایر زبان ها برای ساخت وب سایت صحبت خواهیم کرد.

به صورت کلی میتوان مصاحبه‌های آزمون های استخدامی را به سه دسته تقسیم کرد.

• دسته اول آزمون یا مصاحبه شفاهی است، بدینصورت که شخص مصاحبه شونده در همان ابتدای کار محک های جدی میخورد که آیا با مفاهیم اصلی زبان جاوا اسکریپت آشنایی دارد یا خیر؟!
• مرحله دوم آزمون عملی است که معمولاً یا پروژه‌ای به شخص مورد نظر داده شده و بایستی در زمان مورد قبول دو طرف آن را پس بدهد و یا در محیط شرکت در طی چند ساعت باید پروژه مورد نظر را به سرانجام برساند.
• آزمون سوم معمولاً در شرکت های سطح بالا تست های روانشناسی و روانشناختی از طرف مورد نظر گرفته می شود که ببینند آیا روحیه همکاری و کارگروهی در وی وجود دارد یا خیر.

با توجه به تمام مطالبی که گفته شد در این پست ما قصد داریم شما را آماده ورود به مصاحبه کاری کنیم. تمرکز ما بر روی مصاحبه شفاهی هست یا همان مصاحبه مرحله اول که تقریباً تمامی شرکت ها آن را دارند.

پس لطفاً با ما همراه باشید تا مهمترین مطالبی که در مصاحبه کاری جاوا اسکریپت از شما پرسیده می شود را بیان کرده و با هم درباره مفاهیم آن بحث کنیم. این مقاله جامع ترین لیست سوالات استخدامی جاوا اسکریپت را حتما برای دوستانتان ارسال کرده و با ارسال نظرات در ویرایش آن یاری کنید .

لیست سوالات همراه جواب به ترتیب زیر شروع میشود:

مهمترین ویرایش جاوا اسکریپت از چه سالی و کدام نسخه آن بود؟

جاوا اسکریپت در ابتدا به نام لایو اسکریپت نامگذاری شده بود و بعد ها برای شباهت به زبان جاوای معروف، تغییر نام خود را تحت عنوان جاوا اسکریپت داد. اما بعد از زیرمجموعه شدن سازمان اکما توانست در سال‌های ۱۹۹۷ تا ۱۹۹۹ بتواند به ورژن های es1,2,3 را منتشر کند.

مهمترین نسخه جاوا اسکریپت از سال ۲۰۰۹ و با انتشار نسخه اکما اسکریپت ۵ اتفاق افتاد و دومین انقلاب در جاوا اسکریپت سال ۲۰۱۵ تحت نسخه ی اکما اسکریپ ۶ به وقوع پیوست که به آن شروع دوران وب مدرن هم میگویند!

از آن سال به بعد به صورت مرتب سالانه آپدیت هایی برای این زبان بیرون می آید و رهبر اصلی جاوااسکریپت ام دی ام یا موزیلا می باشد.

آیا جاوا اسکریپت یک زبان برنامه نویسی است؟

پاسخ منفی است. جاوا اسکریپت همراه html و css تحت زبان‌های اینترپرایز یا تفسیر شده هستند و در کل نیازی به کامپایلر و برنامه خاصی برای اجرا شدن ندارند.

فقط و فقط کد ها را در یک ویرایشگر کد قرار می دهیم و با یک مرورگر وب آن را باز می کنیم.جاوا اسکریپت زبان برنامه نویسی نیست، اما به لطف آپدیت های سال ۲۰۱۵ به بعد بسیار شبیه زبان برنامه نویسی شده و تمام قابلیت های یک زبان برنامه نویسی را به جز پایگاه داده در خود دارد.

هرچند با استفاده از کتابخانه نود جی اس و اتصال به پایگاه های داده ای مانند مونگو دی بی یا مای اس کیو ال به آن می توان این نقیصه را جبران کرد.

آیا میدانید مدرسه پرنیان، کلاس طراحی سایت حرفه ای بصورت حضوری و مجازی برگزار میکند؟

مدل DOM در جاوا اسکریپت به چه معناست و چه تفاوتی با مدل BOM دارد؟

مخفف سر کلمات document object modle و به معنای دسترسی هوشمند و هدفمند به عناصر html است. با دانستن انواع مدل های دام مانند المنت با آیدی یا کوری سلکتور و غیره می توانیم به عنصر مورد نظر در سند html دسترسی پیدا کرده و یا داخل آن محتوا بریزیم و یا محتوای داخل آن را استخراج نماییم.

دام در اصل یک آبجکت از تمام المنت های موجود در صفحه میباشد که میتواند دسترسی به تک تک آنها را برای ما ایجاد کند.

اما مدل بام سر کلمه بروزر آبجکت مدل و دسترسی هایی در رابطه با تعامل ما با مرورگر به ما اعطا خواهد کرد.

عملیات ریاضی بر روی استرینگ ها و نامبر ها چه تفاوتی دارد؟

در حالت کلی زبان جاوا اسکریپت مشابه زبان php عملیات ریاضی را بر روی استرینگ و نامبر انجام می‌دهد و فرقی برای آن ندارد. به طور مثال نامبر ۲ به علاوه سه می‌شود ۵ و یا نامبر ۴ تقسیم بر ۲ می شود ۲

استرینگ ۴ تقسیم بر استرینگ ۲ میشود ۲ پس تفاوتی تا به اینجای کار بین نامبر و استرینگ وجود ندارد. تنها تفاوت در عملیات جمع می باشد. به دلیل اینکه پلاس یا علامت جمع در جاوا اسکریپت به معنای کانکت و چسباندن میباشد و وقتی شما دوتا استرینگ را با هم جمع می کنید در جاوا اسکریپت به معنای کانکت حساب می شود و آن دو را در کنار هم قرار داده و در خروجی چاپ می کند.

پس استرینگ 2 بعلاوه 2 میوشد 22 !

در غیر اینصورت عملیات تفریق تقسیم و ضرب بین نامبر و استرینگ کاملاً یکسان است.

تفاوت بین LET , CONST و VAR در چیست و بهتر است از کدام استفاده شود؟

در ورژن های قدیمی جاوا اسکریپت برای تعریف یک متغیر از کلمه کلیدی var استفاده می شد. اما با آمدن نسخه های جدید به جای var دو کلمه کلیدی let و const تعریف شد.

خوب تا به همین جای کار میتوان گفت که بهتر است از تعاریف داخل ورژن های جدید استفاده کنیم، اما از طرف دیگر می توان گفت برای هر جایگاهی نه!

let و const هم با هم شباهت دارند هم تضاد. شباهت در اینجاست که هر دو block scope هستند. پس متغیر داخل بلاک با متغیر بیرون بلاک حتی اگر هم نام باشند، مقادیر مختلفی دارند.

اما تضاد این دو در نامشان هم پیداست. let به معنای اجازه دادن است و میتوانید متغیری از نوع let را در طول برنامه به مقادیر مختلف دیگری تغییر دهید. اما const به معنای ثابت است یا همان کانستنت و شما در طول برنامه اجازه تغییر متغیر کانست را نخواهید داشت.

بزرگترین تفاوت میان var و let,const در اینجاست که اگر متغیر var قبل از تعریف، اعلان شود هیچ اروری ندارد و نهایتا undefined خواهد بود اما همین داستان برای let, const با ارور refrenceError مواجه خواهد شد.

از کانست معمولاً کجاها استفاده میشود؟

بهتر است از متغیر کانست برای ذخیره آرایه و آبجکت استفاده شود. به دلیل این که وقتی ما یک آبجکت یا یک آرایه یا حتی یک فانکشن را داخل یک کانستنت قرار می‌دهیم، در اصل آدرس حافظه یا refrence آنرا داخل متغیر ریخته ایم و اگر مقادیر و پراپرتی های آن متغیر را کم، زیاد یا تغییر دهیم، هیچ اتفاقی برای کانستنت نمی افتد.

چون آدرس آن متغیر در حافظه یکسان است و تغییری نمی کند!

تفاوت and و or در چیست؟

موضوع بسیار ساده است .در OR وقتی دو یا N شرط را با هم در کنار هم قرار می دهیم، فقط کافیست یکی از شروط درست باشد. در این صورت کل شرط ما درست خواهد بود و AND دقیقاً معکوس این قضیه است. یعنی اگر دو یا N شرط در کنار هم داشته باشیم، بایستی تمامی شروط درست باشند تا شرط کلی به مقدار TRUE یا صحیح برسد.

پیشنهاد میکنیم از مقاله مفهوم کامل و کاربردی RESTFUL API هم دیدن به عمل آورید.

در مصاحبه های کاری بسیار کاربردی است…

مفهوم آرگومان ورودی و RETURN در FUNCTION را بفرمایید؟

این دو المان در تمامی توابع وجود دارد. آرگومان ورودی که دقیقاً بعد از نام تابع و داخل پرانتز قرار دارد، جایگاه ورود مقدار به داخل تابع می باشد. پس اگر بخواهیم مقداری را از خارج تابع به داخل تابع پاس بدهیم، می توانیم از آرمان های ورودی استفاده نماییم.

یک تابع آزاد است که از آرگومان ورودی استفاده کند یا خیر.

return به معنای مقدار بازگشتی تابع است. شاید بتوان آن را خروجی تابع هم نامید. به طور مثال وقتی یک تابع با آرگومان های ورودی a و b در دل خود return دارد، به این نتیجه می رسیم که این تابع در هنگام فراخوانی بایستی دو مقدار مجهول خود را گرفته و آنها را در هم مثلا ضرب کرده و در خروجی خود نگه دارد.

اما چون در دل خود دستوری برای نگارش مانند ALERT یا PRINT وجود ندارد، بایستی این تابع در دل یک تابع نگارشی فراخوانی شود.

تفاوت فانکشن با arrow function در چیست؟

ما در حالت کلی به دو صورت می توانیم توابع را در زبان جاوا اسکریپت تعریف کنیم. تعریف توابع در اکما اسکریپت ۵ که همراه با کلمه‌ی کلیدی فانکشن می باشند و تعریف توابع در اکما اسکریپت ۶ که نوع مختصر شده و کوتاه شده سینتکس اکما اسکریپت ۵ است که به آن arrowFunction میگویند.

به شکل زیر نگارش می‌شود و در کل تفاوت خاصی در نوع رفتار این دو وجود ندارد. فقط بدانید که ما در es5 به this دسترسی داریم و در es6 به this دسترسی نداریم.

const myFunct = (a, b) => a*b

Asynchronous Communication چیست؟

ارتباط ناهمزمان یا آسینکرون کامیونیکیشن به چه معناست و کدام خاصیت در جاوا اسکریپت بیشترین استفاده را در این مقوله دارد؟

در جواب باید بگویم که تکنولوژی ایجکس یا همان ناهمزمان جاوا اسکریپت که امروزه نقش اصلی و کلیدی در طراحی صفحات وب مدرن دارد، به شما این امکان را میدهد که به صورت داینامیک اطلاعات را در صفحه وب خود بارگذاری کنید بدون اینکه نیازی به به روزرسانی یا رفرش کل صفحه باشد.

از مزایای اصلی برنامه نویسی ناهمزمان این است که زمانی که تنها بخشی از صفحه شما نیاز به تغییر داده دارد به کار گرفته می شود و سرور برای کارهای تکراری مشغول نمی شود. عدم چشمک زدن و رفرش صفحه ، به ایجاد یک تجربه‌ی کاربری ایده‌آل کمک شایانی می‌کند.

در سینکرون، ما بصورت مرتب و خط به خط کد ها را میخوانیم و اجرا میکنیم، اما در آسینکرون، بصورت نامنظم میتوانیم چند کار را با هم انجام دهیم.

حلقه ها در زبان های برنامه نویسی چه کاربردی دارند؟

تمام زبان های برنامه نویسی دارای حلقه های تکرار متنوع هستند و هدف آن انجام یک دستور یکسان به تعداد دلخواه ما می باشد. برای جلوگیری از نوشتن کدهای زیاد از حلقه های تکرار استفاده میکنیم معروف ترین FOR می باشد.

خانواده حلقه fro عبارتند از :

• for
• forEach
• for of
• for in

Dev Tool Debugging تولز دیباگینگ چیست؟

همه مرورگرها از بخش تولز دیباگینگ برای کمک به توسعه دهنده های وب در امر اشکال زدایی و پیدا کردن خطا استفاده می کنند. برای دسترسی به این قسمت کافیست در صفحه وب کلیک راست کرده و روی گزینه اینسپکت کلیک کنیم.

قسمت جدیدی که در مرورگر باز می‌شود همان دفتر دیباگینگ ما می باشد که در آن دسترسی به کدهای html css و جاوا اسکریپت داریم.

اسکوپ یا حوزه دسترسی به چه معناست؟

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

یعنی هر آنچه که به طور مثال متغیر در درون این اسکوپ تعریف شود در خارج از آن معنا و مفهومی ندارد. پس می توان حوزه دسترسی متغیر ها را به دو عنوان کلی گلوبال و لوکال تعریف کرد.

ما می دانیم که اسکوپ می تواند هم برای یک فانکشن باشد هم برای خود متغیرهای let و const اگر متغیر بیرون اسکوپ تعریف شود دسترسی سوپر گلوبال دارد و اگر متغیر داخل اسکوپ تعریف شود دسترسی لوکال یا محلی خواهد داشت.

Function Calls فانکشن کال یاد فراخوانی توابع به چه معناست؟

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

پس فراخوانی یک فانکشن یا تابع به معنای اجرای کد های درون آن تابع است . حال فراخوانی می تواند به صورت مستقیم یا با صدا زدن اسم تابع باشد و یا به صورت غیرمستقیم بر حسب فراخوانی یک event مانند کلیک رخ دهد.

مدیریت حافظه در جاوا اسکریپت Garbage collection

در جاوا اسکریپت هم مثل هر زبان دیگه ای به هر متغیری که تعریف شود مقداری حافظه اختصاص داده میشود. این حافظه به صورت اتوماتیک توسط Garbage collection مدیریت خواهد شد.

در جاوا اسکریپت Garbage collection توسط دو الگوریتم حافظه را مدیریت میکند.

الگوریتم رفرنس-شماری Reference-counting garbage collection

الگوریتم Reference-counting متغیر هایی که هیچ رفرنسی به آن ها در حافظه ندارد را پیدا و از حافظه پاک میکند.

الگوریتم نشان-و-گردش Mark-and-sweep algorithm

الگوریتم Mark-and-sweep هر شی ای که به آن دسترسی وجود نداشته باشد از حافظه پاک میکند. این الگوریتم از متغیر های عمومی شروع به پیمایش کرده و تمام اشیا مختلفی که به آنها دسترسی وجود دارد را پیدا میکند پس از آن هر شی ای که به آن اشاره ای نشده بود از حافظه پاک میکند.

Conditional statements یا عبارات شرطی به چه مفهوم است؟

اساس و بنیان هر تصمیمی که در عبارات شرطی رخ می‌دهد مانند IF یا SWITCH که مهم ترین عبارات شرطی هستند ، بر اساس همین کاندیشنال استیتمنت ها انجام می شود. عبارات شرطی در صورت کلی دو حالت دارند یا TRUE می باشند و جوابشان مثبت است در غیر این صورت می‌توانند FALSE باشند و جواب منفی.

ترو و فالس در حالت کلی به چه معناست؟

باید بدانیم که فالس و ترو از عبارات بولین و صفر و یکی میباشند و به معنای صحیح و غلط است. ترو یعنی یک بولین و فالس یعنی صفر بولین.

به صورت دیفالت هر عبارتی می تواند معنای تورو دهد. استرینگ آرسام ، عدد ۶۲ ، عدد منفی ۲۰۰ یا هر چیز دیگری می تواند معنای ترو دهد. یعنی یک موجودیت است!

اما اگر فالس بولین یا صفر ، نوشته شود به معنای صفر و غلط خواهد بود. عبارات شرطی هم که جای خود دارد. مثلاً دو بزرگتر از ۴ مشخص است که غلط است یا آرسام برابر است با پارسا غلط است.

Events and Event Handling ایونت و ایونت هندلینگ به چه معنا است؟

ما در اینجا یک مفهوم کلی به نام event داریم که این را همان رویداد می نامیم. مانند کلیک، موس اینتر، موس لیو، اسکرول و غیره اما این به معنای مدیریت رویداد نیست.

پس یک مفهوم رویداد داریم و یک مفهوم مدیریت رویداد که در کد نویسی باید به صورت استاندارد آن را رعایت کرد.

Traversing the DOM یا پیمایش دام به چه مفهوم است؟

اگر شما تمام مفاهیم زبان برنامه نویسی جاوا اسکریپت را بلد باشید اما نتوانید پیمایش درست و منطقی درخت دام و سند html تان داشته باشید، به هیچ عنوان برنامه نویس موفقی نخواهید بود.

پیمایش در دام به این معنا است که شما در هر نقطه از تگ های html بتوانید دسترسی بگیرید و محتویات را استخراج یا وارد نمایید.

پیمایش دقیق دام به شما سطح کنترل ۱۰۰ درصدی در عناصر html می دهد و جز مولفه های بنیادی و اولیه برنامه نویسی می باشد. DOM مخفف Document Object Model و یک آبجکت از تمام المنت‌های موجود در یک صفحه HTML هست.

IIFE (Immediately Invoked Function Expression) چیست؟

همانطور که از نام آن پیداست، IIFE تابعی در جاوا اسکریپت است که بلافاصله به محض تعریف فراخوانی و اجرا می شود. متغیرهای اعلام شده در IIFE توسط دنیای خارج قابل دسترسی نیستند . بنابراین دلیل اصلی استفاده از IIFE اجرای فوری کد و به دست آوردن حریم خصوصی داده ها است.

(function myFunc() { // Beginning of function
    console.log(greeting)
    }) // End of function
    () //calls the function execution e.g. myFunc()

Hoisting یا بالابردن به چه معناست؟

بسیاری از توسعه دهندگان زمانی که مفهوم Hoisting در جاوا اسکریپت را واضح نمیدانند، نتایج غیرمنتظره ای دریافت می کنند. در جاوا اسکریپت، می‌توانید یک تابع را قبل از تعریف آن فراخوانی کنید و با خطای «Uncaught ReferenceError» مواجه نخواهید شد.

دلیل این امر بالا بردن جایی است که مفسر جاوا اسکریپ همیشه متغیرها و اعلان تابع را قبل از اجرای کد به بالای محدوده فعلی (حوزه تابع یا دامنه جهانی) منتقل می کند. بیایید این را با مثال درک کنیم.

<script>
    fun(); // Calling before declaration
     
    function fun(){ // Declaring
        console.log("Function is hoisted");
    }
</script>

Closures یا بسته شدن به چه معناست؟

بسته شدن به سادگی تابعی در داخل تابع دیگری است که به متغیر تابع خارجی دسترسی دارد.

تابع داخلی می تواند به متغیر تعریف شده در محدوده تابع والد خود و متغیرهای سراسری دسترسی داشته باشد. اکنون در اینجا باید به خاطر داشته باشید که تابع بیرونی نمی تواند به متغیر تابع داخلی دسترسی داشته باشد.

function foo() {
    let b = 1;
    function inner() {
        return b;
    }
    return inner;
}
let get_func_inner = foo();
 
console.log(get_func_inner());
console.log(get_func_inner());
console.log(get_func_inner());

Callbacks را تعریف نمایید

در جاوا اسکریپت، callback به سادگی تابعی است که به عنوان پارامتر به تابع دیگری ارسال می شود و در داخل تابع دیگر فراخوانی یا اجرا می شود. در اینجا یک تابع باید منتظر باشد تا تابع دیگری اجرا شود یا مقدار آن را برگرداند و این باعث می شود که زنجیره عملکردها (زمانی که X تکمیل شود، Y اجرا شود، و ادامه می یابد.)

به همین دلیل است که معمولاً از callback در عملیات ناهمزمان جاوا اسکریپت برای ارائه قابلیت همزمان استفاده می شود.

پیشنهاد میکنیم از مقاله آموزش مدل bem در css هم دیدن به عمل آورید.

در مصاحبه های کاری پرسیده میشود…

مفهوم promise را بیان نمایید

Promise به معنای قول دادن و پيمان بستن است. در جاوا اسكريپت Promise كاربردی مشابه callback function دارد. به این معنی که از Promise همانند callback function برای مدیریت کردن دستورات غیر همزمان یا asynchronous استفاده می‌کنیم.
Promise در جاوا اسکریپت یک شیء است که برای توصیف یک عمل آینده استفاده می‌شود. این عمل می‌تواند موفقیت‌آمیز یا ناموفق باشد. Promiseها به ما امکان می‌دهند تا کد خود را به صورت موازی اجرا کنیم و از رخ دادن خطاها جلوگیری کنیم.

const promise = new Promise((resolve, reject) => {
  // انجام یک عمل
  setTimeout(() => {
    // عمل موفقیت‌آمیز
    resolve(10);
  }, 1000);
});

// انتظار برای نتیجه عمل
promise.then((result) => {
  // نتیجه عمل را پردازش کنیم
  console.log(result); // 10
});

در مثال بالا، یک Promise ایجاد می‌کنیم که پس از 1 ثانیه، عدد 10 را به عنوان نتیجه برمی‌گرداند. سپس، با استفاده از تابع then()، نتیجه را پردازش می‌کنیم.

Promiseها می‌توانند به صورت زنجیره‌ای نیز استفاده شوند. در این حالت، نتیجه Promise قبلی به عنوان ورودی Promise بعدی استفاده می‌شود.

const promise1 = new Promise((resolve, reject) => {
  // انجام یک عمل
  setTimeout(() => {
    // عمل موفقیت‌آمیز
    resolve(10);
  }, 1000);
});

const promise2 = promise1.then((result) => {
  // نتیجه عمل قبلی را پردازش کنیم
  console.log(result); // 10

  // انجام یک عمل دیگر
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // عمل موفقیت‌آمیز
      resolve(20);
    }, 1000);
  });
});

// انتظار برای نتیجه عمل
promise2.then((result) => {
  // نتیجه عمل را پردازش کنیم
  console.log(result); // 20
});

Promiseها یک ابزار قدرتمند هستند که می‌توانند به ما کمک کنند تا کد خود را به صورت موازی اجرا کنیم و از رخ دادن خطاها جلوگیری کنیم.

در اینجا چند مثال دیگر از استفاده از Promiseها آورده شده است:

• برای درخواست داده از یک API
• برای انجام یک عملیات زمان‌بر
• برای پردازش یک رویداد

در اینجا یک مثال عملی کوتاه با Promise آورده شده است:

// یک Promise ایجاد می کنیم که پس از 1 ثانیه، مقدار "Hello, world!" را به عنوان نتیجه برمی‌گرداند.
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    // عمل موفقیت‌آمیز
    resolve("Hello, world!");
  }, 1000);
});

// Promise را اجرا می کنیم.
promise.then((result) => {
  // نتیجه را پردازش می کنیم.
  console.log(result); // "Hello, world!"
});

در این مثال، یک Promise ایجاد می‌کنیم که پس از 1 ثانیه، مقدار “Hello, world!” را به عنوان نتیجه برمی‌گرداند. سپس، با استفاده از تابع then()، نتیجه را پردازش می‌کنیم.

یا مثال دیگر:

// یک Promise ایجاد می کنیم که از یک API درخواست داده می کند.
const promise = new Promise((resolve, reject) => {
  // درخواست داده از API
  fetch("https://api.example.com/data")
    .then((response) => response.json())
    .then((data) => {
      // عمل موفقیت آمیز
      resolve(data);
    })
    .catch((error) => {
      // عمل ناموفق
      reject(error);
    });
});

// Promise را اجرا می کنیم.
promise.then((data) => {
  // نتیجه را پردازش می کنیم.
  console.log(data); // { "data": "Hello, world!" }
});

در این مثال، یک Promise ایجاد می‌کنیم که از یک API درخواست داده می‌کند. سپس، با استفاده از تابع then()، نتیجه را پردازش می‌کنیم.

Async & Await چیست؟

در اینجای مقاله سوالات استخدامی جاوا اسکریپت ، به مبحث async میپردازیم.

async یک تابع را Promise می کند

await باعث می شود یک تابع منتظر یک Promise باشد.

کلمه کلیدی async قبل از یک تابع باعث می شود تابع یک Promise را برگرداند:

async function myFunction() {
  return “Hello”;
}

یا

function myFunction() {
return Promise.resolve(“Hello”);
}

بنابراین در جاوا اسکریپت عملیات ناهمزمان را می توان در نسخه های مختلف …

ES5 -> Callback

ES6 -> Promise

ES7 -> Async/wait

async و await دو کلمه کلیدی در جاوا اسکریپت هستند که برای مدیریت عملیات ناهمزمان استفاده می شوند. عملیات ناهمزمان عملیاتی هستند که بلافاصله نتیجه نمی دهند، مانند درخواست HTTP یا خواندن فایل.

با استفاده از async و await، می توانید کد ناهمزمان خود را به صورت خطی بنویسید و به این ترتیب خواندن و نگهداری آن آسان تر می شود.

در اینجا یک مثال کوتاه از استفاده از async و await آورده شده است:

async function getWeather() {
  // این تابع از API آب و هوا برای دریافت اطلاعات آب و هوایی برای یک مکان خاص استفاده می کند.
  const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=tehran&appid=YOUR_API_KEY`);
  const data = await response.json();
  return data;
}

// این تابع از تابع getWeather برای دریافت اطلاعات آب و هوایی برای تهران استفاده می کند.
async function main() {
  // این کد از await برای منتظر ماندن تا تابع getWeather برگردد و سپس نتیجه را چاپ می کند.
  const weather = await getWeather();
  console.log(weather);
}

در این مثال، تابع getWeather() از کلمه کلیدی async برای نشان دادن اینکه این تابع یک تابع ناهمزمان است استفاده می کند. این تابع از fetch() برای ارسال درخواستی به API آب و هوا استفاده می کند. fetch() یک promise برمی گرداند که نتیجه درخواست را نشان می دهد. تابع getWeather() از await برای منتظر ماندن تا promise برگردد و سپس نتیجه را برمی گرداند.

تابع main() از تابع getWeather() برای دریافت اطلاعات آب و هوایی برای تهران استفاده می کند. این تابع از await برای منتظر ماندن تا promise getWeather() برگردد و سپس نتیجه را چاپ می کند.

در اینجا یک توضیح کوتاه از نحوه کار async و await آورده شده است:

• تابع ناهمزمان با کلمه کلیدی async تعریف می شود.
• تابع ناهمزمان یک promise برمی گرداند.
• await در یک تابع ناهمزمان برای منتظر ماندن تا promise برگردد استفاده می شود.
• زمانی که promise برگردد، مقدار آن به await بازگردانده می شود.

یا  در مثال دیگر

const showPosts = async () => {
const response = await fetch(‘https://jsonplaceholder.typicode.com/posts’);
const posts = await response.json();
console.log(posts);
}
showPosts();

class ها در جاوا اسکریپت به چه معنا هستند؟

تا قبل از سال ۲۰۱۵ و معرفی es6، یکی از نقیصه های بزرگ زبان جاوا اسکریپت عدم وجود ساختار کلاس در آن بود که بعد از معرفی این ورژن این مشکل برطرف شد و جاوا اسکریپت نیز با داشتن مفهوم کلاس وجه آبجکتیو خود را کامل کرد.

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

constructor مهمترین و اصلی ترین تابع که است کلس تابع کانستراکتور یا تابع سازنده است. می‌توان آرگومان های ورودی توسط آن به داخل کلاس ارسال کرد. کلاس ها را به صورت مستقیم نمی توان در خروجی استفاده کرد و حتما باید از آن یک اینستنس آبجکت با استفاده از کلمه کلیدی NEW گرفت.

چند نوع حافظه در زبان جاوا اسکریپت داریم؟

به صورت کلی اگر ما بخواهیم داده هایی را در جاوا اسکریپت فایلی ذخیره کنیم تنها راه حل ما ذخیره در مرورگر است. منظور از جاوا اسکریپت تنها، عدم استفاده از کتابخانه هایی مانند نود جی اس است.

کوکی در جاوا اسکریپت localStorage و sessionStorage تنها راه‌حل هایی هستند که ما می توانیم مقداری دیتا را در مرورگر کاربر ذخیره کرده و در ارجاعات بعدی از آن استفاده بکنیم این رویه به دیتا ماینینگ ما کمک شایان توجهی خواهد کرد.

مفهوم null , undefined, NAN را بفرمایید

نال به معنای خالی و اگر ما به صورت مثال، یک متغیر به نام ایکس تعریف کنیم و آن را مقدار دهی نکنیم برابر با نال خواهد بود. پس هر آن مقداری که تعریف ولی مقدار نداشته باشد در واقع می‌توان گفت که خودش یک value یا مقدار است به معنای تهی و خالی.

undefined به معنای متغیرهایی است که مقدار دهی نشده‌اند یا تابعی که return ندارد یا آرایه ای که به طور مثال ۳ عضو آن مقدار دهی شده اما شما عضو دهم را فراخوانی می کنید. آن دیفاین به معنای تعریف نشده یا زمانی که از یک آبجکت مقدار پراپرتی را فراخوانی می کنید که تعریف نشده آن دیفاین برمیگرداند.

مقدار NAN مخفف سر کلمات not a number می باشد یعنی مقداری که type of آن برابر نامبر بوده است اما در حقیقت یک عدد ریاضی نیست.

عبارات falsy و truthy به چه معناست؟

همانطور که می دانید با قرار دادن دو علامت تعجب پشت متغیر می توانیم آنها را به بولین تبدیل کنیم. حال عباراتی که در تبدیل به بولین مقدار ترو برمی‌گردانند به عبارات تروسی و عباراتی که در عملیات تبدیل به بولین فالس می‌شوند فالسی نامیده می‌شود.

(!!null)
(!!undefined)

Unary plus چیست؟

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

console.log(+ “-29”)

Event Propagation چیست؟

کلمه Propagation یعنی گسترش و ترویج. پس Event Propagation یعنی یک رویداد (Event) چه جوری توی یک صفحه HTML گسترش پیدا میکنه.

به دو دسته Capturing و Bubbling تقسیم میشود.

چرا زمانی که یک آبجکت یا آرایه را در آبجکت آرایه دیگر میریزیم با هم برابری نمی کنند؟

دلیل بسیار واضح است. فرض کنیم یک آبجکت داریم با مقادیر مشخص در متغیر ایکس و یک آبجکت دیگر با همان مقادیر ولی در متغیر وای.

اگر در یک عبارت شرطی این دو را با هم برابری بدهیم جواب false خواهد شد به این خاطر که آبجکت و آرایه آدرس حافظه آن در متغیر ذخیره می شود نه مقادیر آن. پس چون دو آدرس متفاوت حافظه داریم این دو با هم برابر نمی شوند. در اینجا باید از spread method استفاده کنیم تا بتوانیم آنها را با هم برابر کنیم.

کد زیر را تفسیر کنید:

<div onclick="getElement(event)">
     <p>
         <button>click</button>
     </p>
 </div>
 <script>
 function getElement(event) {
     alert(event.target.tagName);
 } 
</script>

event.target دقیقاً خود المان را بر می گرداند مشابه this . در ادامه کد مقدار tagname را فراخوانی کرده پس روی هرکدام از المان ها که کلیک کنید تگ مربوطه را برمیگرداند. می‌توانستیم به جای tagname از value استفاده کنیم تا مقدار آن را برگرداند.

اما اگر به جای ایونت دات تارگت از currentTarget استفاده می کردیم فقط خود مقدار div را برمی‌گشت چون رویداد بر روی div پیاده سازی شده است.

تفاوت دو مساوی و سه مساوی در چیست؟

زمانی که ما از دو مساوی استفاده می‌کنیم هدفمون برابری از نظر مقدار است و وقتی از سه مساوی استفاده می‌کنیم هدفمون برابری از نظر نوع و مقدار می باشد.

یک تابع نام ببرید که تمام محاسبات ریاضی را به صورت رشته ای و در یک خط انجام میدهد؟

تابع EVAL ، محاسبات را در قالب یک رشته و در یک خط انجام می‌دهد. معمولاً در ساخت ماشین حساب از این متد استفاده می شود.

لازم به ذکر است که این تابع از امنیت بالایی برخوردار نیست!

use strict چیست؟

کلمه strict به معنی سخت‌گیرانه هست. وقتی توی جاوا اسکریپت از این دستور استفاده می‌کنیم برنامه‌ی وارد حالت سخت‌گیرانه میشه. به قول معروف Strict Mode. استفاده از این دستور باعث میشه تا کدهایی امن‌تر و با باگ‌های کمتری بنویسیم.

پروتوتایپ به چه معناست؟

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

در صورتی که موقع ساخته شدن، از یک والد به ارث برده میشوند . مثل پراپرتی length توی رشته‌ها و آرایه‌ها…

اما باید بدانیم که توی جاوااسکریپت هر آبجکتی یک پراپرتی مخفی داره به اسم [[Prototype]]. این پراپرتی به عنوان یک لینک یا واسط برای دسترسی به نمونه‌ی والد در نظر گرفته میشود.

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

Object.getPrototypeOf(person);
// or
person.__proto__;

آموزش کامل پروتوتایپ ها را در اینجا بخوانید…

کاربرد متد bind در جاوا اسکریپت چیست؟

متد bind برای ساختن تابعی استفاده میشود که مقدار this معین و مشخصی داره. همونطور که می‌دونیم در حالت عادی توابع ما تا زمانی که اجرا نشن نمی‌تونیم مقدار this اونها رو تشخیص بدیم. اما شرایطی هست که ما می‌خوایم صراحتاً مشخص کنیم که this چه مقداری داشته باشه. اینجا چنین متدی به کار ما میآید.

متغیرهایی که بدون کلمه کلیدی VAR تعریف شوند از چه نوع اند؟

این متغیرها از نوع متغیر های سراسری حساب میشوند.

عملگر Spread؟

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

function sum(x, y, z) {
return x + y + z;
}
sum(…numbers);

تا به اینجای مقاله سوالات استخدامی جاوا اسکریپت چطور بود؟

کمی دیگر بخوان تا عالم شوی 🙂

عملگر Rest به چه معناست؟

این عملگر که در توابع استفاده میشود ، به تابع کمک می‌کند تا بی‌نهایت آرگومان داشته باشه. در واقع یک روش جدیدتر بجای کلمه کلیدی arguments توی توابع هست. تابع sum مثال بالا رو درنظر بگیرید که فقط سه تا آرگومان قبول می‌کرد. با استفاده از پارامتر rest می‌تونیم یک کاری کنیم که بی‌نهایت آرگومان قبول کنه:

function sum(...numbers) {
     return numbers.reduce((total, current) => total + current);
 } 
sum(1, 2, 3); // 6
 sum(1, 2, 3, 11, 12, 13); // 42

تایپ اسکریپت (TypeScript):

تایپ اسکریپت (به انگلیسی: TypeScript) یک زبان برنامه‌نویسی چندسکویی، متن باز و کامپایلری است که توسط شرکت مایکروسافت توسعه داده شده و پشتیبانی می‌شود.

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

سینتکس TypeScript شباهت زیادی با Javascript و EC6 دارد و تمامی کدهای جاوا اسکریپت موجود، در تایپ اسکریپت معتبر شناخته می‌شوند.

چطوری یک آبجکت را Clone کنیم؟

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

const a = { x: 1 }
 const b = JSON.parse(JSON.stringify(a)); 
b.x = 2;
 alert(b.x); // 2
 alert(a.x); // 1

کلیدواژه this در arrow function به چه معناست؟

بر خلاف توابع معمولی، توابع arrow چیزی به نام this برای خودشان ندارند. مقدار this در این توابع خارج از lifecycle اون تابعه و مربوط میشه به نزدیکترین تابع non-arrow.

اما با تمام این تفاسیر، اگر در یک arrowFunc کلمه this را پاس بدهید، خواهید دید که select المان را برایتان برمیگرداند!

مفهوم وراثت در برنامه نویسی شی‌ءگرا را توضیح دهید

زبان‌های برنامه نویسی شی‌ءگرا علاوه بر کلاس دارای زیرکلاس نیز هستند. این زیرکلاس‌ها شامل همه خصوصیاتی هستند که کلاس‌های والدشان دارند؛ اما می‌توانند خصوصیات دیگری را نیز بپذیرند.

در مورد مثال بازی شطرنج، مهره‌های پیاده به متدی نیاز دارند که در صورت موفقیت در رسیدن به انتهای صفحه، آن‌ها را به وزیر تبدیل کند. مثلاً این متد را می‌توان ()transformPiece نامید.

همه مهره‌ها به چنین متدی نیاز ندارند. بنابراین لازم نیست که این متد را در کلاس مهره‌ها قرار دهیم. بلکه می‌توانیم یک زیرکلاس از کلاس مهره‌ها به نام «پیاده» ایجاد کنیم. از آنجا که زیرکلاس‌ها همه خصوصیات کلاس «مهره» را ارث می‌برند، این وهله از زیرکلاس «پیاده» نیز شامل رنگ، ارتفاع، شکل و حرکت‌های مجاز خواهد بود.

اما علاوه بر خصوصیات فوق یک متد ()transformPiece نیز در آن تعریف می‌کنیم. در این حالت لازم نیست که نگران استفاده نادرست از این متد بر روی مهره رخ (قلعه) باشیم.

تفاوت بین ()forEach و ()map

متد map یک فانکشن را به عنوان پارامتر دریافت می‌کند، سپس آن را بر روی هر یک از عناصر اعمال می‌کند و آرایه‌ای کاملاً جدید، با حاصلی که از فراخوانی همان فانکشن بوده را، باز می‌گرداند.

مثل map ،‌متد ()forEach هم یک تابع را به عنوان یک آرگومان دریافت می‌کند،‌و یک‌بار آن را برای هر یک از عناصر آرایه اجرا می‌‌‌کند. با این حال، به جای return یک آرایه جدید همانندundefined ،map برمی‌گرداند.

اولین تفاوت بین ()map و ()forEach، مقداری است که return می‌شود. متد ()undefined ، forEach برمی‌گرداند و ()map یک آرایه‌ی جدید را،‌ با عناصری که گرفته باز می‌گرداند.

تفاوت دوم بین این دو متدهای آرایه، این است که ()map قابلیت chain کردن دارد. به عبارت دیگر، شما می‌توانید بعد از اجرای متد  ()map روی یک آرایه، متدهای دیگر مثل ()reduce(), sort(), filter را نیز به آن متصل کنید.

این چیزی است که با متد ()forEach، نمی‌توان انجام داد. بله ،‌چون همان‌طور که حدس می‌زنید، undefined بر‌می‌گرداند.

Rest and spread operators:

این دو عملگر ظاهر کاملا یکسانی دارن و هر دو بصورت سه‌نقطه ( … ) هستن.

عملگر Spread
کلمه Spread یعنی گسترش دادن و پخش کردن. عملگر Spread برای زمانی هست که می‌خوایم مقدارهای یک آرایه یا هر چیز Iterable رو گسترش بدیم و پخش کنیم توی یک چیز دیگه. کد زیر رو درنظر بگیرید:

function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];

تابع sum سه تا آرگومان نیاز داره. متغیر numbers رو در نظر بگیرید. اگه بخوایم از روش قبلی استفاده کنیم، اعداد رو باید به شکل زیر پاس بدیم:

sum(numbers[0], numbers[1], numbers[2]);

اما روش باحال‌تر استفاده از عملگر Spread هست:

sum(…numbers);

این عملگر دقیقا کار مثال قبلی رو انجام داد. مقدارهای ‌‌آرایه numbers رو پخش کرد توی تابع sum. همونطور که می‌بینید کد ما چقدر کوتاه‌تر و خواناتر شد.

عملگر Rest

این عملگر که توی توابع استفاده میشه، به تابع کمک می‌کنه تا بی‌نهایت آرگومان داشته باشه. در واقع یک روش جدیدتر بجای کلمه کلیدی arguments توی توابع هست. تابع sum مثال بالا رو درنظر بگیرید که فقط سه تا آرگومان قبول می‌کرد. با استفاده از پارامتر rest می‌تونیم یک کاری کنیم که بی‌نهایت آرگومان قبول کنه:

function sum(...numbers) {
return numbers.reduce((total, current) => total + current);
}
sum(1, 2, 3); // 6
sum(1, 2, 3, 11, 12, 13); // 42

برای مدیریت کردن عملیات ناهمگام چه راه‌هایی هست؟

توی خود جاوااسکریپت با ۳ روش می‌تونیم این کار رو انجام بدیم.

• Callback Function
• پرامیس‌ها
• async/await

البته کتابخونه‌های اختصاصی مثل async.js, bluebird, q, co هم وجود دارن.

ابتدا ویدیو لایو سید احمد حسینی از دانشجویان دوره دوازدهم را ببینید و توضیحات کامل را یادداشت کنید:

این هم یک ویدیو توضیح کلی از پیج:

نکاتی برای استفاده از این منابع:

• به دنبال سوالات متداول باشید: در اکثر مصاحبه های استخدامی React، سوالات متعددی وجود دارد که به طور مکرر پرسیده می شوند. با تمرکز بر روی این سوالات، می توانید شانس موفقیت خود را در مصاحبه افزایش دهید.
• به پاسخ های خود دقت کنید: در پاسخ به سوالات، سعی کنید به طور واضح و مختصر توضیح دهید که چگونه می توانید مشکل را حل کنید.
• تمرین کنید: قبل از مصاحبه، حتماً با پاسخ دادن به سوالات متداول، خود را آماده کنید.

تمام…امیدواریم از این مقاله جامع ترین سوالات استخدامی جاوا اسکریپت نهایت استفاده را برده باشید.

پیشنهاد میکنیم آن را به دوستانتان ارسال کرده و اگر سوالی در ذهن دارید که در لیست وجود ندارد، در قسمت کامنت ارسال کنید تا بقیه دوستان استفاده کنند. با تشکر♥

لینک های مفید: MDN – w3

امیدواریم از این مقاله نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.