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

  1. Что может сделать оператор &&?
  2. Что может сделать оператор ||?
  3. В чем разница между undefined и null?
  4. Что такое распространение событий?
  5. Что такое пузырьковое событие?
  6. Что такое захват событий?
  7. В чем разница между методами event.preventDefault() и event.stopPropagation()?
  8. Как определить, использовался ли метод event.preventDefault() в элементе?
  9. Почему код obj.someprop.x выдает ошибку?
  10. Что такое event.target?
  11. Что такое event.currentTarget?
  12. Почему сравнение двух похожих объектов в JavaScript возвращает false?
  13. Как вычислить значения нескольких выражений в одной строке?
  14. Что такое масштаб?
  15. Что такое ложные значения в JavaScript?

1. Что может оператор &&?

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

console.log(false && 1 && []); // false
console.log(" " && true && 5); // 5

Использование оператора if.

const router: Router = Router();

router.get('/endpoint', (req: Request, res: Response) => {
   let conMobile: PoolConnection;
   try {
      //do some db operations
   } catch (e) {
   if (conMobile) {
    conMobile.release();
   }
  }
});

Использование оператора &&.

const router: Router = Router();

router.get('/endpoint', (req: Request, res: Response) => {
  let conMobile: PoolConnection;
  try {
     //do some db operations
  } catch (e) {
    conMobile && conMobile.release()
  }
});

2. Что может || оператор делать?

Оператор ||, также известный как логическое ИЛИ, оценивает операнды и возвращает первое попавшееся истинное выражение. Он также использует короткое замыкание для предотвращения ненужной работы. До введения параметров функций по умолчанию ES6 они использовались для инициализации значений параметров по умолчанию в функциях.

console.log(null || 1 || undefined); // 1

function logName(name) {
  var n = name || "Mark";
  console.log(n);
}

logName(); // "Mark"

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

Прежде чем понять разницу между undefined и null, давайте сначала посмотрим на их сходство.

Оба они принадлежат к 7 примитивным типам в JavaScript.

let primitiveTypes = ['string','number','null','undefined','boolean','symbol', 'bigint'];

Они считаются ложными значениями, а это означает, что при преобразовании в логическое значение с использованием Boolean(value) или !!value их значение равно false.

console.log(!!null); // false
console.log(!!undefined); // false

console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false

Теперь давайте посмотрим на их отличия.

undefined — это значение по умолчанию для переменных, которые не указывают конкретное значение, или функций, которые явно не возвращают значение, например. console.log(1), а также для свойств, не существующих в объекте, для которых движок JS присваивает undefined значений.

let _thisIsUndefined;
const doNothing = () => {};
const someObj = {
  a : "ay",
  b : "bee",
  c : "si"
};

console.log(_thisIsUndefined); // undefined
console.log(doNothing()); // undefined
console.log(someObj["d"]); // undefined

nullэто значение, которое представляет отсутствие какого-либо значения. null явно присваивается переменным. В этом примере мы получим значение null , когда метод fs.readFile не выдаст ошибку.

fs.readFile('path/to/file', (e,data) => {
   console.log(e); // Print null when no errors occur.
   if(e){
     console.log(e);
   }
   console.log(data);
 });

При сравнении null и undefined мы получаем true при использовании == и false при использовании ===.

console.log(null == undefined); // true
 console.log(null === undefined); // false

4. Что такое распространение событий?

Когда событие происходит в элементе DOM, оно происходит не только в этом конкретном элементе. Во время «фазы всплытия» событие всплывает или распространяется к своему родителю, бабушкам и дедушкам, прабабушкам и дедушкам или родителю, пока не достигнет window. С другой стороны, во время «фазы захвата» событие запускается на элементах, начиная с window , и распространяется вниз к цели события или event.target.

Распространение события состоит из трех фаз:

  1. Фаза захвата: событие начинается с window , а затем перемещается вниз к каждому элементу, пока не достигнет целевого элемента.
  2. Целевая фаза: событие достигло целевого элемента.
  3. Фаза всплытия: событие поднимается вверх от целевого элемента, а затем поднимается к каждому элементу, пока не достигнет window.

5. Что такое пузырьковое всплытие событий?

Когда событие происходит в элементе DOM, оно происходит не только в этом конкретном элементе. Во время фазы всплытия событие всплывает, или событие происходит с его родителем, дедушкой и бабушкой, прабабушкой и дедушкой и так далее, пока не достигнет window.

HTML:

<div class="grandparent">
  <div class="parent">
    <div class="child">1</div>
  </div>
</div>

JS:

