12. Типы данных: примитивы vs объекты

JavaScript: Мозги. Урок 2: Типы данных: примитивы vs объекты

Иллюстрация к уроку JavaScript оперирует данными. Чтобы эффективно работать с данными, важно понимать, как они хранятся и как с ними взаимодействовать. В этом уроке мы рассмотрим два основных типа данных в JavaScript: примитивы и объекты.

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

Примитивные типы данных представляют собой простые значения. Они хранятся непосредственно в переменной. JavaScript имеет следующие примитивные типы:

string (строка)
number (число)
boolean (логическое значение)
null (пустое значение)
undefined (неопределенное значение)
symbol (символ, появился в ES6)
bigint (большие числа, появился в ES2020)

Примеры:

let name = "Alice"; // string
let age = 30;       // number
let isStudent = false; // boolean
let empty = null;      // null
let notDefined;       // undefined

console.log(typeof name); // string
console.log(typeof age); // number
console.log(typeof isStudent); // boolean
console.log(typeof empty); // object (да, это историческая ошибка JavaScript)
console.log(typeof notDefined); // undefined

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

let a = 10;
let b = a;
b = 20;

console.log(a); // 10
console.log(b); // 20

Объекты

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

let person = {
  name: "Bob",
  age: 25,
  city: "New York"
};

console.log(person.name); // Bob
console.log(person.age);  // 25

let numbers = [1, 2, 3, 4, 5]; // Массив - это тоже объект!

console.log(numbers[0]); // 1

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

let obj1 = { value: 10 };
let obj2 = obj1;

obj2.value = 20;

console.log(obj1.value); // 20
console.log(obj2.value); // 20

Жизненный пример

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

<!DOCTYPE html>
<html>
<head>
  <title>Пример DOM</title>
</head>
<body>
  <div id="myDiv">Привет, мир!</div>

  <script>
    let myDiv = document.getElementById("myDiv"); // Получаем ссылку на элемент
    myDiv.textContent = "Новый текст!"; // Меняем текст элемента

    // Теперь текст элемента на странице изменится
  </script>
</body>
</html>

Во фреймворках React, Vue и Angular понимание разницы между примитивами и объектами необходимо для эффективной работы с состоянием (state) компонентов. Изменение состояния, которое является объектом, должно выполняться с использованием методов, которые создают новые объекты (например, с помощью оператора spread ...), чтобы React мог определить изменения и перерисовать компонент. Если вы напрямую измените объект состояния, React может не заметить изменения, что приведет к проблемам с отображением.

Ключевые моменты

Примитивные типы данных хранят простые значения непосредственно.
Объекты хранят сложные структуры данных и передаются по ссылке.
При присваивании примитива создается копия, при присваивании объекта создается ссылка.
Понимание разницы между примитивами и объектами критически важно для работы с DOM и фреймворками JavaScript.
typeof null возвращает object - это историческая особенность JavaScript, которую нужно помнить.