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

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

سولات مصاحبه مربوط به توسعه هندگان باتجربه جاوااسکریپت

1-Hoising در جاوا اسکریپت به چه معناست آن را با یک قطعه کد نشان دهید.

پاسخ:

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

مثال:

;console.log(a)
//some code
//some code
//some code
;var a = 1

 خروجی این تکه کد “undefined”  میشود.این به این معناست که ما با error سر و کله نخواهیم زد ،زیرا با این ویژگی جاوا اسکریپت سبب تعریف متغییر در ابتدای کد خواهد شد.ولی نکته ای که باید به آن توجه کرد این است که گونه های متغییر let  و const  از hoising  پشتیبانی نمیکنند.

2-چرا گونه های متغیر let و const همراه با EC6(ECMAScript6)  معرفی شدند؟ تفاوت میان   var , const , let در چیست؟

پاسخ:

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

      Const  

• متغیری استاتیک با محدوده ی بلوکی است.
• مقدار دهی اولیه در هنگام تعریف متغییر های گونه ی const ضروری است.
• تغییر مقدار پس از مقدار دهی اولیه ممکن نیست.
• تعریف دوباره ی یک متغییر ممکن نیست.

     Let  

• متغیری با محدوده ی بلوکی است.
• مقدار دهی اولیه در هنگام تعریف متغیر های گونه ی let ضروری نیست.
• تغییر مقدار پس از مقدار دهی اولیه محدودیتی ندارد.
• تعریف دوباره ی یک متغییر ممکن نیست.

     Var  

• از محدوده عملکردی(functional scope) پشتیبانی میکند.
• در این گونه تعریف متغیر ضروری نیست.
• تغییر مقدار پس از مقدار دهی اولیه محدودیتی ندارد.
• تعریف دوباره ی یک متغیر ممکن است.

3-منطقه مرده موقت (Temporal Dead Zone)چیست؟

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

            مثال:

a = 4; // here JavaScript engine will give a reference error
// some code
// some code
let a;

4-خروجی کنسول برای تکه کد زیر چه خواهد بود؟

const a = []; //empty array assigned to static variable a
const b = []; //empty array assigned to static variable b console.log(a === b);
console.log(a == b);

پاسخ:

            False

این به این دلیل است که حافظه ی اختصاص یافته به هردو آرایه ی خالی a و b متفاوت است و درمورد یک آرایه ، جاوا اسکریپت با مقادیر مطابقت ندارد . اما با مکان آن ها در حافظه در ارتباط است . به همین دلیل است که خروجی در هر دو مورد نادرست است.

5-خروجی کنسول برای تکه کد زیر چه خواهد بود؟

setTimeout(() => { console.log('1'); }, 0);console.log('2');setTimeout(() => { console.log('3'); }, 100); Promise.resolve().then(() => { console.log('4'); });

پاسخ:

2

4

1

3

دلیل این خروجی این است. معنی 0 میلی ثانیه در صف وظیفه جاوا اسکریپت runtimesetTimeout () به این معنی نیست که پس از 0 میلی ثانیه اجرا خواهد شد. در واقع به کل وظایف انتظار بستگی دارد. بنابراین مقدار "2" ابتدا کنسول، سپس Promise و سپس callbacks setTimeout() اجرا می شود.

6-خروجی کنسول برای تکه کد زیر چه خواهد بود؟

let x = 10;
function a() { let x = 20; b(); }
function b() { console.log(x); }
a();

پاسخ:

  10

بله، پاسخ 10 خواهد بود. در اینجا ما () a را فراخوانی می کنیم. که در حال اجرای b() است ، در اینجا b() مقدار x را برمیگرداند که 10 است ، زیرا در حال گرفتن مقدار سراسری x است. در  b() یک  x دیگرتعریف شده است، اما محدوده آن فقط در داخل بلوک است. به همین دلیل است که در b()مقدار سراسری x گرفته می شود.

7- خروجی کد زیر را بنویسید؟

for(var j = 0; j <=2; j++)
}
setTimeout(()=>{ console.log(j); },100)
{

پاسخ:

3

3

3

اگر ما ایتجا از let  به جای var  استفاده کنیم ، خروجی به صورت زیر خواهد بود.

0

1

2

8- بسته شدن (closures)چیست؟ یک مثال ساده از بسته شدن بنویسید.

پاسخ:

  با کمک closure می توانیم یک متغیر سراسری => local یا private بسازیم. به عبارت دیگر، می توان گفت که بسته شدن، توانایی یک تابع برای به خاطر سپردن متغیرها (یا توابع) اعلام شده در محدوده بیرونی است.

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

function closureExample() {
  var count = 1;
  function checkValue() {
    console.log(count);
  }
  count++;
  return checkValue;
}var counter = closureExample();
counter(); // result will be 2

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

9- llfe در جاوااسکریپت چیست و کجا ها مورد استفاده قرار میگیرد؟

IIFE (تلفظ به صورت iffee) به معنای عبارت Invoked Invoked Function است. این یک عبارت تابعی است که به محض ایجاد آن اجرا می شود. یعنی بعد از ایجاد نیازی به فراخوانی آن نیست، به صورت پیش فرض اجرا می شود. نحو آن این است:

(function(){
// some code
// some code
// some code
})();

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

وقتی از توابع تایمر مانند ()setTimeout در استفاده می کنیم.

10-توابع پیکانی (arrow function) چه تفاوتی با توابع معمولی دارند؟

پاسخ:

 توابع پیکانی که با (ECMAScript6) معرفی شدند.تفاوت زیادی با توابع معمولی دارند، اگر بخواهیم بیشتر در مورد این تفاوت ها صحبت کنیم:

• تفاوت نحوی (syntax):

اولین تفاوت این دو نوع تابع در ظاهرشان است.

تابع معمولی:

Function example()

{

// some code

}

تابع پیکانی:

Const example = () => { // some code }

به دو گونه تغریف کردیم و میتوانیم به سادگی متوجه تفاوت شویم example() اینجا دوتابع را با نام 

توابع معمولی:

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

function example(value) { return value + 1; }

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

const example = (value) => value +1;

دراین روش ما از براکت ها چشمپوشی میکنیم و مقدار، بدون کلمه کلیدی return و به صورت اتوماتیک برگشت داده خواهد شد.

3-سازنده ها:

            توابع ساده:

            سازنده ها میتوانند در تواع ساده یه صورت زیر استفاده شوند.

function Example(param) {

this.param = param;

}

const ins = new Example('one');

console.log(ins instanceof Example)

در مثال بالا console.log  مقدار true  را برگشت خواهد داد.

توابع پیکانی:

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

4-رفتار this

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

تابع پیکانی this  برای خودش ندارد در حالی که تابع معمولی دارای this  هستند. مثال زیر درک این موضوع را برایتان راحت تر خواهد کرد.

let obj = { name: "Ankit", arrowFunction:() => { console.log("Hello " + this.name); // this won't work here }, regularFunction(){ console.log("Hi " + this.name); // this will work here } }; obj.arrowFunction(); obj.regularFunction();

Hello undefined

Hi Ankit

بنابراین در صورت تابع arrow این وجود ندارد و خروجی this.name تعریف نشده است اما در صورت تابع معمولی خروجی Ankit است.