​🧾 Комментарии JavaScript (финал)

Использование комментариев для предотвращения выполнения кода

Использование комментариев для предотвращения выполнения кода подходит для тестирования кода.

Добавление // перед строкой кода изменяет строки кода с исполняемой строки на комментарий.

В этом примере // используется для предотвращения выполнения одной из строк кода:

//document.getElementById("myH").innerHTML = "Моя первая страница";
document.getElementById("myP").innerHTML = "Мой первый параграф.";
В этом примере используется блок комментариев для предотвращения выполнения нескольких строк:

/*
document.getElementById("myH").innerHTML = "Моя первая страница";
document.getElementById("myP").innerHTML = "Мой первый параграф.";
*/

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​​🧾 Ключевое слово Let в JavaScript (часть 1)

Ключевое слово let позволяет определять переменные в области видимости блока.

Переменная, созданная при помощи ключевого слова let доступна внутри “блока”, где она была создана, а также и внутри вложенных блоков.

Переменные, определенные с помощью let, не могут быть повторно объявлены.

Вы не можете случайно повторно объявить переменную.

С let вы не можете этого сделать:

let x = "Андрей Щипунов";

let x = 0;

// Синтаксическая ошибка: "x" уже объявлен

С помощью var вы можете:

var x = "Андрей Щипунов";

var x = 0;

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Ключевое слово Let в JavaScript (часть 2)

Область действия блока

До ES6 (2015) JavaScript имел только глобальную область действия и область действия функций.

В ES6 введены два важных новых ключевых слова JavaScript: let и const.

Эти два ключевых слова обеспечивают область действия блока в JavaScript.

Переменные, объявленные внутри блока {}, не могут быть доступны извне блока:

{
let x = 2;
}
// x НЕЛЬЗЯ использовать

Переменные, объявленные с помощью ключевого слова var не могут иметь область действия блока.

Переменные, объявленные внутри блока { }, могут быть доступны извне блока:

{
var x = 2;
}
// x МОЖНО использовать здесь

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Ключевое слово Let в JavaScript (часть 3)

Повторное объявление переменных

Повторное объявление переменной с использованием ключевого слова var, может вызвать проблемы.

Повторное объявление переменной внутри блока, также приведет к повторному объявлению переменной вне блока: код.

Повторное объявление переменной с использованием ключевого слова let, может решить эту проблему.

Повторное объявление переменной внутри блока не приведет к повторному объявлению переменной вне блока: код.

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Ключевое слово Let в JavaScript (часть 4)

Повторное объявление

Повторное объявление переменной JavaScript с var, допускается в любом месте программы:

var x = 2;
// Здесь x равно 2

var x = 3;
// Здесь x равно 3

С let повторное объявление переменной в том же блоке не допускается: код.

Повторное объявление переменной с let, в другом блоке, допускается: код.

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Ключевое слово Let в JavaScript (часть 5)

Подъемный Let

Переменные, определенные с помощью var, являются подъемными сверху и могут быть инициализированы в любое время.

Вы можете использовать переменную до ее объявления:

carName = "Вольво";
var carName;

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

Использование let до ее объявления приведет к ReferenceError:

carName = "Сааб";
let carName = "Вольво";

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Ключевое слово Let в JavaScript (финал)

Поддержка браузера

Ключевое слово let не полностью поддерживается в Internet Explorer 11 и в более ранних версиях браузера.

Сейчас мы приведём первые версии браузера с полной поддержкой ключевого слова let:

Chrome 49 – Mar, 2016.

Edge 12 – Jul, 2015.

Firefox 44 – Jan, 2015.

Safari 11 – Sep, 2017.

Opera 36 – Mar, 2016.

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Подъемный JavaScript (часть 1)

В этой серии постов мы подробнее рассмотрим подъёмный Let и подъёмный JavaScript.

Подъем - это поведение JavaScript по умолчанию, при котором все объявления перемещаются в верхнюю часть текущей области (в верхнюю часть текущего скрипта или текущей функции).

Объявления поднимаются

В JavaScript переменная может быть объявлена после её использования. Другими словами, переменную можно использовать до ее объявления.

Пример 1 дает тот же результат, что и пример 2.

Пример 1:

x = 5; // Присваиваем 5 к x

elem = document.getElementById("demo"); // Находим элемент
elem.innerHTML = x; // Отображаем x в элементе

var x; // Объявить x

Пример 2:

var x; // Объявить x
x = 5; // Присваиваем 5 к x

elem = document.getElementById("demo"); // Находим элемент
elem.innerHTML = x; // Отображаем x в элементе

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Подъемный JavaScript (часть 2)

Ключевые слова let и const

Переменные, определенные с помощью let и const, поднимаются в верхнюю часть блока, но не инициализируются.

Блок кода знает об этой переменной, но ее нельзя использовать до тех пор, пока она не будет объявлена.

Использование переменной let до ее объявления, приведет к ReferenceError.

Переменная находится в "временной мертвой зоне" с начала блока до тех пор, пока она не будет объявлена.

Пример – это приведет к ReferenceError:

carName = "Вольво";
let carName;

Использование переменной const до того, как она будет объявлена, является синтаксической ошибкой, поэтому код просто не будет выполняться.

Пример – этот код не запускается:

carName = "Вольво";
const carName;

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Подъемный JavaScript (часть 3)

Инициализации JavaScript не поднимаются

JavaScript поднимает только объявления, а не инициализации.

В примере 1 получается тот же результат, что и в примере 2:

Пример 1:

