🤖 m0rph's wiki

Search

SearchSearch

Everything JS

Nov 26, 20244 min read

Random notes

👉 полезная библиотека Ink для использования в CLI

JS Interview questions

Вопросы

  1. Какие существуют способы создания объектов в JavaScript
  2. Что такое цепочка прототипов (prototype chain)
  3. В чем разница между Call, Apply и Bind
  4. Что такое JSON и каковы его главные операции (методы)
  5. Зачем нужен метод slice у массива

1. Какие существуют способы создания объектов в JavaScript

Notes from learn.javascript.ru

Тег <script> и HTML-разметка

В любом месте HTML документа внутри тега <body> может быть вставлен JS-код с помощью тега <script>, который будет выполнен в браузере.

<!DOCTYPE HTML>
<html>
<body>
    <p>Перед скриптом...</p>
 
    <script>
        alert('Привет, мир!');
    </script>
 
    <p>...После скрипта.</p>
</body>
</html>

Aтрибут type и language

<script type="text/javascript">...</script> <!-- предыдущие стандарты HTML (<5) требовали атрибут type="..." -->
<script language="php"></script>            <!-- пример PHP кода -->

Атрибут src

  • JavaScript-код, можно вынести его в отдельный файл. Файл скрипта можно подключить к HTML с помощью атрибута src:
<script src="/path/to/script.js"></script> <!-- пример включения JS кода вынесенного в отдельный файл -->
<script src="script.js"></script>
<script src="./script.js"></script> <!-- файл "script.js" лежит в текущей папке -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script> <!-- файл "lodash.js" будет загружен по URL -->
  • содержимое <script> будет игнорироваться, если уже есть атрибут src:
<script src="file.js">
    alert(1); // not gonna work
</script>

TLDR

  • Для добавления кода JavaScript на страницу используется тег <script>
  • Атрибуты type и language необязательны.
  • Скрипт во внешнем файле можно вставить с помощью <script src="path/to/script.js"></script>

Web caching files

Как правило, только простейшие скрипты помещаются в HTML. Более сложные выделяются в отдельные файлы.

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

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

Неявная точка с запятой

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

in:

console.log('Привет'); console.log('Мир')

out:

Привет
Мир

in:

let words = ["Hello", "Мир"]
console.log(words.map(str => str + " 😊 ").join(""))
console.log(words[0])
console.log(words[1]) // JavaScript добавляет неявную запятую когда есть перенос строки

out:

Hello 😊 Мир 😊 
Hello
Мир

  • В этом случае JavaScript интерпретирует перенос строки как «неявную» точку с запятой. Это называется автоматическая вставка точки с запятой.

  • При этом, конечно, как часто это бывает в JS, это может выстрелить тебе в ногу в самый неподходящий момент 😅:

alert('Hello'); // 👈 есть `;`
 
[1, 2].forEach(alert);
  • например результат кода выше будет отличатся если убрать ; 👉
alert('Hello')
 
[1, 2].forEach(alert);

👉 а всё потому что перед [] JavaScript автоматически не поставит ;, и таких нюансов много.

Комментарии

/* Пример с двумя сообщениями.
Это - многострочный комментарий.
*/
console.log('Привет');
console.log('Мир');
// Этот комментарий занимает всю строку
console.log('Привет');
console.log('Мир'); // Этот комментарий следует за инструкцией

Strict режим

Up-to-date current ECMAScript spec 🔗

  • В 2009 году, когда появился стандарт ECMAScript 5 (ES5) (обновлённая версия 5.1, 2011 года 🔗), в JS добавили новые возможности и изменили некоторые из существующих. Чтобы устаревший код работал, как и раньше, по умолчанию подобные изменения не применяются. Поэтому нам нужно явно их активировать с помощью специальной директивы: "use strict".

  • use strict можно использовать внутри почти любой функций, это позволяет включить строгий режим только в конкретной функции.

  • нет директивы типа "no use strict", которая возвращала бы движок к старому поведению. Как только мы входим в строгий режим, отменить это невозможно. т.е. если в одном из JS файлов use strict используется, то в файлах включенных браузером после - он тоже будет включён.

  • современный JS поддерживает классы и модули — использую которые автоматически включается строгий режим. Поэтому в них нет нужды добавлять директиву "use strict".

Browser console и use strict

  • как включить use strict в современных браузерах:
'use strict'; /* <Shift+Enter для перехода на новую строку> */
//  ...ваш код...
// <Enter для запуска>
  • трюк 🎃 чтобы включить в старых браузерах 🧓:
(function() {
  'use strict';
  // ...ваш код...
})()

Переменные

Ключевое слово let

let message;
 
message = 'Hello'; // 'Hello' сохранится в переменной с именем message
  • Строка сохраняется в области памяти, связанной с переменной. Мы можем получить к ней доступ, используя имя переменной

Обычно определяют переменную и сразу присваивают ей значение:

let message = 'Hello!';
  • можно объявить несколько переменных сразу в одной строке (но это плохой стиль 🙄):
let user = 'John', age = 25, message = 'Hello';
let user = 'John';
let age = 25;
let message = 'Hello';
// ешё можно так:
let user = 'John',
  age = 25,
  message = 'Hello';
 
// и даже вот так:
let user = 'John'
  , age = 25
  , message = 'Hello';
 
// но лучше так не делайте :D 👉 https://learn.javascript.ru/coding-style

Устаревшее ключевое слово var

Graph View

Backlinks

  • No backlinks found