{"draftJsState":{"blocks":[{"data":{"image":{"id":"69deed46ece7c67ffa8119fb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"картинка взята с ya.ru","type":"atomic:image","key":"1b7in"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Призрак прошлого: Почему var остался в истории, а вы должны его забыть","type":"header-two","key":"104il"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы откроете любой учебник JavaScript десятилетней давности, вы увидите его. Он везде: в циклах, в функциях, в глобальном пространстве. var был королём переменных. Но времена изменились.","type":"unstyled","key":"fffau"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В 2015 году в мире JavaScript произошла революция. Появились let и const, и старый добрый var внезапно стал... опасным. Не потому, что он сломался. Он работает как работал. Просто мы поняли, что его поведение - это источник багов, а не фича.","type":"unstyled","key":"7muf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сегодня мы разберём, почему var - это анахронизм, какие проблемы он создаёт и почему вы должны использовать let и const всегда. И, конечно, посмотрим на legacy-код, где var всё ещё жив, чтобы понимать, что там происходит.","type":"unstyled","key":"fcp6e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 1. Что такое var? Краткий экскурс в историю","type":"header-two","key":"cfodm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var - это способ объявления переменных в JavaScript с момента создания языка в 1995 году. Он был единственным вариантом до появления ES6.","type":"unstyled","key":"311eq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"5b85d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var name = \"Анна\";\nvar age = 25;\nvar isActive = true;","type":"unstyled","key":"5ush0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всё просто. Но за этой простотой скрываются странности.","type":"unstyled","key":"4in20"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 2. Проблема №1: Отсутствие блочной области видимости","type":"header-two","key":"829hj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Самая большая проблема var: он не знает про блоки { }. Для него существует только функциональная область видимости.","type":"unstyled","key":"a2otc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1tv54"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":62,"style":"ITALIC"}],"text":"if (true) {\n var message = \"Привет\";\n}\nconsole.log(message); // \"Привет\" (вылезло из блока!)","type":"unstyled","key":"df34a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Почему это плохо? Переменная, которую вы создали внутри условия или цикла, \"вытекает\" наружу. Это приводит к неожиданным багам и конфликтам имён.","type":"unstyled","key":"7g7j5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"bu2v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":32,"style":"ITALIC"},{"length":28,"offset":84,"style":"ITALIC"}],"text":"for (var i = 0; i < 3; i++) {\n // i видна не только внутри цикла\n}\nconsole.log(i); // 3 (доступна после цикла!)","type":"unstyled","key":"5rc1m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"},{"length":1,"offset":15,"style":"BOLD"}],"text":"Сравнение с let:","type":"unstyled","key":"97qcv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"bpm92"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":62,"style":"ITALIC"}],"text":"if (true) {\n let message = \"Привет\";\n}\nconsole.log(message); // ReferenceError: message is not defined","type":"unstyled","key":"856o9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 3. Проблема №2: Hoisting (поднятие) с undefined","type":"header-two","key":"dm05l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переменные, объявленные через var, \"поднимаются\" в начало своей области видимости. Но не их значение, а само объявление.","type":"unstyled","key":"1t6fu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"d856q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":19,"style":"ITALIC"}],"text":"console.log(name); // undefined (не ошибка!)\nvar name = \"Анна\";","type":"unstyled","key":"f91ng"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Как это видит движок:","type":"unstyled","key":"57j3c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2phhf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":10,"style":"ITALIC"},{"length":12,"offset":51,"style":"ITALIC"},{"length":34,"offset":79,"style":"ITALIC"}],"text":"var name; // объявление поднято\nconsole.log(name); // undefined\nname = \"Анна\"; // инициализация осталась на месте","type":"unstyled","key":"3o84g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Почему это плохо? Вы можете использовать переменную до её объявления, получить undefined и гадать, почему код не работает. В больших функциях это особенно коварно.","type":"unstyled","key":"2u6ci"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"},{"length":22,"offset":15,"style":"BOLD"}],"text":"Сравнение с let (Temporal Dead Zone):","type":"unstyled","key":"emddb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4ok23"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":61,"offset":19,"style":"ITALIC"}],"text":"console.log(name); // ReferenceError: Cannot access 'name' before initialization\nlet name = \"Анна\";","type":"unstyled","key":"ao8r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":208,"style":"BOLD"}],"text":"let и const тоже поднимаются, но не инициализируются. До строки объявления переменная существует, но находится в \"временной мёртвой зоне\" (Temporal Dead Zone, TDZ). Любое обращение к ней вызывает ошибку. Это хорошо - ошибка лучше, чем undefined.","type":"unstyled","key":"64vqk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 4. Проблема №3: Повторное объявление","type":"header-two","key":"8ia3v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var позволяет объявить одну и ту же переменную несколько раз. Без ошибок. Без предупреждений.","type":"unstyled","key":"99mvq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"6v8lc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":39,"style":"ITALIC"},{"length":12,"offset":74,"style":"ITALIC"},{"length":9,"offset":107,"style":"ITALIC"}],"text":"var user = \"Анна\";\nvar user = \"Борис\"; // перезаписали\nvar user = \"Вика\"; // и ещё раз\n\nconsole.log(user); // \"Вика\"","type":"unstyled","key":"802ii"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Почему это плохо? Вы случайно можете перезаписать существующую переменную и даже не заметить этого. Особенно опасно в больших проектах.","type":"unstyled","key":"dm7l4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"},{"length":3,"offset":15,"style":"BOLD"},{"length":1,"offset":23,"style":"BOLD"}],"text":"Сравнение с let и const:","type":"unstyled","key":"8l9qj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"fv78t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":59,"offset":39,"style":"ITALIC"}],"text":"let user = \"Анна\";\nlet user = \"Борис\"; // SyntaxError: Identifier 'user' has already been declared","type":"unstyled","key":"48m8a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 5. Проблема №4: Глобальные переменные становятся свойствами window","type":"header-two","key":"ee9b4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В браузере глобальные переменные, объявленные через var, становятся свойствами глобального объекта window.","type":"unstyled","key":"fipik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"58hlk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":63,"style":"ITALIC"}],"text":"var globalVar = \"я глобальный\";\nconsole.log(window.globalVar); // \"я глобальный\"","type":"unstyled","key":"2u4v9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Почему это плохо? Вы можете случайно перезаписать существующее свойство window. Например, назвать переменную name или document.","type":"unstyled","key":"c68m5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7hdhf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":19,"style":"ITALIC"},{"length":44,"offset":74,"style":"ITALIC"}],"text":"var name = \"Анна\"; // перезаписали window.name!\nconsole.log(window.name); // \"Анна\" (а должна быть информация об окне)","type":"unstyled","key":"2ee21"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"let и const не добавляют свойства в window:","type":"unstyled","key":"99rjt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"9cflo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":63,"style":"ITALIC"}],"text":"let globalLet = \"я глобальный\";\nconsole.log(window.globalLet); // undefined","type":"unstyled","key":"612om"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 6. Проблема №5: Замыкания в циклах (классический баг)","type":"header-two","key":"7dqqb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Из-за функциональной области видимости var и отсутствия блочной области возникает классическая ошибка с замыканиями.","type":"unstyled","key":"aqrc9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"fvfho"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":76,"style":"ITALIC"}],"text":"for (var i = 0; i < 3; i++) {\n setTimeout(function() {\n console.log(i); // 3, 3, 3 (все три!)\n }, 100);\n}","type":"unstyled","key":"cvu4d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"},{"length":12,"offset":45,"style":"BOLD"}],"text":"Что произошло? Все три функции замыкаются на одну и ту же переменную i. К моменту вызова таймеров цикл уже завершился, i = 3.","type":"unstyled","key":"42d76"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"BOLD"},{"length":24,"offset":5,"style":"BOLD"}],"text":"С let всё работает правильно:","type":"unstyled","key":"75m5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"6mv0i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":76,"style":"ITALIC"}],"text":"for (let i = 0; i < 3; i++) {\n setTimeout(function() {\n console.log(i); // 0, 1, 2\n }, 100);\n}","type":"unstyled","key":"aqh6h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"let создаёт новую переменную для каждой итерации цикла.","type":"unstyled","key":"7t933"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 7. Исторический контекст: почему var такой странный?","type":"header-two","key":"cr1sm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript был создан за 10 дней. У Брендана Эйха не было времени на продумывание тонкостей. Он взял идеи из разных языков:","type":"unstyled","key":"9ds4o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Функциональная область видимости - как в C (где блоки не создают новую область)","type":"unordered-list-item","key":"2f8am"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Hoisting - особенность реализации, которая стала спецификацией","type":"unordered-list-item","key":"4i2ev"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отсутствие блочной области - потому что в 1995 году это казалось ненужным","type":"unordered-list-item","key":"6sara"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В 2015 году, с выходом ES6, ошибки прошлого исправили, добавив let и const. Но var оставили для обратной совместимости. Сломанный код 90-х годов всё ещё работает.","type":"unstyled","key":"eu68"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 8. var в строгом режиме (\"use strict\")","type":"header-two","key":"9f8uf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строгий режим не исправляет основные проблемы var, но добавляет некоторые ограничения.","type":"unstyled","key":"a2ajs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"9m81h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":15,"style":"ITALIC"},{"length":41,"offset":73,"style":"ITALIC"},{"length":49,"offset":116,"style":"ITALIC"},{"length":53,"offset":200,"style":"ITALIC"}],"text":"\"use strict\";\n\n// Всё ещё работает (к сожалению)\nvar x = 10;\nvar x = 20; // повторное объявление всё ещё разрешено\n\n// Но это больше не создаёт глобальную переменную\nfunction test() {\n mistyped = 5; // ReferenceError (раньше создало бы window.mistyped)\n}","type":"unstyled","key":"5f9jq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 9. Когда var всё ещё может быть полезен? (спойлер: почти никогда)","type":"header-two","key":"e0a74"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сценарий 1: Поддержка очень старых браузеров (IE10 и ниже)","type":"header-three","key":"4dlf5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вам нужно поддерживать Internet Explorer 10 (который не поддерживает let и const), у вас нет выбора. Но таких проекстов становится всё меньше.","type":"unstyled","key":"88r5i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сценарий 2: Консоль браузера (для быстрых экспериментов)","type":"header-three","key":"csnim"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В консоли браузера var иногда удобнее, потому что переменные, объявленные через let в консоли, ведут себя странно при повторном вводе. Но это крайне специфичный случай.","type":"unstyled","key":"7loam"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сценарий 3: Чтение старого кода","type":"header-three","key":"nf49"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вам нужно понимать var, потому что вы будете встречать его в legacy-коде. Но не использовать.","type":"unstyled","key":"613mu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 10. Антипаттерны с var, которые нужно знать","type":"header-two","key":"1l054"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"10.1 Случайное создание глобальной переменной","type":"header-three","key":"2mu4s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ed043"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":20,"style":"ITALIC"},{"length":22,"offset":134,"style":"ITALIC"}],"text":"function oops() {\n // забыли var/let/const\n accidentalGlobal = \"я стал глобальным\";\n}\noops();\nconsole.log(window.accidentalGlobal); // \"я стал глобальным\"","type":"unstyled","key":"1tn53"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"10.2 Переменная, переопределённая до объявления","type":"header-three","key":"4rbhp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1erai"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":41,"style":"ITALIC"},{"length":5,"offset":99,"style":"ITALIC"}],"text":"function confusing() {\n console.log(x); // undefined (не ошибка!)\n var x = 10;\n console.log(x); // 10\n}","type":"unstyled","key":"9eg09"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"10.3 Переменная, \"вытекающая\" из цикла","type":"header-three","key":"fpd3s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"748ce"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":78,"style":"ITALIC"},{"length":42,"offset":105,"style":"ITALIC"},{"length":47,"offset":150,"style":"ITALIC"}],"text":"function processItems(items) {\n for (var i = 0; i < items.length; i++) {\n // обрабатываем item\n }\n // i всё ещё доступна и равна items.length\n // можно случайно использовать i в другом месте\n}","type":"unstyled","key":"9olqa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 11. Миграция с var на let и const","type":"header-two","key":"17dp9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пошаговая стратегия","type":"header-three","key":"fskde"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"},{"length":4,"offset":16,"style":"BOLD"}],"text":"Замените все var на let - это безопасно в 99% случаев.","type":"ordered-list-item","key":"78vp1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":63,"offset":0,"style":"BOLD"}],"text":"Найдите переменные, которые никогда не меняются, и замените на const.","type":"ordered-list-item","key":"ac622"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":51,"offset":0,"style":"BOLD"}],"text":"Проверьте код на наличие проблем с блочной областью - особенно циклы и условия.","type":"ordered-list-item","key":"dcg06"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":0,"style":"BOLD"}],"text":"Убедитесь, что нет повторных объявлений - let их запрещает.","type":"ordered-list-item","key":"7g5fa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"hoon"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"ITALIC"},{"length":8,"offset":151,"style":"ITALIC"}],"text":"// До\nvar name = \"Анна\";\nvar age = 25;\nvar isActive = true;\n\nfor (var i = 0; i < 5; i++) {\n setTimeout(function() {\n console.log(i);\n }, 100);\n}\n\n// После\nconst name = \"Анна\";\nlet age = 25;\nlet isActive = true;\n\nfor (let i = 0; i < 5; i++) {\n setTimeout(() => console.log(i), 100);\n}","type":"unstyled","key":"1vi8k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 12. Сравнительная таблица: var vs let vs const","type":"header-two","key":"amsen"},{"data":{"image":{"id":"69deedc0bdc47c63ae90ad3a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6r4k8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"63jup"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 13. Реальные примеры из жизни","type":"header-two","key":"bh3fa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"13.1 Баг из-за всплытия переменной","type":"header-three","key":"250kj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"968bc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"ITALIC"},{"length":39,"offset":211,"style":"ITALIC"},{"length":23,"offset":335,"style":"ITALIC"},{"length":35,"offset":555,"style":"ITALIC"},{"length":60,"offset":593,"style":"ITALIC"}],"text":"// Плохо (с var)\nfunction calculatePrice(items) {\n var total = 0;\n \n for (var i = 0; i < items.length; i++) {\n var discount = items[i].discount || 0;\n total += items[i].price * (1 - discount);\n }\n \n // Ошибка: i и discount доступны здесь!\n console.log(`Обработано ${i} товаров со скидкой ${discount}`);\n return total;\n}\n\n// Хорошо (с let/const)\nfunction calculatePrice(items) {\n let total = 0;\n \n for (let i = 0; i < items.length; i++) {\n const discount = items[i].discount || 0;\n total += items[i].price * (1 - discount);\n }\n \n // Ошибка! i и discount не доступны\n // console.log(`Обработано ${i} товаров`); // ReferenceError\n return total;\n}","type":"unstyled","key":"fou2q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"13.2 Проблема с асинхронностью в цикле","type":"header-three","key":"cf6j9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"17jdk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"ITALIC"},{"length":25,"offset":101,"style":"ITALIC"},{"length":60,"offset":144,"style":"ITALIC"},{"length":17,"offset":206,"style":"ITALIC"},{"length":16,"offset":308,"style":"ITALIC"}],"text":"// Плохо (с var)\nfor (var i = 1; i <= 5; i++) {\n setTimeout(() => {\n console.log(`Запрос ${i}`); // все 6 (или 5? зависит)\n }, i * 100);\n}\n// Вывод: 6, 6, 6, 6, 6 (или 5,5,5,5,5 - зависит от условий)\n\n// Хорошо (с let)\nfor (let i = 1; i <= 5; i++) {\n setTimeout(() => {\n console.log(`Запрос ${i}`); // 1, 2, 3, 4, 5\n }, i * 100);\n}","type":"unstyled","key":"d1fro"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"13.3 Случайная перезапись глобальной переменной","type":"header-three","key":"8je12"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ev19t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"ITALIC"},{"length":29,"offset":36,"style":"ITALIC"},{"length":19,"offset":95,"style":"ITALIC"},{"length":37,"offset":133,"style":"ITALIC"},{"length":10,"offset":208,"style":"ITALIC"},{"length":23,"offset":220,"style":"ITALIC"},{"length":23,"offset":267,"style":"ITALIC"},{"length":23,"offset":344,"style":"ITALIC"},{"length":27,"offset":370,"style":"ITALIC"},{"length":9,"offset":439,"style":"ITALIC"}],"text":"// Плохо (с var)\nvar name = \"Анна\"; // перезаписывает window.name\n\nfunction saveUserName() {\n // ... какой-то код\n name = \"Борис\"; // ой, изменили глобальную переменную\n}\nsaveUserName();\nconsole.log(name); // \"Борис\"\n\n// Хорошо (с let/const)\nlet userName = \"Анна\"; // не попадает в window\n\nfunction saveUserName() {\n let userName = \"Борис\"; // локальная переменная\n // глобальная не изменилась\n}\nsaveUserName();\nconsole.log(userName); // \"Анна\"","type":"unstyled","key":"6kc7o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 14. Инструменты для борьбы с var","type":"header-two","key":"bscpa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ESLint: правило no-var","type":"header-three","key":"fhgpk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ESLint может запретить использование var в вашем коде.","type":"unstyled","key":"4scp0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"json","type":"unstyled","key":"e6g7i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{\n \"rules\": {\n \"no-var\": \"error\"\n }\n}","type":"unstyled","key":"9optk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь любой var будет считаться ошибкой.","type":"unstyled","key":"d5smt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Автоматическая миграция","type":"header-three","key":"78e8g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"bash","type":"unstyled","key":"4d5sj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":69,"offset":0,"style":"ITALIC"}],"text":"# Используйте eslint --fix для автоматической замены var на let/const\nnpx eslint --fix . --rule 'no-var: error'","type":"unstyled","key":"c80o7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но проверьте результат - иногда var нужно заменить на const, а не на let.","type":"unstyled","key":"c4g3g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итог: Манифест современного разработчика","type":"header-two","key":"eu1gt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"},{"length":1,"offset":12,"style":"BOLD"}],"text":"Забудьте var. В современном JavaScript ему нет места.","type":"ordered-list-item","key":"54ho6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"},{"length":13,"offset":17,"style":"BOLD"}],"text":"Используйте const по умолчанию - если переменная не будет меняться.","type":"ordered-list-item","key":"49nsn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"},{"length":55,"offset":15,"style":"BOLD"}],"text":"Используйте let только когда переменная действительно должна меняться.","type":"ordered-list-item","key":"ec5gj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Никогда не используйте var - даже если кажется, что \"так проще\".","type":"ordered-list-item","key":"3voiv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"},{"length":25,"offset":13,"style":"BOLD"}],"text":"Понимайте var, чтобы читать старый код - но не пишите на нём.","type":"ordered-list-item","key":"ms73"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Финальный тест (что выведет?):","type":"unstyled","key":"3io6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"c8ld4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var a = 1;\nvar a = 2;\nconsole.log(a);\n\nif (true) {\n var b = 3;\n}\nconsole.log(b);\n\nfor (var i = 0; i < 3; i++) {\n setTimeout(() => console.log(i), 0);\n}\nconsole.log(i);","type":"unstyled","key":"bd7k0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Ответы: 2, 3, 3, 3, 3, 3","type":"unstyled","key":"ca3oh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var - это исторический артефакт. Как зазубренный край на старом стекле - он был нужен когда-то, но сейчас только режет руки. Современный JavaScript дал нам let и const. Они предсказуемы, безопасны и делают код понятнее. Используйте их. Всегда. А если увидите var в чужом коде - знайте, что это призрак прошлого, который скоро исчезнет навсегда.","type":"unstyled","key":"3t268"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"23okv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bq8o5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"BkhYQVJjFXjml8sDciBh"}],"entityMap":{}},"mentions":[]}