function addEvent(el, event, callback, isCapture = false) {
  if (!el || !event || !callback || typeof callback !== 'function') return;
  if (typeof el === 'string') {
    el = document.querySelector(el);
  };
  el.addEventListener(event, callback, isCapture);
}

addEvent(document, 'DOMContentLoaded', () => {
  const child = document.querySelector('.child');
  const parent = document.querySelector('.parent');
  const grandparent = document.querySelector('.grandparent');

  addEvent(child, 'click', function (e) {
    console.log('child');
  });

  addEvent(parent, 'click', function (e) {
    console.log('parent');
  });

  addEvent(grandparent, 'click', function (e) {
    console.log('grandparent');
  });

  addEvent(document, 'click', function (e) {
    console.log('document');
  });

  addEvent('html', 'click', function (e) {
    console.log('html');
  })

  addEvent(window, 'click', function (e) {
    console.log('window');
  })

});

Метод addEventListener имеет третий необязательный параметр с именем useCapture, который по умолчанию равен false. Если установлено значение true, событие произойдет на этапе захвата, а не на этапе всплытия. Если вы нажмете на дочерний элемент, он выведет на консоль child, parent, grandparent, html, document и window соответственно. Это всплытие событий.

6. Что такое захват событий?

Когда событие происходит в элементе DOM, оно происходит не только в этом конкретном элементе. На этапе захвата событие начинается с окна и перемещается вниз до элемента, где событие инициировано.

HTML:

<div class="grandparent">
  <div class="parent">
    <div class="child">1</div>
  </div>
</div>

JS:

function addEvent(el, event, callback, isCapture = false) {
  if (!el || !event || !callback || typeof callback !== 'function') return;
  if (typeof el === 'string') {
    el = document.querySelector(el);
  };
  el.addEventListener(event, callback, isCapture);
}

addEvent(document, 'DOMContentLoaded', () => {
  const child = document.querySelector('.child');
  const parent = document.querySelector('.parent');
  const grandparent = document.querySelector('.grandparent');

  addEvent(child, 'click', function (e) {
    console.log('child');
  });

  addEvent(parent, 'click', function (e) {
    console.log('parent');
  });

  addEvent(grandparent, 'click', function (e) {
    console.log('grandparent');
  });

  addEvent(document, 'click', function (e) {
    console.log('document');
  });

  addEvent('html', 'click', function (e) {
    console.log('html');
  })

  addEvent(window, 'click', function (e) {
    console.log('window');
  })

});

Метод addEventListener имеет третий необязательный параметр с именем useCapture, который по умолчанию равен false. Если установлено значение true, событие произойдет на этапе захвата, а не на этапе всплытия. Если вы нажмете на элемент child , он зарегистрирует window, document, html, grandparent и parent соответственно на консоли. Это захват событий.

7. В чем разница между методами event.preventDefault() и event.stopPropagation()?

Метод event.preventDefault() предотвращает поведение элемента по умолчанию. Если он используется внутри элемента формы, он предотвращает его отправку. Если он используется внутри элемента привязки, он предотвращает навигацию. При использовании в контекстном меню предотвращает его отображение или появление. С другой стороны, метод event.stopPropagation() используется для предотвращения дальнейшего распространения текущего события как на этапах захвата, так и на этапах всплытия.

8. Как определить, использовался ли внутри элемента метод event.preventDefault()?

Мы можем использовать свойство event.defaultPrevented в объекте события. Он возвращает логическое значение, указывающее, был ли вызван event.preventDefault() в конкретном элементе.

9. Почему код obj.someprop.x выдает ошибку?

const obj = {};
console.log(obj.someprop.x);

Ясно, что код выдает ошибку, потому что мы пытаемся получить доступ к свойству «x» в свойстве «someprop», которого нет в объекте. Это приводит к значению undefined. Помните, что доступ к свойству, не существующему в самом объекте или его прототипе, по умолчанию имеет значение undefined. Поскольку у undefined нет свойства «x», попытка доступа к нему приведет к ошибке.

10. Что такое event.target?

Проще говоря, event.target — это элемент, в котором произошло событие, или элемент, вызвавший событие.

HTML:

<div onclick="clickFunc(event)" style="text-align: center;margin:15px;
border:1px solid red;border-radius:3px;">
    <div style="margin: 25px; border:1px solid royalblue;border-radius:3px;">
        <div style="margin:25px;border:1px solid skyblue;border-radius:3px;">
          <button style="margin:10px">
             Button
          </button>
        </div>
    </div>
 </div>

JS:

function clickFunc(event) {
  console.log(event.target);
}

