JavaScript — один из самых популярных языков программирования в мире, который широко используется для веб-разработки, серверного программирования и разработки мобильных приложений. Если вы готовитесь к собеседованию по JavaScript, важно знать, с какими вопросами вы можете столкнуться. Вот некоторые из последних вопросов на собеседовании по JavaScript, с которыми вы можете столкнуться:

1. Можете ли вы объяснить разницу между let, var и const?

  • var относится к области действия функции, let и const относится к области действия блока. Объявления var поднимаются наверх своей области действия, а объявления let и const не поднимаются. const используется для значений, которые не следует переназначать, а let используется для значений, которые необходимо переназначить.
var x = 10;
let y = 20;
const z = 30;

if (true) {
  var x = 100;
  let y = 200;
  const z = 300;
  console.log(x, y, z);
  // 100 200 300
}

console.log(x, y, z);
// 100 20 30

2. Что такое замыкание в JavaScript?

  • Замыкание — это функция, которая имеет доступ к переменным в своей внешней области видимости даже после возврата внешней функции.
function outerFunction(x) {
  return function innerFunction(y) {
    return x + y;
  };
}
const addBy5 = outerFunction(5);
console.log(addBy5(3)); // 8

3. В чем разница между null и undefined?

  • undefined означает, что переменная объявлена, но ей еще не присвоено значение. null явно назначается без значения.
let x;
console.log(x); // undefined
let y = null;
console.log(y); // null

4. Можете ли вы объяснить цикл обработки событий в JavaScript?

  • Цикл событий — это механизм, который позволяет JavaScript выполнять неблокирующие операции, помещая выполнение кода в очередь и обрабатывая эту очередь по мере того, как стек становится пустым. Таким образом, он может обрабатывать несколько событий и манипулировать DOM, даже если JavaScript является однопоточным.

5. В чем разница между синхронным и асинхронным кодом в JavaScript?

  • Синхронный код выполняется по порядку, одна строка за другой. Асинхронный код выполняется в фоновом режиме и не блокирует выполнение остального кода.
console.log('Start');
setTimeout(() => {
  console.log('Timeout');
}, 0);
console.log('End');

// Output: 
// Start
// End
// Timeout

6. Можете ли вы объяснить наследование прототипов в JavaScript?

  • Наследование прототипов — это механизм в JavaScript, при котором объект может наследовать свойства и методы от своего прототипа. Прототип — это объект, который служит образцом для создания других объектов. Код JavascriptCopy
function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(`${this.name} makes a sound.`);
};

const dog = new Animal('Dog');
dog.speak(); // "Dog makes a sound."

7. Можете ли вы привести пример использования apply и call в JavaScript?

  • И apply, и call — это методы, которые позволяют вызывать функцию с указанным this значением и аргументами. Разница в том, что apply принимает массив аргументов, а call принимает отдельные аргументы.
function greet(greeting) {
  return `${greeting}, ${this.name}`;
}

const person = { name: 'John' };

console.log(greet.call(person, 'Hello')); // "Hello, John"
console.log(greet.apply(person, ['Hello'])); // "Hello, John"

8. Можете ли вы объяснить разницу между глубоким и поверхностным копированием в JavaScript?

  • Неглубокая копия объекта копирует только первый уровень свойств, а глубокая копия копирует все уровни свойств и создает полностью независимый объект.
const originalObject = {
  a: 1,
  b: {
    c: 2
  }
};

const shallowCopy = { ...originalObject };
shallowCopy.a = 10;
console.log(originalObject.a); // 1
console.log(shallowCopy.a); // 10

shallowCopy.b.c = 20;
console.log(originalObject.b.c); // 20
console.log(shallowCopy.b.c); // 20

const deepCopy = JSON.parse(JSON.stringify(originalObject));
deepCopy.a = 100;
console.log(originalObject.a); // 1
console.log(deepCopy.a); // 100

deepCopy.b.c = 200;
console.log(originalObject.b.c); // 20
console.log(deepCopy.b.c); // 200

9. Можете ли вы привести пример использования оператора распространения в JavaScript?

  • Оператор распространения позволяет вам распределить массив или объект на отдельные элементы или свойства соответственно.
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]

const object1 = { a: 1, b: 2 };
const object2 = { c: 3, d: 4 };
const combinedObject = { ...object1, ...object2 };
console.log(combinedObject); // { a: 1, b: 2, c: 3, d: 4 }

10. Можете ли вы объяснить разницу между == и === в JavaScript?

  • == выполняет приведение типов, а === — нет. == преобразует операнды к одному типу перед сравнением, а === сравнивает операнды без их преобразования.
console.log(1 == '1'); // true
console.log(1 === '1'); // false

11. Можете ли вы объяснить разницу между промисом и обратным вызовом в JavaScript?

const successCallback = data => {
  console.log(data);
};

const errorCallback = error => {
  console.error(error);
};

const doSomethingWithCallbacks = (success, error) => {
  const result = 'Success';
  if (result === 'Success') {
    success(result);
  } else {
    error(new Error('Error'));
  }
};

doSomethingWithCallbacks(successCallback, errorCallback);

const doSomethingWithPromise = () => {
  return new Promise((resolve, reject) => {
    const result = 'Success';
    if (result === 'Success') {
      resolve(result);
    } else {
      reject(new Error('Error'));
    }
  });
};

doSomethingWithPromise()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

12. Можете ли вы объяснить, что такое цикл обработки событий в JavaScript?

  • Цикл событий — это механизм в JavaScript, который обрабатывает выполнение асинхронного кода. Он постоянно проверяет очередь сообщений на наличие сообщений (событий), которые необходимо обработать, и выполняет связанные с ними функции обратного вызова.
console.log('Start');
setTimeout(() => {
  console.log('Timeout');
}, 0);
console.log('End');

// Output:
// Start
// End
// Timeout

13. Можете ли вы объяснить, что такое функция высшего порядка в JavaScript?

  • Функция высшего порядка — это функция, которая либо принимает одну или несколько функций в качестве аргументов, либо возвращает функцию в качестве результата.
const map = (array, transform) => {
  const result = [];
  for (const item of array) {
    result.push(transform(item));
  }
  return result;
};

14. Можете ли вы объяснить, что такое подъем в JavaScript?

  • Поднятие — это поведение в JavaScript, при котором объявления переменных и функций перемещаются в верхнюю часть соответствующих областей видимости. Это означает, что их можно использовать до того, как они будут объявлены в коде.
console.log(x); // undefined
var x = 10;

// is equivalent to:
var x;
console.log(x); // undefined
x = 10;

15. Можете ли вы объяснить, что такое тернарный оператор в JavaScript?

  • Тернарный оператор — это сокращенный способ написания оператора if, который возвращает значение. Он принимает три операнда: условие, возвращаемое значение, если условие истинно, и возвращаемое значение, если условие ложно.
const x = 5;
const result = x > 10 ? 'x is greater than 10' : 'x is less than or equal to 10';
console.log(result); // x is less than or equal to 10

16. Как ключевое слово this используется в JavaScript?

Ключевое слово this относится к объекту, методом которого является текущая функция. Значение this зависит от того, как вызывается функция, а не от того, где она объявлена.

const obj = {
  name: 'John Doe',
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  },
};

obj.greet(); // Hello, my name is John Doe

17. Можете ли вы объяснить всплывающие и захватывающие события в JavaScript?

В JavaScript всплывающее окно и захват событий — это два способа распространения событий в DOM (объектная модель документа).

Всплывание событий — это поведение по умолчанию, когда событие распространяется от самого внутреннего элемента к самому внешнему элементу. Например, если у вас есть кнопка внутри div, и вы нажимаете кнопку, событие щелчка сначала будет инициировано на кнопке, а затем на div.

Захват событий противоположен пузырьковому движению, когда событие сначала захватывается самым внешним элементом и распространяется внутрь.

document.querySelector('#outer').addEventListener('click', (event) => {
  console.log('outer clicked');
}, true);

document.querySelector('#inner').addEventListener('click', (event) => {
  console.log('inner clicked');
}, true);

18. Как бы вы реализовали функцию устранения дребезга в JavaScript?

Функция устранения дребезга — это метод, используемый для ограничения скорости вызова функции. Он позволяет указать минимальное количество времени, которое должно пройти между последовательными вызовами функции. Функция устранения дребезга может быть реализована в JavaScript с помощью метода setTimeout.

function debounce(fn, wait) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(function () {
      fn.apply(context, args);
    }, wait);
  };
}

const myFunction = debounce(function () {
  console.log('Debounced function called!');
}, 500);

myFunction(); // Debounced function called! (called after 500 milliseconds)

19. Каковы наиболее важные особенности JavaScript и как бы вы объяснили их тем, кто плохо знаком с этим языком?

Ответ: Некоторые из наиболее важных особенностей JavaScript включают его динамическую типизацию, возможности функционального программирования и поддержку программирования, управляемого событиями. Я бы объяснил это как язык, который позволяет создавать интерактивные и отзывчивые веб-страницы, с легкостью выполнять сложные операции и запускать код как на стороне клиента, так и на стороне сервера.

20. Последние функции JavaScript, над которыми вы работали.

  1. Необязательная цепочка (?.)

Необязательная цепочка — это функция, представленная в JavaScript, которая позволяет вам получать доступ к свойствам объекта, только если они существуют. Он представлен знаком «?» оператор. Например, если у нас есть такой объект:

cssCopy code
let obj = {
  person: {
    name: "John",
    age: 30
  }
};

Обычно, если мы хотим получить доступ к свойству age, мы должны написать

let age = obj.person.age;

Однако если мы попытаемся получить доступ к несуществующему свойству, мы получим ошибку. С помощью необязательной цепочки мы можем проверить, существует ли свойство, прежде чем обращаться к нему, например

let age = obj?.person?.age;

В этом случае выражение obj?.person?.age вернет undefined, если свойство person или свойство age не существует.

2. Нулевой оператор объединения (??)

Нулевой оператор объединения (??) является сокращением для проверки того, является ли значение null или undefined. Это более ограничительная версия логического оператора ИЛИ (||).

Например, если у нас есть переменная a и мы хотим установить для нее значение по умолчанию 10, если это null или undefined, мы можем написать

let a = null;
let b = a ?? 10;
console.log(b); // 10

В этом примере значение b равно 10, поскольку a равно null. Если бы a было 0, выражение вернуло бы 0, потому что нулевой оператор объединения возвращает значение по умолчанию, только если исходное значение равно null или undefined.

Это лишь некоторые из многих вопросов, которые могут возникнуть у вас на собеседовании по JavaScript. Ознакомившись с этими концепциями и попрактиковавшись в ответах, вы повысите свои шансы получить работу своей мечты в качестве разработчика JavaScript. Удачи!

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.