در یک مصاحبه جاوا اسکریپت چه می‌گذرد(قسمت اول)

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

۱- طریقه ایجاد ابجکت در جاوا اسکریپت چگونه است؟

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

var object = new Object();

بهترین روش استفاده از متد create Object است که با پاس دادن یک prototype به عنوان پارامتر، یک ابجکت جدید ایجاد می کند:

var object = Object.create(null);

۲- نمونه اولیه زنجیره یا prototype چی هست؟

زنجیره اولیه برای ساخت انواع جدیدی از اشیاء بر اساس موارد موجود استفاده می شود. این شبیه به ارث بری در یک زبان مبتنی بر کلاس است.
نمونه اولیه در نمونه شی از طریق Object.getPrototypeOf(object) یا ویژگی __proto__ در دسترس است در حالی که نمونه اولیه در تابع سازنده از طریق Object.prototype در دسترس است.

۳- تفاوت بین متدهای Call، Apply و Bind چی هست؟

این متدها به کلیدواژه this وابسته هستند.
در متد apply آرگومان‌ها بصورت یک آرایه پاس می‌دهیم:

myMath.add.apply(item1, [3, 2, 1]);

در متد call بصورت جدا جدا و تک تک پاس می‌دهیم:

myMath.add.call(item1, 3, 2, 1);

متد bind یک تابع رو برمی‌گردونه که وقتی صدا زده می‌شود، مقدار this در تابع به آبجکت دلخواه ما اشاره می‌کند و به این بستگی ندارد که این تابع چطوری و کجا دارد صدا زده می‌شود:

var employee1 = { firstName: &quotJohn&quot, lastName: &quotRodson&quot };
var employee2 = { firstName: &quotJimmy&quot, lastName: &quotBaily&quot };
function invite(greeting1, greeting2) {
  console.log(
    greeting1 + &quot &quot + this.firstName + &quot &quot + this.lastName + &quot, &quot + greeting2
  );
}
var inviteEmployee1 = invite.bind(employee1);
var inviteEmployee2 = invite.bind(employee2);
inviteEmployee1(&quotHello&quot, &quotHow are you?&quot); // Hello John Rodson, How are you?
inviteEmployee2(&quotHello&quot, &quotHow are you?&quot); // Hello Jimmy Baily, How are you?

۴- چگونه یک آرایه را بصورت تکه تکه نمایش دهیم؟

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

let arrayIntegers = [1, 2, 3, 4, 5];
let arrayIntegers1 = arrayIntegers.slice(0, 2); // returns [1,2]
let arrayIntegers2 = arrayIntegers.slice(2, 3); // returns [3]
let arrayIntegers3 = arrayIntegers.slice(4); //returns [5]

۵- چگونه یک آرایه از پیش تعریف شده را شخصی سازی کنیم؟

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

let arrayIntegersOriginal1 = [1, 2, 3, 4, 5];
let arrayIntegers1 = arrayIntegersOriginal1.splice(0, 2); // returns [1, 2]; original array: [3, 4, 5]

۶- تفاوت بین splice و slice در چی هست؟

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

۷- تفاوت بین عملگرهای == و === چی هست؟

دو رشته زمانی کاملاً برابر هستند که توالی کاراکترهای یکسان، طول یکسان و کاراکترهای مشابه در موقعیت‌های متناظر داشته باشند.
انواع Null و Undefined با === برابر نیستند، بلکه برابر با == هستند. یعنی

null === undefined // false  
null == undefined // true
1 == &quot1&quot // true 
1 === &quot1&quot // false

۸- تابع کلاس اول یا First-class functions چی هستند؟

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

const handler = () => console.log(&quotThis is a click handler function&quot);
document.addEventListener(&quotclick&quot, handler);

۹- تابع مرتبه بالاتر یا Higher-Order چی هستند؟

تابع Higher-Order تابعی است که تابع دیگری را به عنوان آرگومان می‌پذیرد یا تابعی را به عنوان مقدار بازگشتی یا هر دو را برمیگردونند:

const firstOrderFunc = () =>
  console.log(&quotHello, I am a First order function&quot);
const higherOrder = (ReturnFirstOrderFunc) => ReturnFirstOrderFunc();
higherOrder(firstOrderFunc);

۱۰- تابع unary چی هست؟

تابعی که فقط یک ورودی می‌گیرد و یک مقدار به عنوان خروجی بر می‌گرداند:

const unaryFunction = (a) => console.log(a + 10); // Add 10 to the given argument and display the value

۱۱- هدف از کلمه کلیدی let چی هست؟

دستور let یک متغیر محلی block scope را اعلام می‌کند. بنابراین متغیرهای تعریف شده با کلمه کلیدی let به بلوک، عبارت یا عبارتی که در آن استفاده می‌شود محدود می‌شود:

let counter = 30;
if (counter === 30) {
  let counter = 31;
  console.log(counter); // 31
}
console.log(counter); // 30 (because the variable in if block won't exist here)

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

۱۲- تفاوت بین let و var چی هست؟

متغیرهایی که با let تعریف شده‌اند این اجازه را می‌دهد که به یک محدوده بلوک از کد، مثل یک حلقه for، محدود باشد و خارج از محدوده بلوک‌ تعریف نشده باشد. دقیقا برخلاف var، متغیری که با var تعریف شده باشد، بدون در نظر گرفتن محدوده یک بلوک، در تمام کد قابل دسترس و global است.

۱۳- چگونه یک URL را در جاوا اسکریپت decode یا encode می‌کنیم؟

تابع encodeURI برای رمزگذاری URL استفاده می‌شود. این تابع به یک رشته URL به عنوان پارامتر نیاز دارد و رشته رمزگذاری شده را برمی‌گرداند.
تابع decodeURI برای رمزگشایی یک URL استفاده می شود. این تابع به یک رشته URL رمزگذاری شده به عنوان پارامتر و برگرداندن آن رمزگشایی شده نیاز دارد:

let uri = &quotemployeeDetails?name=john&occupation=manager&quot
let encoded_uri = encodeURI(uri);
let decoded_uri = decodeURI(encoded_uri);

اگر میخواهیم کاراکترهایی مانند / ? : @ & = + $ # را رمزگذاری کنیم، باید از تابع encodeURIcomponent استفاده کنیم.

۱۴- مفهوم Hoisting در جاوا اسکریپت چی هست؟

مفهوم Hoisting یک مکانیسم جاوا اسکریپت است که در آن متغیرها، اعلان‌های تابع و کلاس‌ها قبل از  مرحله اجرا در حافظه ذخیره می‌شوند:

console.log(message); //output : undefined
var message = &quotThe variable Has been hoisted&quot

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

message(&quotGood morning&quot); //Good morning
function message(name) {
  console.log(name);
}

این Hoisting باعث می‌شود که توابع قبل از اعلام به صورت ایمن در کد مورد استفاده قرار گیرند.

۱۵- کلاس ها در ES6 به چه صورتی هستند؟

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

function Bike(model, color) {
  this.model = model;
  this.color = color;
}
Bike.prototype.getDetails = function () {
  return this.model + &quot bike has&quot + this.color + &quot color&quot
};

در حالی که کلاس های ES6 را می توان به عنوان یک جایگزین تعریف کرد:

class Bike {
  constructor(color, model) {
    this.color = color;
    this.model = model;
  }
  getDetails() {
    return this.model + &quot bike has&quot + this.color + &quot color&quot
  }
}

۱۶- ماژول‌ها چی هستند؟

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

۱۷- وظیفه scope در جاوا اسکریپت؟

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

۱۸- سرویس ورکر چی هست؟

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

۱۹- چگونه DOM را با استفاده از یک سرویس ورکر دستکاری کنیم؟

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