سوالات مصاحبه جاوا اسکریپت – انجمن DEV

سلام مردم! 👋 به جلسه دیگری از کا گیان رایگان خوش آمدید (زیرا چه کسی خرد آزاد را دوست ندارد؟). ممکن است فکر کنید، “چرا یک جلسه دیگر؟” خوب، چون من مقاله دیگری دارم که در آن به سوالات مصاحبه React پرداختم 💻، و اگر توسعه دهنده React هستید، حتما باید آن را بررسی کنید. خوش اومدی 🙌

اکنون، بیایید به چیزی به همان اندازه هیجان انگیز تغییر دهیم: سوالات مصاحبه جاوا اسکریپت! 🎉 بله، سرزمین جادویی پرانتزهای فرفری {}، نحو پیچیده، و گاه به گاه “چرا این تعریف نشده است؟” لحظه

اگر برای یک نقش فرانت‌اند آماده می‌شوید، جاوا اسکریپت بهترین دشمن جدید شما خواهد شد. 🥲 مصاحبه‌کنندگان جاوا اسکریپت را دوست دارند—احتمالاً به این دلیل که گسترده، غیرقابل پیش‌بینی و مناسب برای ایجاد سؤالاتی است که شما را در انتخاب شغل خود شک می‌کند. 😅

برای آسان‌تر کردن کارها (و کمتر ترسناک)، من سؤالات جاوا اسکریپت را به 2 دسته تقسیم کردم:

نظریه: 🧠
آه، قسمتی که فیلسوف درونی شما را آزمایش می کنند. برای سؤالاتی در مورد حلقه رویداد، وراثت و همه چیز از «نمونه اولیه چیست؟» آماده باشید. به “چرا این از من متنفر است؟” 🤔

کدنویسی ویژگی: 🎨
نمایش دهنده. 🌟 در اینجا از شما می خواهند با استفاده از جاوا اسکریپت چیز جالبی بسازید. شاید این یک ویژگی باشد، شاید مشکل کدنویسی عجیبی است که شامل setImmediate یا setInterval است. ⏳ نترسید — من حتی مثالی را که در مصاحبه به من زده شده است آورده ام. این یک راه فوق‌العاده برای غوطه‌ور شدن در وعده‌ها و همگام‌سازی/انتظار در حالی است که انتخاب‌های زندگی‌تان را زیر سوال می‌برید. 🌀

بنابراین، دست و پنجه نرم کنید! این یک جاوا اسکریپت است. 🚀

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

سوالات تئوری جاوا اسکریپت:

1. انواع داده های مختلف موجود در جاوا اسکریپت چیست؟
2. Hoisting در جاوا اسکریپت را توضیح دهید؟

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

3. تفاوت بین var، let، و constکلمه کلیدی در جاوا اسکریپت؟
4. ارزش عبور و مرجع چیست؟

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

5. تفاوت بین کپی عمیق و کپی کم عمق چیست؟
6. توابع خود فراخوانی یا عبارات تابع فوری فراخوانی شده (IIFE) که به عنوان توابع ناشناس نیز شناخته می شوند چیست؟

(function () {
    console.log("I am a self-invoking function!");
})();

7. منظور شما از “حالت سخت” در جاوا اسکریپت چیست؟
8. توابع بالاتر در جاوا اسکریپت را توضیح دهید.
9. توضیح دهید this کلمه کلیدی در جاوا اسکریپت
10. توضیح دهید call()، apply()، و bind() روش ها در جاوا اسکریپت
11. Currying در جاوا اسکریپت چیست؟
12. محدوده واژگانی در جاوا اسکریپت چیست؟
13. Closures را در جاوا اسکریپت توضیح دهید.
14. نمونه های اولیه شی چیست؟
15. وراثت نمونه اولیه چیست؟
16. callback در جاوا اسکریپت چیست؟
17. جهنم برگشت تماس را توضیح دهید.
18. پارامتر استراحت چیست و چه تفاوتی با عملگر spread دارد؟
19. کاربرد Promises در جاوا اسکریپت چیست؟
20. توابع مولد چیست؟
21. منطقه مرده زمانی در جاوا اسکریپت چیست؟
22. چه هستند async و await در جاوا اسکریپت؟
23. توضیح دهید reduce() عملکرد در جاوا اسکریپت
24. اجبار ضمنی در جاوا اسکریپت چیست؟
25. “شهروندان درجه یک” بودن توابع در جاوا اسکریپت به چه معناست؟
26. محدوده را توضیح دهید this داخل یک شی

