Типы данных
В JavaScript семь примитивных типов данных: числа (Number), большие целые числа (BigInt, с ES2020), текстовые строки (String), булевый тип (Boolean), символы (Symbol, с ES2015) и два служебных значения — undefined и null. Всё остальное — объекты (Object): массивы, функции, регулярные выражения, даты и т. д.

Primitive Datatypes

5 минут
Тест

Классификация всех типов
данных в JavaScript

примитивные / простые

  • Number
  • BigInt
  • String
  • Boolean
  • Symbol

примитивные служебные

  • Null
  • Undefined

объекты (Object)

  • Object
  • Array
  • Function
  • RegExp
  • Date
  • Map
  • Set
MDN: JavaScript data types

Примеры чисел

0, -20, 42, 15000000, 15_000_000 (integer)
0xff (hex), 0o377 (octal), 0b1010 (binary)
3.14, -2345.789, .333333
6.02e23, 1.4738223E-32
NaN, Infinity, -Infinity
42n, 9007199254740993n (BigInt)
Данные в чистом виде называются литералами (от слова literal, «буквальный»). Литерал — это буквальное значение (value).

Примеры текстовых строк

'', "", 'name="myform"', "3.14"
"π is the ratio of a circle's…"
"This string\nhas two lines"
'You\'re right, it can\'t be a quote'
`2 + 2 = ${2 + 2}` (шаблонная строка)
\n, \t, \", \', \\, \u, \u{1F600}

Самый простой способ поработать с выражениями — это воспользоваться консолью (через терминал или браузер).

terminal

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

JavaScript: The Definitive Guide

Chapter 3. Types,
Values and Variables

JavaScript: The Definitive Guide

JavaScript: The Good Parts

Chapter 2.
Grammar

JavaScript: The Good Parts

Eloquent JavaScript

Chapter 1. Values,
Types, and Operators

Eloquent JavaScript

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

Некоторые операторы ведут себя по-разному в разных контекстах. Например, оператор + в одном контексте обозначает сложение чисел, а в другом — соединение строк.

Operator Properties

5 минут
Тест

Типы операторов

  • унарный
  • бинарный
  • тернарный
  • инфикс
  • постфикс
  • префикс

Таблица приоритетности выборочных операторов

  • . ?. [] (refinement, optional chaining)
  • () new (invocation, create)
  • ! - + ++ -- typeof delete (unary operators)
  • ** (exponentiation, ES2016)
  • * / % (Multiplication, division, remainder)
  • + - (Addition/concatenation, subtraction)
  • < <= > >= (inequality)
  • in instanceof (objects and keys)
  • === !== (strict equality)
  • && || ?? (Logical and, Logical or, nullish coalescing)
  • ?: (ternary)
  • = += -= *= /= %= **= &&= ||= ??= (assignment)
  • , (comma)

При использовании операторов можно ещё использовать и скобки, чтобы (как в школе!) избежать путаницы в выражениях вида: 4+6 * 3 → (4+6) * 3

Выражения
Операторы + данные = выражения (expressions). Многие операторы будут знакомы ещё со школьной арифметики и математической логики. Наряду с операторами в этих тестах ещё используются и вызовы функций вроде Math.pow (возведение в степень; с ES2016 есть и оператор **) или Math.abs (модуль числа).

Как ни странно, выражение 0.1 + 0.2 === 0.3 возвращает false. Всё из-за особенностей того, как JavaScript хранит числа с плавающей точкой в памяти (стандарт IEEE 754).


JavaScript: The Definitive Guide

Chapter 4. Expressions
and operators

JavaScript: The Definitive Guide

Math Expressions

5 минут
Упражнение

Logic Expressions

5 минут
Упражнение
  • Math.pow() ** возведение в степень
  • Math.sqrt() квадратный корень
  • Math.round() округление
  • Math.ceil() округление вверх
  • Math.floor() округление вниз
  • Math.abs() модуль числа
  • Math.max() максимальное число
  • Math.min() минимальное число
  • === !== равенства
  • < <= > >= неравенства
  • && || логические и и или
  • ! логическое не
  • ?: тернарный оператор
  • ?? значение по умолчанию для null/undefined

  • + addition
  • - subtraction
  • * multiplication
  • / division
  • % remainder
Языковые конструкции
Ключевое свойство выражений в том, что они возвращают результат в то место, где они были использованы. Но что это за программа, которая не умеет сохранять полученный результат? Для этого есть переменные: с ES2015 их объявляют через let (значение можно менять) и const (нельзя переприсвоить). Старый var встречается в коде, написанном до 2015 года.
Eloquent JavaScript

Chapter 2.
Program Structure

Eloquent JavaScript

let x = 0;
x = x + 1;
x += 1;
x++;

while
for
for…of
do…while
if
if…else
if…else if…else

There are only two hard things in Computer Science:
cache invalidation, naming things, and off-by-one errors.

Swap It!

5 минут
Упражнение

Odd Numbers

15 минут
Упражнение

Final Countdown

10 минут
Упражнение

Xmas Tree

20 минут
Упражнение
Лексическая структура
JavaScript очень много прощает — позволяет пропускать точки с запятой, ставить лишние пробелы и иногда не ставить фигурные скобки. Подобная разболтанность может вести к серьёзным багам, поэтому стоит заранее договорить о стиле написания кода.
JavaScript: The Definitive Guide

Chapter 2.
Lexical Structure

JavaScript: The Definitive Guide

JavaScript: The Good Parts

Chapter 9.
Style

JavaScript: The Good Parts

Вкратце

  • camelCase, строчные и прописные
  • пробелы игнорируются (почти)
  • // комменты
  • литералы
  • идентификаторы (имена)
  • всегда ставь точку с запятой;
  • есть зарезервированные слова

Зарезервированные слова

await break case catch class const continue debugger
default delete do else enum export extends false
finally for function if implements import in
instanceof interface let new null package private
protected public return static super switch this
throw true try typeof var void while with yield
Типографика исходного кода и конвенции: Airbnb JavaScript Style Guide
Функции
Ещё одно средство абстракции — это функции. Они нужны для того, чтобы использовать набор инструкций несколько раз. Все функции возвращают какое-то значение, пусть даже и undefined.
Eloquent JavaScript

Chapter 3.
Functions

Eloquent JavaScript

Декларирование функции

const square = function (x) {
  return x * x;
};

// или стрелочной функцией (ES2015):
const square2 = (x) => x * x;

Вызов функции

console.log(square(12));
// → 144

Absolute

5 минут
Упражнение

Sum of Two

5 минут
Упражнение

Minimal

10 минут
Упражнение

String's Length

5 минут
Упражнение

Uppercaser

5 минут
Упражнение

Number Power

10 минут
Упражнение
Домашка
1 час
Домашка

Fizz Buzz

Напишите программу, которая выводит в консоль числа от 1 до 100, с двумя исключениями. Для чисел, делимых на 3…

Закрепить

Eloquent JavaScript

Chapter 1. Values,
Types, and Operators

Eloquent JavaScript

Eloquent JavaScript

Chapter 2.
Program Structure

Eloquent JavaScript

Eloquent JavaScript

Chapter 3.
Functions

Eloquent JavaScript

JavaScript: The Good Parts

Chapter 2.
Grammar

JavaScript: The Good Parts

JavaScript: The Good Parts

Chapter 9.
Style

JavaScript: The Good Parts

JavaScript: The Definitive Guide

Chapter 2.
Lexical Structure

JavaScript: The Definitive Guide

JavaScript: The Definitive Guide

Chapter 3. Types,
Values and Variables

JavaScript: The Definitive Guide

JavaScript: The Definitive Guide

Chapter 4. Expressions
and operators

JavaScript: The Definitive Guide

Типографика исходного кода и конвенции: Airbnb JavaScript Style Guide
MDN: Values, variables, and literals
MDN’s reintroduction of JavaScript