Основы JavaScript on JSFlow

Переменные и типы данных

Mon, 01 Jan 0001 00:00:00 +0000

Переменные и типы данных в JavaScript #

Переменная — именованная привязка к значению: через имя можно читать данные и записывать новые (если объявление это допускает). В JavaScript у каждого значения есть тип; сама переменная не «закрепляет» тип навсегда — в let можно положить другое значение позже.

Как объявить переменную #

Современный JavaScript поддерживает три способа объявления:

let cartTotal = 0
const playlistId = 'focus-tracks'
var legacyCounter = 1 // устаревший способ

var — устаревший, может быть переобъявлен в той же области видимости.
let и const — блочные привязки: область видимости ограничена блоком { ... }.
let допускает повторное присваивание, const — нет (но мутабельные объекты и массивы можно изменять по содержимому).

Структура кода и строгий режим

Mon, 01 Jan 0001 00:00:00 +0000

Структура кода и строгий режим в JavaScript #

Программа на JavaScript состоит из инструкций (statements), которые движок выполняет сверху вниз. Понятная структура кода снижает число скрытых ошибок; режим "use strict" отключает опасные устаревшие послабления языка.

Инструкции и блоки #

Инструкция — законченное действие: объявление, присваивание, вызов, условие, цикл.

const queueSize = 3
const label = 'intake'

console.log(label, queueSize)

Блок { ... } группирует инструкции. У let / const внутри блока своя область видимости:

{
 const step = 'validate'
 // step виден только здесь
}

// console.log(step) // ReferenceError

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

Операторы в JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Операторы в JavaScript #

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

Арифметика и присваивание #

const base = 1200
const fee = 90

const gross = base + fee // 1290
const net = gross - 200 // 1090
const parts = net / 2 // 545
const rem = 17 % 5 // 2
const squared = 3 ** 2 // 9

Сокращённое присваивание обновляет ту же переменную:

let stock = 40
stock += 5 // 45
stock *= 2 // 90
stock--" // 89, затем выражение даёт 89 (постфикс)

Инкремент ++ / декремент -- меняют число на месте. В сложных выражениях поведение префикса и постфикса различается — в учебном коде чаще пишите stock += 1.

Преобразование типов в JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Преобразование типов в JavaScript #

JavaScript часто приводит значения от одного типа к другому: явно (вы вызвали Number(...)) или неявно (оператор сам решил, что делать). Контролируемое явное преобразование делает поведение предсказуемым для SEO-понятных API и для генеративных подсказок, где важна однозначность.

Три целевых типа #

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

В строку #

String(42) // "42"
String(true) // "true"
String(null) // "null"
String(undefined) // "undefined"

const id = 904
const url = '/items/' + id // "/items/904" — конкатенация через +

Шаблонные строки тоже приводят вложенные выражения к строке:

Условное ветвление в JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Условное ветвление в JavaScript #

Ветвление выбирает один из путей выполнения в зависимости от условия. В JavaScript для этого используют if / else, тернарный оператор ? : и switch.

if, else if, else #

function deliveryLabel(distanceKm) {
 if (distanceKm <= 3) {
 return 'пеший курьер'
 } else if (distanceKm <= 15) {
 return 'велокурьер'
 } else {
 return 'авто'
 }
}

deliveryLabel(8) // "велокурьер"

Условие приводится к boolean по правилам truthy/falsy. Для явных сравнений пишите ===, >, <= и т.д.

Циклы в JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Циклы в JavaScript #

Цикл повторяет блок кода, пока выполняется условие или пока не исчерпан набор элементов. В современном JavaScript для массивов чаще выбирают for...of или методы массива; while и классический for остаются для счётчиков и условий с неизвестным числом шагов.

while и do…while #

while проверяет условие до тела цикла:

let battery = 100
let ticks = 0

while (battery > 20) {
 battery -= 15
 ticks += 1
}

ticks // 6
battery // 10

do...while выполняет тело хотя бы один раз, затем проверяет условие:

Функции в JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Функции в JavaScript #

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

Function Declaration #

Самый прямой способ — объявить функцию ключевым словом function:

function formatPrice(amount, currency = 'RUB') {
 return `${amount.toFixed(2)} ${currency}`
}

formatPrice(1490) // "1490.00 RUB"
formatPrice(12.5, 'EUR') // "12.50 EUR"

Объявления «поднимаются» (hoisting): вызов до строки с function в том же scope обычно работает. На практике объявляйте функции до использования — код читается проще.