Если вы нажмете на button, даже если мы прикрепим событие к самому внешнему div, оно все равно напечатает тег button. Следовательно, мы можем сделать вывод, что event.target — это элемент, вызвавший событие.

11. Что такое event.currentTarget?

event.currentTarget — это элемент, к которому мы явно прикрепляем обработчик событий.

HTML:

<div onclick="clickFunc(event)" style="text-align: center;margin:15px;
border:1px solid red;border-radius:3px;">
    <div style="margin: 25px; border:1px solid royalblue;border-radius:3px;">
        <div style="margin:25px;border:1px solid skyblue;border-radius:3px;">
          <button style="margin:10px">
             Button
          </button>
        </div>
    </div>
 </div>

JS :

function clickFunc(event) {
  console.log(event.currentTarget);
}

Если вы нажмете на button, даже если вы нажмете на этот button, он все равно напечатает самый внешний тег div . В этом примере мы можем сделать вывод, что event.currentTarget — это элемент, к которому привязан обработчик события.

12. Почему сравнение двух похожих объектов в JavaScript возвращает false?

Начнем со следующего примера:

let a = { a: 1 };
let b = { a: 1 };
let c = a;
console.log(a === b); 
// It prints false even though they have the same properties.
console.log(a === c); // true

JavaScript сравнивает объекты и примитивные типы по-разному. В примитивных типах JavaScript сравнивает их на основе их значений, тогда как в объектах JavaScript сравнивает их на основе их ссылки или адреса, хранящегося в памяти для переменной. Вот почему первый оператор console.log возвращает false, а второй оператор console.log возвращает true. a и c имеют одинаковый ссылочный адрес, а a и b — разные.

13. Как вычислить значения нескольких выражений в одной строке?

Вы можете использовать оператор запятой для вычисления значений нескольких выражений в одной строке. Он оценивает выражения слева направо и возвращает значение самого правого элемента или последнего операнда.

let x = 5;

x = (x++ , x = addFive(x), x *= 2, x -= 5, x += 10);

function addFive(num) {
  return num + 5;
}

Приведенный выше результат в конечном итоге получает значение x как 27. Сначала мы увеличиваем значение x до 6, затем вызываем функцию addFive(6) и передаем 6 в качестве параметра, присваивая результат обратно x, в результате чего x становится 11. После этого мы умножаем текущее значение x на 2 и присваиваем его x, обновляя значение x до 22. Затем мы вычитаем 5 из текущего значения x и присваиваем результат x, в результате чего x обновляется до 17. Наконец, мы увеличиваем x на 10 и присваиваем обновленное значение обратно x, в результате чего окончательное значение x равно 27.

14. Что такое масштаб?

Область действия в JavaScript относится к области, в которой доступны переменные или функции. JavaScript имеет три типа области действия: глобальную область, область действия функции и область действия блока (ES6).

  • Глобальная область действия. Переменные или функции, объявленные в глобальном пространстве имен, находятся в глобальной области видимости, что делает их доступными из любой части кода.
//global namespace
var g = "global";

function globalFunc(){
  function innerFunc(){
    console.log(g); // can access "g" because "g" is a global variable
  }
 innerFunc();
}  
  • Область действия функции. Переменные, функции и параметры, объявленные внутри функции, доступны внутри самой функции, но не за ее пределами.
function myFavoriteFunc(a) {
  if (true) {
    var b = "Hello " + a;
  }
  return b;
}

myFavoriteFunc("World");

console.log(a); // Throws a ReferenceError "a" is not defined
console.log(b); // does not continue here 
  • Область блока: переменные, объявленные в block {} (используя let или const), доступны только внутри этого блока.
 function testBlock(){
   if(true){
     let z = 5;
   }
   return z; 
 }

 testBlock(); // Throws a ReferenceError "z" is not defined

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

  // Global scope
  var variable1 = "Comrades";   
  var variable2 = "Sayonara";

  function outer(){
  //External scopes
    var variable1 = "World";
    function inner(){
    // Internal scopes
      var variable2 = "Hello";
      console.log(variable2 + " " + variable1);
    }
    inner();
  }  
  outer(); // Hello World

15. Что такое ложные значения в JavaScript?

 const falsyValues = ['', 0, null, undefined, NaN, false];

Проще говоря, ложное значение — это значение, которое становится ложным при преобразовании в логическое значение.

Чтобы проверить, является ли значение ложным, вы можете использовать функцию Boolean или оператор !!.

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

  • 👏 Хлопайте за историю и подписывайтесь на автора 👉
  • 📰 Смотрите больше контента в публикации Level Up Coding
  • 💰 Бесплатный курс собеседования по программированию ⇒ Просмотреть курс
  • 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу