Каким символом в javascript отделяются инструкции следующие одна за другой

Итак, VS Code настроен, первое знакомство с JavaScript прошло успешно и даже познакомились немного с консолью в веб-браузере. Теперь приступим к следующему шагу — рассмотрим чуть подробнее структуру кода программы на JavaScript.

Инструкции

Инструкция в JavaScript — это языковые конструкции (команды), выполняющие какие-либо действия. Например,

alert("Hello, world");

это инструкция JavaScript, выводящая сообщение в окне браузера. Инструкции разделяются точкой с запятой (;). Например:

alert("Hello, world");
alert("Привет, мир!");

здесь две инструкции отделены точкой с запятой. Также инструкции могут располагаться на одной или нескольких строках. Пример многострочной инструкции:

document.write(2 + 
               3 -
               1);

Здесь инструкция располагается сразу на трех строках. В результате, на страницу будет выведен результат — 4. Возможно, что в погоне за скоростью написания кода на JavaScript или просто для удобства, в JavaScript ингода можно не ставить точку с запятой между инструкциями, например, следующий код будет работать как и задумано — выведет два сообщения:

alert("Hello, world")
alert("Привет, мир!")

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

alert("Hello, world"); alert("Привет, мир!");

Однако, не стоит увлекаться такой возможностью. В большинстве случаев, ваш код будет состоять не только из каких-то элементарных инструкций типа alert("hello") или document.write("hello"), но и содержать всевозможные циклы, объекты, массивы, которые мы, безусловно, будем изучать. И, если вы будете пренебрегать простым правилом: написал инструкцию — поставь точку с запятой, то с большой долей вероятности вы столкнетесь с ошибками, которые вам будет очень сложно увидеть в коде.

Комментарии

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

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

Также, с помощью комментариев можно временно «отключить» часть кода, чтобы он не выполнялся.

В JavaScript используются однострочные и многострочные комментарии. Однострочный комментарий начинается с //. Пример однострочного комментария:

//выводим сообщение пользователю
alert('Hello');
let a = 1; //объявляем переменную и присваиваем ей значение 1

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

Иногда бывает необходимо написать комментарий на несколько строк. Например, сделать подробное описание какого-то участка кода. В этом случае можно воспользоваться многострочным комментарием, который начинается с /* и заканчивается на */. Например,

/* Это многострочный комментарий
который располагается
на трех строках */
alert('Hello');

Весь текст, расположенный между /* и  */ будет интерпретирован как многострочный комментарий.

Блок инструкций

Блок инструкций — это ещё один «кирпичик» структуры кода. Более подробно мы об этой конструкции ещё поговорим, а пока запомним, что блок инструкций используется для группировки нескольких инструкций и отделяется парой фигурных скобок, например:

alert("JavaScript");
//ниже определяется блок инструкций
{
    document.write("Текст из блока");
    alert("hello")
}

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

Итого

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

Порой обучение продвигается с трудом. Сложная теория, непонятные задания… Хочется бросить. Не сдавайтесь, все сложности можно преодолеть. Рассказываем, как

Не понятна формулировка, нашли опечатку?

Выделите текст, нажмите ctrl + enter и опишите проблему, затем отправьте нам. В течение нескольких дней мы улучшим формулировку или исправим опечатку

Что-то не получается в уроке?

Загляните в раздел «Обсуждение»:

1. Изучите вопросы, которые задавали по уроку другие студенты — возможно, ответ на ваш уже есть
2. Если вопросы остались, задайте свой. Расскажите, что непонятно или сложно, дайте ссылку на ваше решение. Обратите внимание — команда поддержки не отвечает на вопросы по коду, но поможет разобраться с заданием или выводом тестов
3. Мы отвечаем на сообщения в течение 2-3 дней. К «Обсуждениям» могут подключаться и другие студенты. Возможно, получится решить вопрос быстрее!

Подробнее о том, как задавать вопросы по уроку

В этой статье мы изучим что такое инструкции и чем они отличаются от выражений. Кроме этого разберём как создавать однострочные и многострочные комментарии в JavaScript.

Программы на JavaScript состоят из инструкций. Одна инструкция может располагаться из нескольких строчках.

// инструкция if
if (true) {
  console.log('Привет, мир!');
}

Кроме этого на одной строчке может находиться несколько инструкций, если они разделены друг от друга точкой с запятой:

let a = 5; let b = 6; let c = a + b;

В HTML, JavaScript программы выполняются веб-браузером.

JavaScript инструкции состоят из: значений, выражений, ключевых слов и комментариев.

Например, эта инструкция говорит браузеру установить в качестве содержимого страницы <h1>Привет, мир!</h1>:

document.body.innerHTML = '<h1>Привет, мир!</h1>';

Так что же такое инструкция и чем она отличается от выражения?

Инструкции

В JavaScript есть выражения (на английском expressions). Выражение как уже мы отмечали раньше – это всегда то, что возвращает значение.

Например, выражением является операция присвоения переменной значения:

num = 77

Инструкция (на английском statement) в отличие от выражения – это всегда то, что выполняет определённые действия.

Примеры инструкций:

// создание переменных
let x;
const obj = { y: 5 };
// условная инструкция if
if (x === obj.y) {
  console.log('x равно obj.y');
}
// цикл
for (let i = 0; i < 3; i++) {
  console.log('значение i: ' + i);
}

Здесь 4 инструкции, каждая из которых выполняет определённые действия:

• let x; – это инструкция, которая выполняет определённые действия; в данном случае создаёт переменную с помощью ключевого слова let;
• const obj = { y: 5 }; – это инструкция, в которой мы создаём переменную obj с помощью ключевого слова const и присваиваем ей объект, содержащий одно свойство;
• if – это инструкция, которая выполняет действия в фигурных скобках, если условие, указанное в круглых скобках истинно;
• for – это инструкция, которая выполняет код в фигурных скобках много раз, в данном случае 3 раза.

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

Кроме этого, инструкции также желательно размещать на разных строках.

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

Но точку с запятой можно опускать в JavaScript, если указывать инструкции на разных строчках. То есть код, приведенный выше можно переписать так:

let x
const obj = { y: 5 }
if (x === obj.y) {
  console.log('x равно obj.y')
}
for (let i = 0; i < 3; i++) {
  console.log('значение i: ' + i)
}

Обратите внимание, что внутри блоках кода if и for тоже указаны инструкции. Но эти инструкции являются выражениями, так как они возвращают значения. То есть выражение в JavaScript может быть инструкцией, но инструкция выражением нет.

Например, строка – это выражение. Но посредством добавления к ней точки с запятой, мы её конвертируем в инструкцию:

'моя строка';
'use strict';

Первая инструкция не имеет какого-то определённого смысла, интерпретатор её просто выполняет. Следующая инструкция 'use strict' включает строгий режим в JavaScript.

Пример выражения, конвертированного в инструкцию:

let a = 7;
let b = 11;
let c;
c = a + b;

В этом примере на 4 строчке выражение c = a + b будет являться инструкцией, так как мы к нему добавили точку с запятой. Но если бы мы даже этого не сделали, то это выражение не перестало быть инструкцией. Так как это выражение располагается на отдельной строчке. А как мы знаем, в этом случае точку с запятой можно опускать. Но при этом это выражение не перестало возвращать значение, так как выражение всегда возвращает значение. Но также оно является инструкцией, и это означает, что это выражение выполнится отдельно от других.

Ключевые слова и идентификаторы

Ключевые слова – это зарезервированные слова, которые являются частью синтаксиса языка программирования. Например:

const a = 'hello';

В этом примере используется ключевое слово const. С помощью него мы можем создавать переменные в JavaScript.

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

В JavaScript очень много ключевых слов. Вот некоторые из них: await, break, catch, class, const, continue, else, export, extends, for, function, if, let, return, static, this, throw, try, while.

Идентификатор – это имя, которые мы можем дать переменной, функции, классу и так далее. Составлять имя мы можем из букв, цифр, нижнего подчеркивания и знака доллара.

При этом идентификатор не может начинаться с цифры, а также в качестве него нельзя использовать ключевые слова. Кроме этого, JavaScript чувствителен к регистру.