اگر تابعی در داخل یک شی باشد، this به شی اشاره می کند و می تواند به ویژگی های آن دسترسی داشته باشد.

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

27. چه اهمیتی دارد new کلمه کلیدی در جاوا اسکریپت؟
28. یادداشت در جاوا اسکریپت چیست؟
29. چه هستند Map، WeakMap، و WeakSet در جاوا اسکریپت؟
30. انتشار رویداد در جاوا اسکریپت چیست؟
31. نمایندگی رویداد در جاوا اسکریپت چیست؟
32. حلقه رویداد در جاوا اسکریپت چیست؟
33. جریان کنترل در جاوا اسکریپت چیست؟

جریان کنترل در جاوا اسکریپت ترتیب اجرای دستورات در کد شما را تعیین می کند. در اینجا ساختارهای اصلی جریان کنترل به شرح زیر است: If Statement، استفاده از بیانیه If-Else، استفاده از بیانیه سوئیچ، استفاده از عملگر سه تایی، استفاده از حلقه For.

34. تفاوت بین رندر سمت سرور (SSR) و رندر سمت مشتری (CSR) چیست؟
35- تفاوت برنامه نویسی اعلانی و امری چیست؟

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

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

36. انقباض و گاز دادن چیست؟

سوالات مبتنی بر ویژگی:

1. یک رشته را در جاوا اسکریپت معکوس کنید؟

const reversestring = str => str.split("").reverse().join("");
const res = reversestring("tpircsavaJ iH")
console.log(res) // Hi Javascript

2. کد برای debouncing بنویسید.

const inputBox = document.getElementById('userInput');

inputBox.addEventListener('input', (event) => {
  Debouncing(event);
});

let interval;

function Debouncing (event)  {
clearTimeout(interval)
interval = setTimeout(() => {
      console.log(event.target.value);
}, 2000)
}

3. کد برای throttling بنویسید.

const inputBox = document.getElementById('userInput');

inputBox.addEventListener('input', (event) => {
  Throttling(event);
});

let value = true;

function Throttling (event)  {
  if (value === true) {
    console.log(event.target.value);
    value = false;
    setTimeout(() => {
        value = true;
    }, 2000)
  }
}

4. چگونه آرایه اشیاء را بر اساس یک کلید مرتب کنیم؟

const array = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 20 }
];

// Sort by age (ascending)
array.sort((a, b) => a.age - b.age);

console.log(array);
// Output: 
// [
//   { name: 'Charlie', age: 20 },
//   { name: 'Alice', age: 25 },
//   { name: 'Bob', age: 30 }
// ]

5. یک تابع سازنده بنویسید.

function Person(name, age, city) {
  // Properties
  this.name = name;
  this.age = age;
  this.city = city;

  // Method
  this.greet = function () {
    console.log(`Hi, I'm ${this.name}, and I live in ${this.city}.`);
  };
}

// Creating an instance
const person1 = new Person("Prajesh", 25, "Pune");
const person2 = new Person("Anjali", 28, "Mumbai");

// Using the method
person1.greet(); // Output: Hi, I'm Prajesh, and I live in Pune.
person2.greet(); // Output: Hi, I'm Anjali, and I live in Mumbai.

6. polyfill یک نقشه را بنویسید، کاهش دهید و فیلتر کنید.

در اینجا Polyfill قطعه کدی است که عملکرد یا ویژگی یک API یا روش جدیدتر را تقلید می‌کند و آن را قادر می‌سازد در محیط‌هایی که به صورت بومی پشتیبانی نمی‌شود کار کند.

Array.prototype.myMap = function(callback) {
  if (!this || !Array.isArray(this)) {
    throw new TypeError('myMap can only be called on arrays.');
  }

  const result = [];
  for (let i = 0; i < this.length; i++) {
    if (this.hasOwnProperty(i)) {
      result.push(callback(this[i], i, this));
    }
  }
  return result;
};

