← JavaScript/Типы данных#51 из 383← ПредыдущийСледующий →+15 XP
Полезно по теме:Гайд: как учить JavaScriptПрактика: JS базаПрактика: async и сетьТермин: Closure

Типы данных

Когда Notion сохраняет задачу, он хранит разные данные: название задачи — текст, дата дедлайна — дата, выполнена ли — да/нет, приоритет — число. Это разные типы данных, и JavaScript работает с каждым по-своему.

На основе предыдущих уроков

Мы уже создавали переменные через const и let. Теперь разберёмся что именно можно в них хранить.

Какую проблему решают типы?

Компьютер не понимает разницу между "1000" и 1000 без подсказки. Первое — текст из трёх символов, второе — число для вычислений. Типы данных говорят JS как работать с каждым значением.

Семь типов JavaScript

Примитивные типы (простые значения):

  • string — текст в кавычках: 'Привет', "мир", шаблонные литералы ``Привет, ${name}
  • number — любые числа: 42, 3.14, -100, Infinity, NaN
  • boolean — только два значения: true или false
  • null — явное "ничего". Ты сам ставишь null когда хочешь сказать "значения нет"
  • undefined — переменная объявлена, но значение не присвоено
  • symbol — уникальный идентификатор (продвинутая тема)
  • bigint — очень большие числа (продвинутая тема)

    • Объектный тип:

  • object — сложные структуры: объекты, массивы, функции

    • Как узнать тип значения?

    Оператор typeof возвращает строку с типом:

    typeof 'текст'     // 'string'
typeof 42          // 'number'
typeof true        // 'boolean'
typeof null        // 'object'  <- историческая ошибка в JS!
typeof undefined   // 'undefined'
typeof {}          // 'object'
typeof []          // 'object'

    Шаблонные литералы — лучше конкатенации

    const name = 'Мария'
const age = 25

// Старый способ (неудобно)
console.log('Привет, ' + name + '! Тебе ' + age + ' лет.')

// Шаблонный литерал (читаемо)
console.log(`Привет, ${name}! Тебе ${age} лет.`)

// Внутри ${} можно писать любые выражения
console.log(`Через 5 лет тебе будет ${age + 5} лет.`)

    Типичные ошибки

    Ошибка 1: Строка вместо числа в вычислениях

    const price = '1000'  // получили из формы как строку
const tax = price * 0.2  // 200 — JS неявно преобразует в число
const total = price + tax  // '1000200' — НЕ 1200! Конкатенация!
// Правильно: const price = Number('1000') или parseInt('1000')

    Ошибка 2: Сравнивать null и undefined неправильно

    let userEmail = undefined
if (userEmail == null) console.log('нет email')  // true — == сравнивает оба
if (userEmail === null) console.log('точно null') // false — === строгое
// Для проверки null/undefined используй == null (оба варианта)

    Ошибка 3: typeof null возвращает 'object'

    const data = null
if (typeof data === 'object') {
  data.name  // TypeError! null — не объект, это баг в JS
}
// Правильно: проверяй data !== null && typeof data === 'object'

    В реальных проектах

    Понимание типов критично при работе с данными из API — они приходят в JSON где нет разницы между числом и строкой, и неправильный тип ломает вычисления. TypeScript добавляет строгую типизацию поверх JS именно для борьбы с такими ошибками.

    Примеры

    Карточка задачи в трекере (как в Notion или Jira)

    // Разные типы данных в одной задаче
const taskTitle = 'Сделать редизайн главной страницы'  // string
const priority = 3           // number: 1=низкий, 3=высокий
const isCompleted = false    // boolean
const assignedTo = 'Алексей' // string
const dueDate = '2024-03-15' // string (дата как текст)
const deletedAt = null       // null — задача не удалена

// typeof показывает тип каждого значения
console.log(typeof taskTitle)   // 'string'
console.log(typeof priority)    // 'number'
console.log(typeof isCompleted) // 'boolean'
console.log(typeof deletedAt)   // 'object' (ловушка! null — не объект)

// Шаблонный литерал собирает красивую строку
console.log(`[${isCompleted ? 'x' : ' '}] ${taskTitle} (P${priority})`)
// [ ] Сделать редизайн главной страницы (P3)

// Арифметика с числом работает нормально
console.log('Дней до дедлайна: ' + 7)   // 'Дней до дедлайна: 7'
console.log('Приоритет * 2: ' + priority * 2)  // 'Приоритет * 2: 6'

    Типы данных

    Когда Notion сохраняет задачу, он хранит разные данные: название задачи — текст, дата дедлайна — дата, выполнена ли — да/нет, приоритет — число. Это разные типы данных, и JavaScript работает с каждым по-своему.

    На основе предыдущих уроков

    Мы уже создавали переменные через const и let. Теперь разберёмся что именно можно в них хранить.

    Какую проблему решают типы?

    Компьютер не понимает разницу между "1000" и 1000 без подсказки. Первое — текст из трёх символов, второе — число для вычислений. Типы данных говорят JS как работать с каждым значением.

    Семь типов JavaScript

    Примитивные типы (простые значения):

  • string — текст в кавычках: 'Привет', "мир", шаблонные литералы ``Привет, ${name}
  • number — любые числа: 42, 3.14, -100, Infinity, NaN
  • boolean — только два значения: true или false
  • null — явное "ничего". Ты сам ставишь null когда хочешь сказать "значения нет"
  • undefined — переменная объявлена, но значение не присвоено
  • symbol — уникальный идентификатор (продвинутая тема)
  • bigint — очень большие числа (продвинутая тема)

    • Объектный тип:

  • object — сложные структуры: объекты, массивы, функции

    • Как узнать тип значения?

    Оператор typeof возвращает строку с типом:

    typeof 'текст'     // 'string'
typeof 42          // 'number'
typeof true        // 'boolean'
typeof null        // 'object'  <- историческая ошибка в JS!
typeof undefined   // 'undefined'
typeof {}          // 'object'
typeof []          // 'object'

    Шаблонные литералы — лучше конкатенации

    const name = 'Мария'
const age = 25

// Старый способ (неудобно)
console.log('Привет, ' + name + '! Тебе ' + age + ' лет.')

// Шаблонный литерал (читаемо)
console.log(`Привет, ${name}! Тебе ${age} лет.`)

// Внутри ${} можно писать любые выражения
console.log(`Через 5 лет тебе будет ${age + 5} лет.`)

    Типичные ошибки

    Ошибка 1: Строка вместо числа в вычислениях

    const price = '1000'  // получили из формы как строку
const tax = price * 0.2  // 200 — JS неявно преобразует в число
const total = price + tax  // '1000200' — НЕ 1200! Конкатенация!
// Правильно: const price = Number('1000') или parseInt('1000')

    Ошибка 2: Сравнивать null и undefined неправильно

    let userEmail = undefined
if (userEmail == null) console.log('нет email')  // true — == сравнивает оба
if (userEmail === null) console.log('точно null') // false — === строгое
// Для проверки null/undefined используй == null (оба варианта)

    Ошибка 3: typeof null возвращает 'object'

    const data = null
if (typeof data === 'object') {
  data.name  // TypeError! null — не объект, это баг в JS
}
// Правильно: проверяй data !== null && typeof data === 'object'

    В реальных проектах

    Понимание типов критично при работе с данными из API — они приходят в JSON где нет разницы между числом и строкой, и неправильный тип ломает вычисления. TypeScript добавляет строгую типизацию поверх JS именно для борьбы с такими ошибками.

    Примеры

    Карточка задачи в трекере (как в Notion или Jira)

    // Разные типы данных в одной задаче
const taskTitle = 'Сделать редизайн главной страницы'  // string
const priority = 3           // number: 1=низкий, 3=высокий
const isCompleted = false    // boolean
const assignedTo = 'Алексей' // string
const dueDate = '2024-03-15' // string (дата как текст)
const deletedAt = null       // null — задача не удалена

// typeof показывает тип каждого значения
console.log(typeof taskTitle)   // 'string'
console.log(typeof priority)    // 'number'
console.log(typeof isCompleted) // 'boolean'
console.log(typeof deletedAt)   // 'object' (ловушка! null — не объект)

// Шаблонный литерал собирает красивую строку
console.log(`[${isCompleted ? 'x' : ' '}] ${taskTitle} (P${priority})`)
// [ ] Сделать редизайн главной страницы (P3)

// Арифметика с числом работает нормально
console.log('Дней до дедлайна: ' + 7)   // 'Дней до дедлайна: 7'
console.log('Приоритет * 2: ' + priority * 2)  // 'Приоритет * 2: 6'

    Задание

    Ты создаёшь карточку товара для маркетплейса. Объяви переменные разных типов: название товара (string), цена (number), есть ли в наличии (boolean), скидка если есть (number или null). Выведи typeof каждой переменной и собери описание через шаблонный литерал.

    Подсказка

    null — это явное отсутствие значения: const discount = null. Шаблонный литерал: `текст ${переменная}`

    Загружаем среду выполнения...
    Загружаем AI-помощника...