const a = 5;
const A = 7;
console.log(a); // 5
console.log(A); // 7

Комментарии JavaScript – это подсказки, которые программист может добавить, чтобы облегчить чтение и понимание своего кода. Они полностью игнорируются движками JavaScript.

Есть два способа добавить комментарии к коду:

• // – однострочные комментарии;
• /* */ – многострочные комментарии;

В JavaScript любая строка, начинающаяся с //, является однострочным комментарием. Например:

name = 'Bob';

// выведем сообщение в консоль
console.log(`Привет, ${name}`);

Здесь // выведем сообщение в консоль является комментарием.

Однострочный комментарий можно использовать ещё так:

name = 'Bob';

console.log(`Привет, ${name}`); // выведем сообщение в консоль

В Javascript любой текст между /* и */ является многострочным комментарием. Например:

/* Этот комментарий
  расположен на нескольких строчках */

Комментарии также очень часть используют для отключения кода при отладке. Например, если нам не нужно выполнять какую-то инструкцию, то мы можем её просто закомментировать:

myFn1();
// myFn2();
myFn3();

Это может очень ценным при отладке, потому что вместо удаления некоторого кода мы можем его просто закомментировать.

Рекомендации по именованию переменных, функций и классов

Основные рекомендации:

• имя, состоящее из одного слова, следует писать строчными буквами; например: article;
• имя, состоящее из нескольких слов, следует писать слитно строчными буквами, кроме букв на стыке слов, их необходимо писать прописными; например: articleTitle;
• при составлении имени, количество слов в нём не должно быть больше 3; например: articleDatePublishedon;
• переменные не хранящие функции и свойства объектов, не являющиеся методами должны быть существительными;например: textComment;
• массивы и коллекции значений следует задавать существительными во множественном числе; например: lastComments);
• именовать функции и методы объектов необходимо глаголами; например: getLastArticles);
• именование классов необходимо начинать с прописной буквы; например: Comments.

Время на прочтение
15 мин

Количество просмотров 139K

Содержание

• Введение
• Величины, типы и операторы
• Структура программ
• Функции
• Структуры данных: объекты и массивы
• Функции высшего порядка
• Тайная жизнь объектов
• Проект: электронная жизнь
• Поиск и обработка ошибок
• Регулярные выражения
• Модули
• Проект: язык программирования
• JavaScript и браузер
• Document Object Model
• Обработка событий
• Проект: игра-платформер
• Рисование на холсте
• HTTP
• Формы и поля форм
• Проект: Paint
• Node.js
• Проект: веб-сайт по обмену опытом
• Песочница для кода

Сердце моё сияет ярко-красным светом под моей тонкой, прозрачной кожей, и им приходится вколоть мне десять кубиков JavaScript, чтобы вернуть меня к жизни (я хорошо реагирую на токсины в крови). От этой фигни у вас враз жабры побледнеют!

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

Выражения и инструкции

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

Фрагмент кода, результатом работы которого является некая величина, называется выражением. Каждая величина, записанная буквально (например, 22 или “психоанализ”) тоже является выражением. Выражение, записанное в скобках, также является выражением, как и бинарный оператор, применяемый к двум выражениям или унарный – к одному.

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

Если выражение – это фрагмент предложения, то инструкция – это предложение полностью. Программа – это просто список инструкций.

Простейшая инструкция – это выражение с точкой с запятой после него. Это — программа:

1;
!false;

Правда, это бесполезная программа. Выражение можно использовать только для получения величины, которая может быть использована в другом выражении, охватывающем это. Инструкция стоит сама по себе и её применение изменяет что-то в мире программы. Она может выводить что-то на экран (изменение в мире), или менять внутреннее состояние машины таким образом, что это повлияет на следующие за ним инструкции. Эти изменения называются побочными эффектами. Инструкции в предыдущем примере просто выдают величины 1 и true, и сразу их выбрасывают. Они не оказывают никакого влияния на мир программы. При выполнении программы ничего заметного не происходит.

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

Переменные

Как же программа хранит внутреннее состояние? Как она его запоминает? Мы получали новые величины из старых, но старые величины это не меняло, а новые нужно было использовать сразу, или же они исчезали. Чтобы захватить и хранить их, JavaScript предлагает нечто под названием «переменная».

var caught = 5 * 5;

И это даёт нам второй вид инструкций. Специальное ключевое слово (keyword) var показывает, что в этой инструкции мы объявляем переменную. За ним идёт имя переменной, и, если мы сразу хотим назначить ей значение – оператор = и выражение.

Пример создаёт переменную под именем caught и использует её для захвата числа, которое получается в результате перемножения 5 и 5.

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

var ten = 10;
console.log(ten * ten);
// → 100

Переменные можно называть любым словом, которое не является ключевым (типа var). Нельзя использовать пробелы. Цифры тоже можно использовать, но не первым символом в названии. Нельзя использовать знаки пунктуации, кроме символов $ и _.

Переменной присваивают значение не навсегда. Оператор = можно использовать на существующих переменных в любое время, чтобы присвоить им новое значение.

var mood = "лёгкое";
console.log(mood);
// → лёгкое
mood = "тяжёлое";
console.log(mood);
// → тяжёлое

Представляйте себе переменные не в виде коробочек, а в виде щупалец. Они не содержат значения – они хватают их. Две переменные могут ссылаться на одно значение. Программа имеет доступ только к значениям, которые они содержат. Когда вам нужно что-то запомнить, вы отращиваете щупальце и держитесь за это, или вы используете существующее щупальце, чтобы удержать это.

Переменные как щупальца

Пример. Для запоминания количества денег, которые вам должен Василий, вы создаёте переменную. Затем, когда он выплачивает часть долга, вы даёте ей новое значение.

var vasyaDebt = 140;
vasyaDebt = vasyaDebt  - 35;
console.log(vasyaDebt);
// → 105

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

Одна инструкция var может содержать несколько переменных. Определения нужно разделять запятыми.

var one = 1, two = 2;
console.log(one + two);
// → 3

Ключевые и зарезервированные слова

Слова со специальным смыслом, типа var – ключевые. Их нельзя использовать как имена переменных. Также есть несколько слов, «зарезервированных для использования» в будуших версиях JavaScript. Их тоже нельзя использовать, хотя в некоторых средах исполнения это возможно. Полный их список достаточно большой.

break case catch continue debugger default delete do else false finally for function if implements in instanceof interface let new null package private protected public return static switch throw true try typeof var void while with yield this

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

Окружение

Коллекция переменных и их значений, которая существует в определённый момент, называется окружением. Когда программа запускается, окружение не пустое. Там всегда есть переменные, являющиеся частью программного стандарта, и большую часть времени там есть переменные, помогающие взаимодействовать с окружающей системой. К примеру, в браузере есть переменные и функции для изучения состояния загруженной веб-страницы и влияния на неё, для чтения ввода с мыши и клавиатуры.

Функции

Многие величины из стандартного окружения имеют тип function (функция). Функция – отдельный кусочек программы, который можно использовать вместе с другими величинами. К примеру, в браузере переменная alert содержит функцию, которая показывает небольшое окно с сообщением. Используют его так:

alert("С добрым утром!");

Диалог alert

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

Функция console.log

Функция alert может использоваться как средство вывода при экспериментах, но закрывать каждый раз это окно вам скоро надоест. В прошлых примерах мы использовали функцию console.log для вывода значений. Большинство систем JavaScript (включая все современные браузеры и Node.js) предоставляют функцию console.log, которая выводит величины на какое-либо устройство вывода. В браузерах это консоль JavaScript. Эта часть браузера обычно скрыта – большинство браузеров показывают её по нажатию F12, или Command-Option-I на Маке. Если это не сработало, поищите в меню “web console” или “developer tools”.

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

var x = 30;
console.log("the value of x is", x);
// → the value of x is 30

Хотя в именах переменных нельзя использовать точку – она, очевидно, содержится в названии console.log. Это оттого, что console.log – не простая переменная. Это выражение, возвращающее свойство log переменной console. Мы поговорим об этом в главе 4.

Возвращаемые значения

Показ диалогового окна или вывод текста на экран – это побочный эффект. Множество функций полезны оттого, что они производят эти эффекты. Функции также могут производить значения, и в этом случае им не нужен побочный эффект для того, чтобы быть полезной. К примеру, функция Math.max принимает любое количество переменных и возвращает значение самой большой:

console.log(Math.max(2, 4));
// → 4

Когда функция производит значение, говорят, что она возвращает значение. Всё, что производит значение – это выражение, то есть вызовы функций можно использовать внутри сложных выражений. К примеру, возвращаемое функцией Math.min (противоположность Math.max) значение используется как один из аргументов оператора сложения:

console.log(Math.min(2, 4) + 100);
// → 102

В следующей главе описано, как писать собственные функции.

prompt и confirm

Окружение браузера содержит другие функции, кроме alert, которые показывают всплывающие окна. Можно вызвать окно с вопросом и кнопками OK/Cancel при помощи функции confirm. Она возвращает булевское значение – true, если нажато OK, и false, если нажато Cancel.

confirm("Ну что, поехали?");

Функцию prompt можно использовать, чтобы задать открытый вопрос. Первый аргумент – вопрос, второй – текст, с которого пользователь начинает. В диалоговое окно можно вписать строку текста, и функция вернёт его в виде строки.

prompt("Расскажи мне всё, что знаешь.", "...");

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

Управление порядком выполнения программы

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

var theNumber = Number(prompt("Выбери число", ""));
alert("Твоё число – квадратный корень из " +  theNumber * theNumber);

Функция Number преобразовывает величину в число. Нам это нужно, потому что prompt возвращает строку. Есть сходные функции String и Boolean, преобразующие величины в соответствующие типы.

Простая схема прямого порядка исполнения программы:

Условное выполнение

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

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

var theNumber = prompt("Выбери число", "");
if (!isNaN(theNumber))
  alert("Твоё число – квадратный корень из " +  theNumber * theNumber);

Теперь, введя «сыр», вы не получите вывод.

Ключевое слово if выполняет или пропускает инструкцию, в зависимости от значения булевого выражения. Это выражение записывается после if в скобках, и за ним идёт нужная инструкция.

Функция isNaN – стандартная функция JavaScript, которая возвращает true, только если её аргумент – NaN (не число). Функция Number возвращает NaN, если задать ей строку, которая не представляет собой допустимое число. В результате, условие звучит так: «выполнить, если только theNumber не является не-числом».

Часто нужно написать код не только для случая, когда выражение истинно, но и для случая, когда оно ложно. Путь с вариантами – это вторая стрелочка диаграммы. Ключевое слово else используется вместе с if для создания двух раздельных путей выполнения.

var theNumber = Number(prompt("Выбери число", ""));
if (!isNaN(theNumber))
  alert("Твоё число – квадратный корень из " + theNumber * theNumber);
else
  alert("Ну ты что число-то не ввёл?");

Если вам нужно больше разных путей, можно использовать несколько пар if/else по цепочке.

var num = Number(prompt("Выбери число", "0"));

if (num < 10)
  alert("Маловато");
else if (num < 100)
  alert("Нормально");
else
  alert("Многовато");

Программа проверяет, действительно ли num меньше 10. Если да – выбирает эту ветку, и показывает «Маловато». Если нет, выбирает другую – на которой ещё один if. Если следующее условие выполняется, значит номер будет между 10 и 100, и выводится «Нормально». Если нет – значит, выполняется последняя ветка.

Последовательность выполнения примерно такая:

Циклы while и do

Представьте программу, выводящую все чётные числа от 0 до 12. Можно записать её так:

console.log(0);
console.log(2);
console.log(4);
console.log(6);
console.log(8);
console.log(10);
console.log(12);

Это работает – но смысл программирования в том, чтобы работать меньше, чем компьютер, а не наоборот. Если б нам понадобились все числа до 1000, это решение было бы неприемлемым. Нам нужна возможность повторения. Этот вид контроля над порядком выполнения называется циклом.

Зацикливание даёт возможность вернуться назад к какой-то инструкции и повторить всё заново с новым состоянием программы. Если скомбинировать это с переменной для подсчёта, можно сделать следующее:

var number = 0;
while (number <= 12) {
  console.log(number);
  number = number + 2;
}
// → 0
// → 2
//   … и т.д.

Инструкция, начинающаяся с ключевого слова while – это цикл. За while следует выражение в скобках, и затем инструкция (тело цикла) – так же, как у if. Цикл выполняет инструкцию, пока выражение выдаёт истинный результат.

В цикле нам нужно выводить значение и прибавлять к нему. Если нам нужно выполнять в цикле несколько инструкций, мы заключаем его в фигурные скобки { }. Фигурные скобки для инструкций – как круглые скобки для выражений. Они группируют их и превращают в единое. Последовательность инструкций, заключённая в фигурные скобки, называется блоком.

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

Переменная number показывает, как переменная может отслеживать прогресс программы. При каждом повторении цикла number увеличивается на 2. Перед каждым повторением оно сравнивается с 12, чтобы понять, сделала ли программа всё, что требовалось.

Для примера более полезной работы мы можем написать программу вычисления 2 в 10 степени. Мы используем две переменные: одну для слежения за результатом, а вторую – для подсчёта количества умножений. Цикл проверяет, достигла ли вторая переменная 10, и затем обновляет обе.

var result = 1;
var counter = 0;
while (counter < 10) {
  result = result * 2;
  counter = counter + 1;
}
console.log(result);
// → 1024

Можно начинать counter с 1 и проверять его на <=10, но по причинам, которые станут ясны далее, всегда лучше начинать счётчики с 0.

Цикл do похож на цикл while. Отличается только в одном: цикл do всегда выполняет тело хотя бы один раз, а проверяет условие после первого выполнения. Поэтому и тестируемое выражение записывают после тела цикла:

do {
  var name = prompt("Who are you?");
} while (!name);
console.log(name);

Эта программа заставляет ввести имя. Она спрашивает его снова и снова, пока не получит что-то кроме пустой строки. Добавление «!» превращает значение в булевское и затем применяет логическое отрицание, а все строки, кроме пустой, преобразуются в булевское true.

Отступы в коде

Вы, наверно, заметили пробелы перед некоторыми инструкциями. В JavaScript это не обязательно – программа отработает и без них. Даже переводы строк не обязательно делать. Можно написать программу в одну строку. Роль пробелов в блоках – отделять их от остальной программы. В сложном коде, где в блоках встречаются другие блоки, может быть сложно разглядеть, где кончается один и начинается другой. Правильно отделяя их пробелами вы приводите в соответствие внешний вид кода и его блоки. Я люблю отделять каждый блок двумя пробелами, но вкусы различаются – некоторые используют четыре, некоторые – табуляцию. Чем больше пробелов использовать, тем заметнее отступ, но тем быстрее вложенные блоки убегают за правый край экрана.

Циклы for

Много циклов строятся по такому шаблону, как в примере. Создаётся переменная-счётчик, потом идёт цикл while, где проверочное выражение обычно проверяет, не достигли ли мы какой-нибудь границы. В конце тела цикла счётчик обновляется.

Поскольку это такой частый случай, в JavaScript есть вариант покороче, цикл for.

for (var number = 0; number <= 12; number = number + 2)
  console.log(number);
// → 0
// → 2
//   … и т.д.

Эта программа эквивалентна предыдущей. Только теперь все инструкции, относящиеся к отслеживанию состояния цикла, сгруппированы.

Скобки после for содержат две точки с запятой, разделяя инструкцию на три части. Первая инициализирует цикл, обычно задавая начальное значение переменной. Вторая – выражение проверки необходимости продолжения цикла. Третья – обновляет состояние после каждого прохода. В большинстве случаев такая запись более короткая и понятная, чем while.

Вычисляем 2^10 при помощи for:

var result = 1;
for (var counter = 0; counter < 10; counter = counter + 1)
  result = result * 2;
console.log(result);
// → 1024

Хотя я не писал фигурных скобок, я отделяю тело цикла пробелами.

Выход из цикла

Дождаться, пока условие цикла не станет ложным – не единственный способ закончить цикл. Специальная инструкция break приводит к немедленному выходу из цикла.

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

for (var current = 20; ; current++) {
  if (current % 7 == 0)
    break;
}
console.log(current);
// → 21

Простой способ выяснить, делится ли одно число на другое — использовать оператор остатка от деления (%). Если число делится без остатка, тогда остаток будет равен нулю.

Конструкция for не имеет проверочной части – поэтому цикл не остановится, пока не сработает инструкция break.

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

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

Ключевое слово continue также влияет на исполнение цикла. Когда это слово встречается в цикле, он немедленно переходит на следующую итерацию.

Короткое обновление переменных

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

counter = counter + 1;

В JavaScript есть для этого короткая запись:

counter += 1;

Подобные записи работают для многих других операторов, к примеру result *= 2 для удвоения, или counter -= 1 для обратного отсчёта.

Это позволяет нам сократить программу вывода чётных чисел:

for (var number = 0; number <= 12; number += 2)
  console.log(number);

Для counter += 1 и counter -= 1 есть ещё более короткие записи: counter++ and counter—.

Работаем с переменными при помощи switch

Часто код выглядит так:

if (variable == "value1") action1();
else if (variable == "value2") action2();
else if (variable == "value3") action3();
else defaultAction();

Существует конструкция под названием switch, которая упрощает подобную запись. К сожалению, синтаксис JavaScript в этом случае довольно странный – часто цепочка if/else выглядит лучше. Пример:

switch (prompt("Как погодка?")) {
  case "дождь":
    console.log("Не забудь зонт.");
    break;
  case "снег":
    console.log("Блин, мы в России!");
    break;
  case "солнечно":
    console.log("Оденься полегче.");
  case "облачно":
    console.log("Иди гуляй.");
    break;
  default:
    console.log("Непонятная погода!");
    break;
}

В блок switch можно поместить любое количество меток case. Программа перепрыгивает на метку, соответствующую значению переменной в switch, или на метку default, если подходящих меток не найдено. После этого инструкции исполняются до первой инструкции break – даже если мы уже прошли другую метку. Иногда это можно использовать для исполнения одного и того же кода в разных случаях (в обоих случаях «солнечно» и «облачно» программа порекомендует пойти погулять). Однако, очень легко забыть запись break, что приведёт к выполнению нежелательного участка кода.

Регистр имён

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

fuzzylittleturtle
fuzzy_little_turtle
FuzzyLittleTurtle
fuzzyLittleTurtle

Первый довольно сложно читать. Мне нравятся подчёркивания, хотя их не очень удобно печатать. Стандартные функции JavaScript и большинство программистов используют последний вариант – каждое слово с большой буквы, кроме первого.

В некоторых случаях, например в случае функции Number, первую букву тоже пишут большой – когда нужно выделить функцию как конструктор. О конструкторах мы поговорим в главе 6. Сейчас просто не обращайте на это внимания.

Комментарии

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

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

var accountBalance = calculateBalance(account);
// Издалека долго
accountBalance.adjust();
// Течёт река Волга
var report = new Report();
// Течёт река Волга
addToReport(accountBalance, report);
// Конца и края нет

Комментарий продолжается только до конца строки. Код между символами /* и */ будет игнорироваться вместе с возможными переводами строки. Это подходит для включения целых информационных блоков в программу:

/*
Этот город – самый лучший
Город на Земле.
Он как будто нарисован
Мелом на стене.
*/
var myCity = ‘Челябинск’;

Итог

Теперь вы знаете, что программа состоит из инструкций, которые сами могут содержать инструкции. В инструкциях содержатся выражения, которые могут состоять из выражений.

Записывая инструкции подряд, мы получаем программу, которая выполняется сверху вниз. Вы можете изменять этот поток выполнения, используя условные (if, else, и switch) операторы и операторы цикла (while, do, и for).

Переменные можно использовать для хранения кусочков данных под определённым названием и для отслеживания состояния программы. Окружение – набор определённых переменных. Системы, исполняющие JavaScript, всегда добавляют несколько стандартных переменных в ваше окружение.

Функции – особые переменные, включающие части программы. Их можно вызвать командой functionName(argument1, argument2). Такой вызов – это выражение, и может выдавать значение.

Упражнения

Если вы не уверены, как выполнять упражнения, обратитесь к «введению».

Каждое упражнение начинается с описания задачи. Прочтите и постарайтесь выполнить. В сложных ситуациях обращайтесь к подсказкам. Готовые решения задач можно найти на сайте книги eloquentjavascript.net/code. Чтобы обучение было эффективным, не заглядывайте в ответы, пока не решите задачу сами, или хотя бы не попытаетесь её решить достаточно долго для того, чтобы у вас слегка заболела голова. Там же можно писать код прямо в браузере и выполнять его.

Треугольник в цикле

Напишите цикл, который за 7 вызовов console.log выводит такой треугольник:

#
##
###
####
#####
######
#######

Будет полезно знать, что длину строки можно узнать, приписав к переменной .length.

var abc = "abc";
console.log(abc.length);
// → 3

FizzBuzz

Напишите программу, которая выводит через console.log все цифры от 1 до 100, с двумя исключениями. Для чисел, нацело делящихся на 3, она должна выводить ‘Fizz’, а для чисел, делящихся на 5 (но не на 3) – ‘Buzz’.

Когда сумеете – исправьте её так, чтобы она выводила «FizzBuzz» для всех чисел, которые делятся и на 3 и на 5.

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

Шахматная доска

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

# # # #
 # # # #
# # # #
 # # # #
# # # #
 # # # #
# # # #
 # # # #

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

JavaScript: Приоритет операций

Посмотрите внимательно на выражение 2 + 2 * 2 и посчитайте в уме ответ.

Правильный ответ: 6.

Если у вас получилось 8, то этот урок для вас. В школьной математике мы изучали понятие «приоритет операции». Приоритет определяет то, в какой последовательности должны выполняться операции. Например, умножение и деление имеют больший приоритет, чем сложение и вычитание, а приоритет возведения в степень выше всех остальных арифметических операций: 2 ** 3 * 2 вычислится в 16.

Но нередко вычисления должны происходить в порядке, отличном от стандартного приоритета. В сложных ситуациях приоритет можно (и нужно) задавать круглыми скобками, точно так же, как в школе, например: (2 + 2) * 2.

Скобки можно ставить вокруг любой операции. Они могут вкладываться друг в друга сколько угодно раз. Вот пара примеров:

console.log(3 ** (4 - 2)); // => 9
console.log(7 * 3 + (4 / 2) - (8 + (2 - 1))); // => 14

Главное при этом соблюдать парность, то есть закрывать скобки в правильном порядке. Это, кстати, часто становится причиной ошибок не только у новичков, но и у опытных программистов. Для удобства ставьте сразу открывающую и закрывающую скобку, а потом пишите внутреннюю часть. Редактор на нашем сайте (и большинство других редакторов кода) делают это автоматически: вы пишете (, а редактор сразу добавляет ). Это касается и других парных символов, например, кавычек. О них — в будущих уроках.

Иногда выражение сложно воспринимать визуально. Тогда можно расставить скобки, не повлияв на приоритет. Например, задание из прошлого урока можно сделать немного понятнее, если расставить скобки.

Было:

console.log(8 / 2 + 5 - -3 / 2); // => 10.5

Стало:

console.log(((8 / 2) + 5) - (-3 / 2)); // => 10.5

Запомните: код пишется для людей, потому что код будут читать люди, а машины будут только исполнять его. Для машин код — или корректный, или не корректный, для них нет «более» понятного или «менее» понятного кода.

Задание

Дано вычисление 70 * 3 + 4 / 8 + 2.

Расставьте скобки так, чтобы оба сложения (3 + 4) и (8 + 2) высчитывались в первую очередь. Выведите на экран результат.

Советы

• Приоритет операторов

11. Числа с плавающей точкой

JavaScript: Числа с плавающей точкой

JavaScript не делает различий между рациональными (0.5) и натуральными числами (10), для него и то, и другое – числа (в других языках это не так). Благодаря этому их можно использовать совместно в любых операциях:

3 * 0.5; // 1.5

Но как бы от нас не скрывали, рациональные числа, в силу своих особенностей, устроены совсем по-другому. Нам, как прикладным программистам, это было бы не особенно важно, если бы не одна деталь. Посмотрите на этот пример:

// Проверьте этот код в консоли браузера
0.2 * 0.2 // 0.04000000000000001

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

// Максимальное возможное целое число
console.log(Number.MAX_SAFE_INTEGER);
9007199254740991

Рациональные числа не выстроены в непрерывную цепочку, между 0.1 и 0.2 бесконечное множество чисел. Соответственно возникает серьезная проблема, а как хранить рациональные числа? Это интересный вопрос сам по себе. В интернете множество статей, посвященных организации памяти в таких случаях. Более того, существует стандарт, в котором описано, как это делать правильно, и подавляющее число языков на него опирается.

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

Задание

Вычислите и выведите на экран произведение двух чисел: 0.39 и 0.22

Советы

• Что нужно знать про арифметику с плавающей запятой

console.log(1 / 0); // ?

Infinity + 4; // Infinity
Infinity - 4; // Infinity
Infinity * Infinity; // Infinity

Infinity / Infinity; // NaN

NaN + 1; // NaN

console.log(8/2+5 - -3 / 2); // => 10.5

console.log(((8 / 2) + 5) - (-3 / 2)); // => 10.5

console.log(70 * (3 + 4) / (8 + 2));

'Hello'
'Goodbye'
'G'
' '
''

// Стандарт кодирования airbnb, рекомендует
// использовать, по возможности, одинарные
console.log('Dracarys!');

console.log('Dragon's mother');
// Uncaught SyntaxError: missing ) after argument list

console.log("Dragon's mother");

Dragon's mother said "No"

// Экранируется только ", так как в этой ситуации
// двойные кавычки имеют специальное значение
console.log("Dragon's mother said "No"");
// => Dragon's mother said "No"

//  не выводится, если после него идет обычный,
// а не специальный символ
console.log("Death is so terribly final");
// => Death is so terribly final

console.log("\");
// => 

console.log("\ \ \\ \ '"");

"Khal Drogo's favorite word is "athjahakar""

"Khal Drogo's favorite word is "athjahakar""

- Are you hungry?
- Aaaarrrgh!

console.log('- Are you hungry?- Aaaarrrgh!');

- Are you hungry?- Aaaarrrgh!

console.log('- Are you hungry?n- Aaaarrrgh!');

- Are you hungry?
- Aaaarrrgh!

// Мы это не изучали, но вы должны знать правду
// Ниже код, который возвращает длину строки
'a'.length;    // 1
'n'.length;   // 1 !!!
'nn'.length; // 2 !!!

- Привет!¶
- О, привет!¶
- Как дела?

console.log('Gregor CleganenDunsennPollivernChiswyck');

Gregor Clegane
Dunsen
Polliver
Chiswyck

console.log('Joffrey loves using \n');

Joffrey loves using n

- Did Joffrey agree?
- He did. He also said "I love using n".

// Оператор такой же, как и при сложении чисел
// но здесь он имеет другой смысл (семантику)
console.log('Dragon' + 'stone');
// => 'Dragonstone'

console.log('Kings' + 'wood');     // => Kingswood

// Обратный порядок слов
console.log('road' + 'Kings');     // => roadKings

// Конкатенировать можно абсолютно любые строки
console.log("King's" + 'Landing'); // => King'sLanding

// Оба способа равнозначны

// Ставим пробел в левой части
console.log("King's " + 'Landing'); //  => King's Landing
// Ставим пробел в правой части
console.log("King's" + ' Landing'); //  => King's Landing

console.log("King's " + ' Landing');   // => King's  Landing

console.log("King's  " + '  Landing'); // => King's    Landing

Winter came for the House of Frey.

console.log(String.fromCharCode(63));

console.log('Father!');
console.log('Father!');

// greeting - переводится как приветствие
let greeting = 'Father!';
console.log(greeting); // => 'Father!'
console.log(greeting); // => 'Father!'

let greeting;

// Использование
console.log(greeting); // undefined

// Изменение переменной в следующем уроке

let greeting1 = 'Father!';
console.log(greeting1);
console.log(greeting1);

let greeting2 = 'Mother!';
console.log(greeting2);
console.log(greeting2);

let greeting = 'Father!';
console.log(greeting);
console.log(greeting);

greeting = 'Mother!';
console.log(greeting);
console.log(greeting);

let x = 'Father!';
console.log(x);
console.log(x);

// Uncaught ReferenceError: greeting is not defined
console.log(greeting);
let greeting = 'Father!';

let greeting = 'Father!';
let greeting = 'Father!';

let dollarsCount = 50 * 1.25;
console.log(dollarsCount); // => 62.5

62.5             // 62.5
50 * 1.25        // 62.5
120 / 10 * 2     // 24

'hello'          // "hello"
'Good' + 'will'  // "Goodwill"

let who = "dragon's" + 'mother';
console.log(who);

let rublesPerDollar = 60;
let dollarsCount = 50 * 1.25; // 62.5
let rublesCount = dollarsCount * rublesPerDollar; // 3750

console.log(rublesCount);

let rublesPerDollar = 60;
let dollarsCount = 50 * 1.25; // 62.5
let rublesCount = dollarsCount * rublesPerDollar; // 3750

console.log('The price is ' + rublesCount + ' rubles');

The price is 3750 rubles

125
7500

let what = 'Kings' + 'road';
console.log(what); // => 'Kingsroad'

let first = 'Kings';
let what = first + 'road';

console.log(what); // => 'Kingsroad'

let first = 'Kings';
let last = 'road';

let what = first + last;
console.log(what); // => 'Kingsroad'

Hello, Joffrey!
Here is important information about your account security.
We couldn't verify you mother's maiden name.

let dollarsCount = 50 * 1.25; // 62.5
let rublesCount = dollarsCount * 60; // 3750

console.log(rublesCount);

let dollarsPerEuro = 1.25;
let rublesPerDollar = 60;

let dollarsCount = 50 * dollarsPerEuro; // 62.5
let rublesCount = dollarsCount * rublesPerDollar; // 3750

console.log(rublesCount);

let king = 'King Balon the 6th';
console.log(king + ' has ' + (6 * 17) + ' rooms.');

King Balon the 6th has 102 rooms.

let dollarsInEuro = 1.25
let rublesInDollar = 60;

let dollarsCount = 50 * dollarsInEuro; // 62.5
let rublesCount = dollarsCount * rublesInDollar; // 3750

console.log(rublesCount);

const dollarsInEuro = 1.25;
const rublesInDollar = 60;

const euros = 1000;
const dollars = euros * dollarsInEuro;    // 1250
const rubles = dollars * rublesInDollar; // 75000

console.log(rubles);

const pi = 3.14;
pi = 5; // TypeError: Assignment to constant variable.

const firstName = 'Joffrey';
const greeting = 'Hello';

console.log(greeting + ', ' + firstName + '!');
// => 'Hello, Joffrey!'

const firstName = 'Joffrey';
const greeting = 'Hello';

// Обратите внимание на ограничители строки, это бектики
// Интерполяция не работает с одинарными и двойными кавычками
console.log(`${greeting}, ${firstName}!`);
// => 'Hello, Joffrey!'

Do you want to eat, Arya?

const firstName = 'Tirion';

console.log(firstName[0]); // => 'T'

// Длина строки 6, поэтому последний индекс — это 5
const firstName = 'Tirion';

console.log(firstName[5]); // => 'n'

// Вопрос на самопроверку. Что выведет этот код?
const magic = 'nyou'
console.log(magic[1]); // => ?

const firstName = 'Tirion';
const index = 0;

console.log(firstName[index]); // => 'T'

const firstName = 'Tirion';

console.log(firstName[10]); // => undefined

3 * 'Dracarys'; // NaN

typeof 3; // 'number'
typeof 'Game'; // 'string'

let name;
console.log(name); // ?

const name = 'Arya';
console.log(name[8]);

let key = undefined;

let firstName = 'Alexander';
// Код выполнится без ошибок
firstName[0] = 'B';
console.log(firstName); // => "Alexander"

let firstName = 'Alexander';
// Код выполнится без ошибок
firstName = 'Blexander'
console.log(firstName); // => "Blexander"

console.log(1 + '7'); // => '17'

const result = 'one' * 'two';
console.log(result); // => NaN

// reverse это функция
import { reverse } from 'hexlet-basics/string';

// Вызов функции reverse с аргументом 'Hello!'
const result = reverse('Hello!');
console.log(result); // => '!olleH'

import { pow } from 'hexlet-basics/math';

const result = pow(2, 3); // 2 * 2 * 2
console.log(result); // => 8

3 + 5; // 8
sum(3, 5); // 8
// или даже так
// В js такой синтаксис невозможен, но есть языки (lisp)
// где оно выглядит очень похоже (посмотрите курс по Racket)
+(3, 5);

import { calculateDistance } from 'hexlet-basics/got';

const distance = calculateDistance('Lannisport', 'Bayasabhad');
console.log(distance);

Math.pow(2, 3); // 8

  Math.abs(-3); // 3

const result = Math.pow(2, 'boom');
console.log(result); // => NaN

Math.pow(base, exponent)

Параметры
  base
    Основание степени.
  exponent
    Показатель степени, в которую возводится основание base.

import { round } from 'hexlet-basics/math';

const result = round(10.25, 0); // 10

const result = round(10.25); // 10

// округление до одного знака после запятой
const result = round(10.25, 1); // 10.3

Math.max(1, 10, 3); // 10

  Math.max([value1[, value2[, ...]]])

  Math.max(1, -3, 2, 3, 2); // 3

const distance = calculateDistance('Lannisport', 'Bayasabhad');

const result = 4 + numberOfKnights('Winterfell');

const result = numberOfKnights('Winterfell') + numberOfKnights('Oldtown');

import { round } from 'hexlet-basics/math';

const result = round(10.25); // 10

const result = round(8 + 2.25); // 10

const number = 1.25;

const result = round(number + 7 + 2); // 10

console.log('D' + 'ragon'); // => 'Dragon'

// простые вызовы
round(10.25);           // 10
console.log('Dragon');  // => 'Dragon'

// выражения в аргументах
round(8 + 2.25);            // 10
console.log('Dra' + 'gon'); // => 'Dragon'

// выражения с переменными в аргументах
number = 1.25;
round(number + 7 + 2); // 10

const text = 'Dr';
console.log(text + 'ag' + 'on');  // => 'Dragon'

const distance = calculateDistanceBetweenTowns('Lannisport-Bayasabhad');

import { round } from 'hexlet-basics/math';

const number = -100.234203;
const result = round(Math.abs(number), 2); // 100.23

const number = -100.234203;
const module = Math.abs(number); // 100.234203
const result = round(module, 2); // 100.23

const number = -100.234203;
const result = round(Math.abs(number), round(2.43));

const mother = getParentFor('Joffrey Baratheon');
console.log(mother); // => 'Cersei Lannister'

import { reverse } from 'hexlet-basics/string';

reverse('cat'); // tac
reverse('cat'); // tac

import { rand } from 'hexlet-basics/math';

rand(); // 0.234111
rand(); // 0.932342

import { toUpperCase } from 'hexlet-basics/string';

console.log(toUpperCase('hello')); // => HELLO

import { length } from 'hexlet-basics/string';

const name = 'Robb';
console.log(length(name)); // => 4

const name = 'Robb';
const len = name.length;
console.log(len); // => 4

const name = 'Robb';
console.log(name.whatIsThat); // => undefined

const name = 'Robb';
const upperName = name.toUpperCase();
console.log(upperName); // => 'ROBB'

const temperature = 22.93;
// Округление до одного знака после запятой
const roundedTemperature = temperature.toFixed(1);
// Метод возвращает строку, которая содержит преобразованное число
console.log(roundedTemperature); // => '22.9'

// Напрямую можно вызывать так
// Скобки нужны обязательно, иначе не заработает
(22.93).toFixed(1); // '22.9'

const name = 'Tirion';
console.log(name.toUpperCase()); // => TIRION
console.log(name); // => ?

const name = 'Tirion';
console.log(name.length); // => 6
name.length = 100;
console.log(name.length); // => 6

let name = 'Tirion';
name = name.toUpperCase();
console.log(name); // => TIRION

const name = 'Shaya';
name.length + 5; // 10
`hi, ${name.toUpperCase()}!`; // hi, SHAYA!

const name1 = 'Robb';
const name2 = 'Shaya';
console.log(name2.length); // => 5
console.log(name2.toLowerCase()); // => shaya
console.log(Math.min(name1.length, name2.length)); // => 4

First: N
Last: t

const peopleCount = 5;
peopleCount.toString(); // '5'

const name = 'Tirion';
console.log(name.length.toString());

const name = 'Tirion';
const len = name.length;
console.log(len.toString());

const name = 'Tirion';
console.log(name.toUpperCase().toLowerCase());

const name = 'Tirion';
// Этот код отработает неверно!
console.log(name.toUpperCase.toLowerCase());

// Чему равен результат такого вызова?
console.log(name.toUpperCase().toLowerCase().length.toString().length);

import { send } from 'some-email-package';

const email = '[email protected]';
const title = 'Помогите';
const body = 'Я написал историю успеха, как я могу получить скидку?';

// Один маленький вызов — и много логики внутри
send(email, title, body);

Today is: December 5

// Определение функции
// Определение не вызывает и не выполняет функцию
// Мы лишь говорим, что теперь такая функция существует
const showCurrentDay = () => {
  const text = 'Today is: December 5';
  console.log(text);
};

// Вызов функции
showCurrentDay();

// Обратите внимание на стиль
// Пробелы между символами
// Открывающая фигурная скобка в конце той же строчки, где стрелка
// Закрывающая - на своей отдельной строчке в конце
() => {
  const text = 'Today is: December 5';
  console.log(text);
};

const doSomething = /* определение любой функции */;

// Минимальное определение функции, которая ничего не делает
const noop = () => {};

noop(); // вызов есть, а смысла нет
// Такая функция тоже бывает полезна
// Но это относится к продвинутым темам

printMotto(); // => Winter is coming

const showCurrentDay = (text) => {
  console.log(`Today is: ${text}`);
};

showCurrentDay('January 29');

Today is: January 29

const showCurrentDate = (lala) => {
  console.log(`Today is: ${lala}`);
};

const date = 'January 29';
showCurrentDate(date);

const showCurrentDate = ('Today is: December 5') => {
  // какой-нибудь код
};

const showCurrentDate = () => {
  const text = 'Today is: December 5';
  // какой-нибудь код
};

printJaimesLine('Farewell, my friend...');

JAIME:  Farewell, my friend...

const showCurrentDay = (month, day) => {
  console.log(`Today is: ${month} ${day}`);
};

showCurrentDay('January', '29');

Today is: January 29

showCurrentDay('January');
// Today is: January undefined

showCurrentDay();
// Today is: undefined undefined

Meereen =-=-=-=- Myr

Vaes Dothrak ======== Vahar

console.log('=-'.repeat(4));

=-=-=-=-

printSeq('=-', 4);

=-=-=-=-

const sub = (a, b) => {
  const result = a - b;
  return result;
};

const result = sub(10, 7);
console.log(result); // => 3

const sub = (a, b) => {
  // Сначала вычисляется выражение справа от `return`
  // затем получившееся значение возвращается
  return a - b;
};

console.log(sub(2018, 1975)); // => 43

const foo = () => {
  return 7;
  return 10;
};

console.log(foo());

getParentNamesTotalLength('Daenerys Targaryen'); // 35

const sub = (a, b) => {
  // Полученный результат никак не используется
  // и не возвращается наружу
  const answer = a - b;
};

const result = sub(10, 7);
console.log(result); // undefined

getParentFor('Jon Snow');
getParentFor('Jon Snow', 'mother');

const getParentFor = (child, parent = 'mother') => {
  // какой-то код
};

getParentFor('Daenerys Targaryen', 'father'); // Aerys II Targaryen

getCustomParentFor('Cersei Lannister'); // Tywin Lannister
getCustomParentFor('Daenerys Targaryen', 'mother'); // Rhaella Targaryen

// Кредитка передается внутрь как строка
getHiddenCard('1234567812345678', 2); // '**5678'
getHiddenCard('1234567812345678', 3); // '***5678'
getHiddenCard('1234567812345678'); // '****5678'
getHiddenCard('2034399002121100', 1); // '*1100'

const square = (x) => {
  return x ** 2;
};

// Требуется немного времени на привыкание к этой форме, но потом вы не сможете без неё жить
const double = (x) => x ** 2;

const sum = (a, b) => {
  return a + b;
};

const sum = (a, b) => a + b;

  const name = 'arya';
  console.log(capitalize(name)); // => Arya

  'welcome'.slice(2, 5); // lco

const result = 5 > 4;
console.log(result); // => true
console.log('one' !== 'one'); // => false

const isInfant = (age) => age < 1;

const isInfant = (age) => age < 1;

console.log(isInfant(3));

false

console.log(isInfant(0.5));

true

isPensioner(75); // true
isPensioner(18); // false

const isInfant = (age) => age < 1;
console.log(isInfant(3));

false

const isCastle = (type) => type === 'Castle';

console.log(isCastle('Sea'));

false

isMister('Mister'); // true
isMister('Miss');   // false

const isEven = (number) => number % 2 === 0;

isEven(10); // true
isEven(3);  // false

const isFirstLetterInUpperCase = (string) => {
  const firstLetter = string[0];
  return firstLetter.toUpperCase() === firstLetter;
}

isFirstLetterInUpperCase('marmont'); // false
isFirstLetterInUpperCase('Robb');    // true

const firstName = 'Alexander';

firstName[0]; // A

hasTargaryenReference('');          // false
hasTargaryenReference('Targari');   // false
hasTargaryenReference('targaryen'); // false
hasTargaryenReference('Targaryen'); // true

Пароль длиннее 8 символов **И** пароль короче 20 символов.

const isStrongPassword = (password) => {
  const length = password.length;
  return length > 8 && length < 20;
};

isStrongPassword('qwerty'); // false
isStrongPassword('qwerty1234'); // true
isStrongPassword('zxcvbnmasdfghjkqwertyui'); // false

const hasSpecialChars = (str) => /* проверяет содержание специальных символов в строке */;

const isStrongPassword = (password) => {
  const length = password.length;
  // Скобки задают приоритет. Понятно что к чему относится.
  return (length > 8 && length < 20) || hasSpecialChars(password);
};

const isGoodApartment = (area, street) => {
  // Через переменную, чтобы функция была не слишком длинной
  const result = area >= 100 || (area >= 80 && street === 'Main Street');
  return result;
};

isGoodApartment(91, 'Queens Street'); // false
isGoodApartment(78, 'Queens Street'); // false
isGoodApartment(70, 'Main Street');   // false

isGoodApartment(120, 'Queens Street'); // true
isGoodApartment(120, 'Main Street');   // true
isGoodApartment(80, 'Main Street');    // true

isLannisterSoldier('red', 'lion'); // true
isLannisterSoldier('blue', null);  // false

const isEven = (number) => number % 2 === 0;

isEven(10);  // true
!isEven(10); // false

isEven(10);   // true
!isEven(10);  // false
!!isEven(10); // true

isNotLannisterSoldier('red', 'lion'); // false
isNotLannisterSoldier('blue', null);  // true

const isLeapYear = (year) => year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0);

isLeapYear(2018); // false
isLeapYear(2017); // false
isLeapYear(2016); // true

isNeutralSoldier('yellow', 'black'); // true
isNeutralSoldier('red', 'black');    // false
isNeutralSoldier('red', 'red');      // false

console.log(0 || 1);

1

console.log(0 && 1);

0

const value = name || '';
// Примеры
234 || ''; // 234
'hexlet' || ''; // 'hexlet'

// Упс
false || ''; // ''
0 || ''; // ''
undefined || ''; // ''

console.log('' === false); // => false
console.log('' == false);  // => true

const answer = true;
console.log(!answer); // => false

const answer = true;
console.log(!!answer); // => true

const name = 'Hexlet';

// Обычное обращение возвращает undefined
name[10]; // undefined

// 11 символ соответствует 10 индексу
getLetter(name, 11); // ''

getLetter(name, 1); // 'H'
getLetter(name, 0); // ''
getLetter(name, 6); // 't'

const getTypeOfSentence = (sentence) => {
  const lastChar = sentence[sentence.length - 1];
  if (lastChar === '?') {
    return 'question';
  }

  return 'general';
};

getTypeOfSentence('Hodor');  // general
getTypeOfSentence('Hodor?'); // question

const getTypeOfSentence = (sentence) => {
  const lastChar = sentence[sentence.length - 1];
  if (lastChar === '?')
    return 'question';

  return 'general';
};

console.log(getTypeOfSentence('Hodor'));  // => general
console.log(getTypeOfSentence('Hodor?')); // => question

getSentenceTone('Hello'); // general
getSentenceTone('WOW');   // scream

  getTypeOfSentence('Hodor');  // General sentence
  getTypeOfSentence('Hodor?'); // Question sentence

const getTypeOfSentence = (sentence) => {
  let sentenceType;
  // Предикат, проверяющий окончание текста
  // Если он оканчивается на символ '?', то вернётся true,
  // иначе false
  if (sentence.endsWith('?')) {
    sentenceType = 'Question';
  } else {
    sentenceType = 'General';
  }

  return `${sentenceType} sentence`;
};

const getTypeOfSentence = (sentence) => {
  let sentenceType;
  // Добавилось отрицание
  // Содержимое else переехало в if и наоборот
  if (!sentence.endsWith('?')) {
    sentenceType = 'General';
  } else {
    sentenceType = 'Question';
  }

  return `${sentenceType} sentence`;
};

buildUrl('pages/about', 'hexlet.io'); // 'https://hexlet.io/pages/about'
buildUrl('/pages/about', 'hexlet.io'); // 'https://hexlet.io/pages/about'

// Для главной страницы слэш в конце обязателен
buildUrl('/', 'ru.code-basics.com'); // 'https://ru.code-basics.com/'
buildUrl('', 'ru.code-basics.com'); // 'https://ru.code-basics.com/'

const getTypeOfSentence = (sentence) => {
  const lastChar = sentence[sentence.length - 1];
  let sentenceType;

  if (lastChar === '!') {
    sentenceType = 'exclamation';
  } else {
    sentenceType = 'normal';
  }

  if (lastChar === '?') {
    sentenceType = 'question';
  }

  return `Sentence is ${sentenceType}`;
};

getTypeOfSentence('Who?'); // 'Sentence is question'
getTypeOfSentence('No');   // 'Sentence is normal'
getTypeOfSentence('No!');  // 'Sentence is exclamation'

const getTypeOfSentence = (sentence) => {
  const lastChar = sentence[sentence.length - 1];
  let sentenceType;

  if (lastChar === '?') {
    sentenceType = 'question';
  } else if (lastChar === '!') {
    sentenceType = 'exclamation';
  } else {
    sentenceType = 'normal';
  }

  return `Sentence is ${sentenceType}`;
};

getTypeOfSentence('Who?'); // 'Sentence is question'
getTypeOfSentence('No');   // 'Sentence is normal'
getTypeOfSentence('No!');  // 'Sentence is exclamation'

whoIsThisHouseToStarks('Karstark'); // 'friend'
whoIsThisHouseToStarks('Frey');     // 'enemy'
whoIsThisHouseToStarks('Joar');     // 'neutral'
whoIsThisHouseToStarks('Ivanov');   // 'neutral'

const abs = (number) => {
  if (number >= 0) {
    return number;
  }

  return -number;
};

abs(10); // 10
abs(-10); // 10

const abs = (number) => {
  return number >= 0 ? number : -number;
};

const abs = (number) => (number >= 0 ? number : -number);

const getTypeOfSentence = (sentence) => {
  const lastChar = sentence.slice(-1);

  if (lastChar === '?') {
      return 'question';
  }

  return 'normal';
};

const getTypeOfSentence = (sentence) => {
  const lastChar = sentence.slice(-1);

  return (lastChar === '?') ? 'question' : 'normal';
};

getTypeOfSentence('Hodor');  // normal
getTypeOfSentence('Hodor?'); // question

convertText('Hello'); // 'Hello'
convertText('hello'); // 'olleh'

// Не забудьте учесть пустую строку!
convertText(''); // ''

const result = reverse('Hello!');
console.log(result); // => '!olleH'

if (status === 'processing') {
  // Делаем раз
} else if (status === 'paid') {
  // Делаем два
} else if (status === 'new') {
  // Делаем три
} else {
  // Делаем четыре
}

switch (status) {
  case 'processing': // status == processing
    // Делаем раз
    break;
  case 'paid': // status == paid
    // Делаем два
    break;
  case 'new': // status == new
    // Делаем три
    break;
  default: // else
    // Делаем четыре
}

switch (count) {
  case 1:
    // Делаем что-то полезное
    break;
  case 2:
    // Делаем что-то полезное
    break;
  default:
    // Что-то делаем
}

(count) => {
  // Объявляем переменную
  let result;

  // Заполняем
  switch (count) {
    case 1:
      result = 'one';
      break;
    case 2:
      result = 'two';
      break;
    default:
      result = null;
  }

  // Возвращаем
  return result;
};

(count) => {
  switch (count) {
    case 1:
      return 'one';
    case 2:
      return 'two';
    default:
      return null;
  }
};

getNumberExplanation(8);   // null

// Объяснения есть только для указанных ниже чисел
getNumberExplanation(666); // 'devil number'
getNumberExplanation(42);  // 'answer for everything'
getNumberExplanation(7);   // 'prime number'

printNumbers(3);
// => 1
// => 2
// => 3

const printNumbers = (lastNumber) => {
  // i сокращение от index (порядковый номер)
  // используется по общему соглашению во множестве языков
  // как счетчик цикла
  let i = 1;

  while (i <= lastNumber) {
    console.log(i);
    i = i + 1;
  }
  console.log('finished!');
};

printNumbers(3);

1
2
3
finished!

// Инициализируется i
let i = 1;

// Предикат возвращает true, поэтому выполняется тело цикла
while (1 <= 3)
// console.log(1);
// i = 1 + 1;

// Закончилось тело цикла, поэтому происходит возврат в начало
while (2 <= 3)
// console.log(2);
// i = 2 + 1;

// Закончилось тело цикла, поэтому происходит возврат в начало
while (3 <= 3)
// console.log(3);
// i = 3 + 1;

// Предикат возвращает false, поэтому выполнение переходит за цикл
while (4 <= 3)

// console.log('finished!');
// На этом этапе i равен 4, но он нам уже не нужен
// функция завершается

const printNumbers = (lastNumber) => {
  let i = 1;

  // Этот цикл никогда не остановится
  // и будет печатать всегда одно значение
  while (i <= lastNumber) {
    console.log(i);
  }
  console.log('finished!');
};

while (true) {
  // Что-то делаем
}

printNumbers(4);

4
3
2
1
finished!

sumNumbersFromRange(5, 7); // 5 + 6 + 7 = 18
sumNumbersFromRange(1, 2); // 1 + 2 = 3

// [1, 1] диапазон с одинаковым началом и концом – тоже диапазон
// он в себя включает ровно одно число – саму границу диапазона
sumNumbersFromRange(1, 1); // 1
sumNumbersFromRange(100, 100); // 100

const sumNumbersFromRange = (start, finish) => {
  // Технически можно менять start
  // Но входные аргументы нужно оставлять в исходном значении
  // Это сделает код проще для анализа
  let i = start;
  let sum = 0; // Инициализация суммы

  while (i <= finish) { // Двигаемся до конца диапазона
    sum = sum + i; // Считаем сумму для каждого числа
    i = i + 1; // Переходим к следующему числу в диапазоне
  }

  // Возвращаем получившийся результат
  return sum;
};

// Для вызова sumNumbersFromRange(2, 5);
let sum = 0;
sum = sum + 2; // 2
sum = sum + 3; // 5
sum = sum + 4; // 9
sum = sum + 5; // 14
// 14 – результат сложения чисел в диапазоне [2, 5]

// начальное значение не задано
// js автоматически делает его равным undefined
let sum;

// первая итерация цикла
sum = sum + 2; // ?

multiplyNumbersFromRange(1, 5); // 1 * 2 * 3 * 4 * 5 = 120
multiplyNumbersFromRange(2, 3); // 2 * 3 = 6
multiplyNumbersFromRange(6, 6); // 6

repeat('hexlet', 3); // 'hexlethexlethexlet'

const repeat = (text, times) => {
  // Нейтральный элемент для строк – пустая строка
  let result = '';
  let i = 1;

  while (i <= times) {
    // Каждый раз добавляем строку к результату
    result = `${result}${text}`;
    i = i + 1;
  }

  return result;
};

// Для вызова repeat('hexlet', 3);
let result = '';
result = `${result}hexlet`; // hexlet
result = `${result}hexlet`; // hexlethexlet
result = `${result}hexlet`; // hexlethexlethexlet

joinNumbersFromRange(1, 1); // '1'
joinNumbersFromRange(2, 3); // '23'
joinNumbersFromRange(5, 10); // '5678910'

const printNameBySymbol = (name) => {
  let i = 0;
  // Такая проверка будет выполняться до конца строки
  // включая последний символ. Его индекс `length - 1`.
  while (i < name.length) {
    // Обращаемся к символу по индексу
    console.log(name[i]);
    i = i + 1;
  }
};

const name = 'Arya';
printNameBySymbol(name);
// => 'A'
// => 'r'
// => 'y'
// => 'a'

const name = 'Arya';

printReversedNameBySymbol(name);
// => 'a'
// => 'y'
// => 'r'
// => 'A'

countChars('Fear cuts deeper than swords.', 'e'); // 4
// Если вы ничего не нашли, то результат — 0 совпадений
countChars('Sansa', 'y'); // 0

const countChars = (str, char) => {
  let i = 0;
  let count = 0;
  while (i < str.length) {
    if (str[i] === char) {
      // Считаем только подходящие символы
      count = count + 1;
    }
    // Счетчик увеличивается в любом случае
    i = i + 1;
  }

  return count;
};

countChars('HexlEt', 'e'); // 2
countChars('HexlEt', 'E'); // 2

reverse('Hexlet'); // telxeH

const reverse = (str) => {
  let i = 0;
  // Нейтральный элемент для строк это пустая строка
  let result = '';
  while (i < str.length) {
    // Соединяем в обратном порядке
    result = `${str[i]}${result}`;
    // То же самое через конкатенацию
    // result = str[i] + result;
    i = i + 1;
  }

  return result;
};

const name = 'Bran';
reverse(name); // 'narB'
// Проверка нейтрального элемента
reverse(''); // ''

const str = 'If I look back I am lost';
filterString(str, 'I'); // 'f  look back  am lost'
filterString(str, 'o'); // 'If I lk back I am lst'

let i = 0;
i++; // 0
i++; // 1

i--; // 2
i--; // 1

let i = 0;
++i; // 1
++i; // 2

--i; // 1
--i; // 0

let x = 5;

console.log(++x); // => 6
console.log(x);   // => 6

console.log(x++); // => 6
console.log(x);   // => 7

const text = 'I never look back';
// Каждый третий элемент
makeItFunny(text, 3); // 'I NevEr LooK bAck'

const isPrime = (number) => {
  if (number < 2) {
      return false;
  }

  let divider = 2;

  while (divider <= number / 2) {
    if (number % divider === 0) {
        return false;
    }

    divider += 1;
  }

  return true;
}

isPrime(1); // false
isPrime(2); // true
isPrime(3); // true
isPrime(4); // false

hasChar('Renly', 'R'); // true
hasChar('Renly', 'r'); // false
hasChar('Tommy', 'm'); // true
hasChar('Tommy', 'd'); // false

const reverseString = (str) => {
  let result = '';
  for (let i = 0; i < str.length; i += 1) {
    result = `${str[i]}${result}`;
  }

  return result;
};

encrypt('attack'); // 'taatkc'
// Если число символов нечётное
// то последний символ остается на своем месте
encrypt('go!'); // 'og!'