var x = 5; // Инициализируем x
var y = 7; // Инициализируем y

elem = document.getElementById("demo"); // Находим элемент
elem.innerHTML = x + " " + y; // Отображение x и y

Пример 2:

var x = 5; // Инициализируем x

elem = document.getElementById("demo"); // Находим элемент
elem.innerHTML = x + " " + y; // Отображение x и y

var y = 7; // Инициализируем y

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Подъемный JavaScript (часть 4)

Имеет ли смысл, что у не определен в последнем примере?

Это потому, что наверх поднимается только объявление (var y), а не инициализация (=7).

Из-за подъема у был объявлен до его использования, но поскольку инициализации не поднимаются, значение у не определен.

Пример:

var x = 5; // Инициализируем x
var y; // Объявляем y

elem = document.getElementById("demo"); // Находим элемент
elem.innerHTML = x + " " + y; // Отображаем x и y

y = 7; // Присваиваем 7 к y

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Подъемный JavaScript (финал)

Объявляйте свои переменные наверху!

Подъем - это (для многих разработчиков) неизвестное или недооцененное поведение JavaScript.

Если разработчик не понимает подъема, программы могут содержать ошибки (errors).

Чтобы избежать ошибок, всегда объявляйте все переменные в начале каждой области видимости.

Так как JavaScript интерпретирует код именно так, это всегда хорошее правило.

JavaScript в строгом режиме не позволяет использовать переменные, если они не объявлены.

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Строгий режим в JavaScript (часть 1)

Директива "use strict"

Директива "use strict" была новой в ECMAScript версии 5.

Это не утверждение, а буквальное выражение, игнорируемое более ранними версиями JavaScript.

Назначение "use strict" - указать, что код должен выполняться в "строгом режиме".

В строгом режиме нельзя, например, использовать необъявленные переменные.

Вы можете использовать строгий режим во всех своих программах. Это помогает писать более чистый код, например, предотвращая использование необъявленных переменных.

"use strict" это просто строка, поэтому IE 9 не выдаст ошибку, даже если он ее не понимает.

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Строгий режим в JavaScript (часть 2)

Объявление строгого режима

Строгий режим объявляется добавлением "use strict"; в начало скрипта или функции.

Объявленный режим в начале скрипта имеет глобальную область видимости (весь код в скрипте будет выполняться в строгом режиме):

Пример:

"use strict";
x = 3.14; // Это вызовет ошибку, потому что x не объявлен

Пример:

"use strict";
myFunction();

function myFunction() {
y = 3.14; // Это также вызовет ошибку, потому что y не объявлен
}

Объявленный режим внутри функции имеет локальную область видимости (только код внутри функции находится в строгом режиме):

x = 3.14; // Это не вызовет ошибки.
myFunction();

function myFunction() {
"use strict";
y = 3.14; // Это вызовет ошибку
}

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Строгий режим в JavaScript (часть 3)

Синтаксис "use strict";

Синтаксис для объявления строгого режима был разработан для совместимости со старыми версиями JavaScript.

Компиляция числового литерала (4 + 5;) или строкового литерала ("Щипунов Андрей";) в программе JavaScript не имеет побочных эффектов. Он просто компилируется в несуществующую переменную и умирает.

Таким образом, "use strict"; имеет значение только для новых компиляторов, которые "понимают" его значение.

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Строгий режим в JavaScript (часть 4)

Почему строгий режим?

Строгий режим упрощает написание "безопасного" JavaScript.

Строгий режим изменяет ранее принятый "плохой синтаксис" на реальные ошибки.

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

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

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

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Строгий режим в JavaScript (часть 5)

Не разрешено в строгом режиме

Использование переменной без ее объявления не допускается:

"use strict";
x = 3.14; // Это вызовет ошибку

Объекты тоже переменные.

Использование объекта без его объявления не допускается:

"use strict";
x = {p1:10, p2:20}; // Это вызовет ошибку

Удаление переменной (или объекта) не допускается.

"use strict";
var x = 3.14;
delete x; // Это вызовет ошибку

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Строгий режим в JavaScript (часть 6)

Удаление функции не допускается.

"use strict";
function x(p1, p2) {};
delete x; // Это вызовет ошибку

Дублирование имени параметра не допускается:

"use strict";
function x(p1, p1) {}; // Это вызовет ошибку

Восьмеричные числовые литералы не допускаются:

"use strict";
var x = 010; // Это вызовет ошибку

Восьмеричные escape-символы не допускаются:

"use strict";
var x = "\010"; // Это вызовет ошибку

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Строгий режим в JavaScript (часть 7)

Запись в свойство read-only не допускается:

"use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});

obj.x = 3.14; // Это вызовет ошибку

Запись в свойство get-only не допускается:

"use strict";
var obj = {get x() {return 0} };

obj.x = 3.14; // Это вызовет ошибку

Удаление свойства, которое невозможно удалить, не допускается:

"use strict";
delete Object.prototype; // Это вызовет ошибку

Слово eval нельзя использовать в качестве переменной:

"use strict";
var eval = 3.14; // Это вызовет ошибку

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Строгий режим в JavaScript (часть 8)

Слово arguments нельзя использовать в качестве переменной:

"use strict";
var arguments = 3.14; // Это вызовет ошибку

Заявление with не допускается:

"use strict";
with (Math){x = cos(2)}; // Это вызовет ошибку

По соображениям безопасности eval() запрещенно создавать переменные в области, из которой он был вызван:

"use strict";
eval ("var x = 2");
alert (x);// Это вызовет ошибку

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev