Сложные фрагменты кода Javascript, заданные в интервью

Фрагменты для проверки ваших знаний Javascript

В этой статье мы увидим некоторые из самых известных фрагментов кода интервью, которые просят проверить ваши знания о концепциях Javascript.

Давайте начнем

Предсказать вывод приведенного ниже кода

const user = {
  name: 'Raj',
  location: {
    city: 'NY',
    state: 'NY'
  }
};
const copy = Object.assign({}, user);
// OR
// const copy = { ...user };
copy.location.city = 'Albany';
console.log('original: ', user.location);
console.log('copy:', copy.location);

Результатом приведенного выше кода является

original:  {
  city: 'Albany',
  state: 'NY'
}
copy: {
  city: 'Albany',
  state: 'NY'
}

Причина изменения исходного объекта заключается в том, что когда мы используем Object.assign или spread operator,, он делает только shallow copy, что означает, что при создании копии объекта копируются свойства только первого уровня, а если есть вложенные свойства, то копируется только их ссылка Это означает, что скопированная ссылка по-прежнему относится к исходному месту, где хранится объект.

Таким образом, в нашем случае свойство location по-прежнему будет относиться к исходному объекту, который в нашем случае является объектом user.

Чтобы лучше понять это, прочтите мою предыдущую статью ЗДЕСЬ.

var number = 10;
var display = function () {
  console.log(number);
  var number = 20;
};
display();

Результатом приведенного выше кода будет не 10, а undefined.

Почему?

Это из-за hoisting в Javascript.

Таким образом, приведенный выше код будет преобразован в приведенный ниже код

var number = 10;
var display = function () {
  var number;
  console.log(number);
  number = 20;
};
display();

Как вы можете видеть, только declaration перемещается в начало функции, а value не поднимается, поэтому console.log печатает undefined, потому что number не имеет значения, назначенного внутри функции перед оператором console.log.

const number = 1;
const result = (function () {
  delete number;
  return number;
})();
console.log(result);

Этот код не выдаст никакой ошибки, потому что мы используем delete для number, но он напечатает значение 1 в качестве вывода.

Этот синтаксис прямого вызова функции известен как IIFE (выражение немедленного вызова функции).

Оператор delete используется для удаления свойства объекта. Здесь number не объект, а примитивный тип, поэтому он не выдаст ошибку, но функция вернет исходное значение переменной, равной 1, которая находится в области действия оператора console.log.

const number = 1;
const result = (function (number) {
  delete number;
  return number;
})(10);
console.log(result);

Результатом приведенного выше кода является 10

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

function display() {
  var a = b = 10;
}
display();
console.log('b', typeof b === 'undefined');
console.log('a', typeof a === 'undefined');

Результатом приведенного выше кода является

b false
a true

Это связано с тем, что оператор присваивания имеет right to left associativity в Javascript, что означает, что он будет оцениваться справа налево, поэтому сначала b будет присвоено значение 10, а затем ему будет присвоено значение a. Следовательно

function display() {
  var a = b = 10;
}

такой же как

function display() {
  var a = (b = 10);
}

что то же самое как

function display() {
 b = 10; 
 var a = b;
}

Таким образом, b становится глобальной переменной, потому что перед ним нет ключевого слова var, а a становится локальной переменной. Следовательно, вне функции доступно только b, поэтому typeof a === 'undefined' идет как true, а typeof b === 'undefined' - как false.

Если мы выполним приведенный выше код в strict mode, как показано ниже,

'use strict';
function display() {
  var a = b = 10;
}
display();
console.log('b', typeof b === 'undefined');
console.log('a', typeof a === 'undefined');

Это вызовет ошибку, потому что b становится глобальной переменной, а strict mode не позволяет создавать глобальные переменные, поэтому вы получите сообщение об ошибке при выполнении этого кода.

На сегодня все. Надеюсь, вы узнали что-то новое.

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