// Example usage
const numbers = [1, 2, 3];
const doubled = numbers.myMap((num) => num * 2);
console.log(doubled); // Output: [2, 4, 6]

Array.prototype.myReduce = function(callback, initialValue) {
  if (!this || !Array.isArray(this)) {
    throw new TypeError('myReduce can only be called on arrays.');
  }
  if (typeof callback !== 'function') {
    throw new TypeError('Callback must be a function.');
  }

  let accumulator = initialValue;
  let startIndex = 0;

  if (accumulator === undefined) {
    if (this.length === 0) {
      throw new TypeError('Reduce of empty array with no initial value.');
    }
    accumulator = this[0];
    startIndex = 1;
  }

  for (let i = startIndex; i < this.length; i++) {
    if (this.hasOwnProperty(i)) {
      accumulator = callback(accumulator, this[i], i, this);
    }
  }

  return accumulator;
};

// Example usage
const sum = [1, 2, 3, 4].myReduce((acc, num) => acc + num, 0);
console.log(sum); // Output: 10

Array.prototype.myFilter = function(callback) {
  if (!this || !Array.isArray(this)) {
    throw new TypeError('myFilter can only be called on arrays.');
  }
  if (typeof callback !== 'function') {
    throw new TypeError('Callback must be a function.');
  }

  const result = [];
  for (let i = 0; i < this.length; i++) {
    if (this.hasOwnProperty(i) && callback(this[i], i, this)) {
      result.push(this[i]);
    }
  }
  return result;
};

// Example usage
const numbers = [1, 2, 3, 4];
const evens = numbers.myFilter((num) => num % 2 === 0);
console.log(evens); // Output: [2, 4]

7. سه تابع بنویسید که هر کدام از setTimeout برای به تاخیر انداختن اجرا به ترتیب 3 ثانیه، 2 ثانیه و 1 ثانیه استفاده می کنند. سپس، یک تابع بنویسید تا این سه تابع را به یک ترتیب (یک، دو، سه) اجرا کند، به طوری که خروجی:

one  
two  
three  

const one = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
    console.log("one")
    resolve();
    }, 3000)
  })
}

const two = () => {
     return new Promise((resolve, reject) => {
    setTimeout(() => {
    console.log("two")
    resolve();
    }, 2000)
  })
}

const three = () => {
     return new Promise((resolve, reject) => {
    setTimeout(() => {
    console.log("three")
    resolve();
    }, 1000)
  })
}

const check = async () => {
await one();
await two();
await three();
}

check();

// output:
// one
// two
// three

8. یک تابع پاسخ به تماس ساده بنویسید؟

// A function that takes a callback as an argument
function greetUser(name, callback) {
    console.log(`Hello, ${name}!`);
    callback();
}

// A callback function
function displayMessage() {
    console.log('Welcome to the platform!');
}

// Using the greetUser function with the callback
greetUser('Jhon', displayMessage);

9. یک تابع ضرب بنویسید که در صورت فراخوانی در زیر نحو به درستی کار کند.

console.log(multiply (2) (3) (4)) // output: 24
console.log(multiply (3) (4) (5)) // output: 60

function multiply (x) {
  return function (y) {
    return function (z) {
      return x * y * z
    }
  }
}

10. برای حفظ کردن کد بنویسید.

const memoizeAddition = () => {
  let cache = {};
  return (value) => {
    if (value in cache) {
      console.log("Fetching from cache");
      return cache[value]; // Here, cache.value cannot be used as property name starts with the number which is not a valid JavaScript  identifier. Hence, can only be accessed using the square bracket notation.
    } else {
      console.log("Calculating result");
      let result = value + 20;
      cache[value] = result;
      return result;
    }
  };
};
// returned function from memoizeAddition
const addition = memoizeAddition();
console.log(addition(20)); //output: 40 calculated
console.log(addition(20)); //output: 40 cached

تبریک می‌گویم که به انتهای این پست رسیدید و از خواندن شما بسیار سپاسگزارم!

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

👉 لینک رپو: https://github.com/sudheerj/javascript-interview-questions