#js_in_actionВ кожній мові програмування існує безліч способів вистрілити собі в ногу, і JavaScript — не виключення. Буквально днями мені пригадався один з таких способів, який я навіть колись (дуже давно) використовував в продакшн-коді.Мова йде про оператор with.const user = { name: "Elvira" };with (user) { console.log(name); // Elvira} Якщо спробувати пояснити це явище швидко й просто, то нічого не вийде. Але я спробую. В першу чергу нам потрібно пригадати поняття scope chain. Це ланцюжок контекстів, у якому рушій шукає змінну, до якої ми звертаємось у коді.І зазвичай мова йде про лексичні скоупи, створені або функціями, або іншими блоками коду за допомогою фігурних дужок. А with просто ніби "пристібає" свій обʼєкт у ланцюжок пошуку імен, тому всередині блоку прості звертання можуть неочікувано резолвитись у властивості цього об’єкта.with втручається саме в звертання до простих імен. Усередині такого блоку JavaScript спочатку намагається трактувати name як властивість переданого об’єкта, і лише потім шукає це ім’я далі по scope chain. Звертання через явний об’єкт, як-от user.name, цієї проблеми не мають.const user = { name: "Elvira" };const name = "Oliver";with (user) { console.log(name);} У цьому прикладі буде виведено "Elvira", а не "Oliver", тому що with змушує JavaScript спочатку шукати name у user.Вам уже мало стати очевидним, що with має набагато більше недоліків, аніж сумнівних вигод. І це правильне відчуття. Він вносить сумʼяття на усіх рівнях: людині важко зрозуміти, що ж мав на увазі автор — чи локальну змінну, чи властивість, чи змінну глобальну; рушій не може оптимізувати такий код, бо не може безпечно припускати, до чого саме посилається кожне імʼя всередині with; лінтери й інші інструменти також можуть сумніватися в тому, до чого саме звертається просте ім’я всередині блоку.Яскравим прикладом є потенційне перекриття глобальних та локальних імен:const user = { name: "Elvira", console: true };with (user) { console.log(name);} Проблема тут полягає в тому, console буде резолвитись як user.console, а не як глобальний об’єкт console. Насправді, існує механізм обходу глобальних імен через [Symbol.unscopables], але розібратися з ним я залишаю моєму цікавому читачу.Хоч with і не вилучено зі специфікації ECMAScript повністю, його використання, мʼяко кажучи, не заохочується. В strict mode він заборонений, і лишається лише як частина зворотньої сумісності.Якщо вважати, що призначенням with було спрощення доступу до властивостей обʼєкту на письмі, то нині у нас є набагато кращі й надійніші способи спрощено звертатися до таких властивостей, наприклад, та сама деструктуризація:const user = { name: "Elvira"};const { name } = user;console.log(name); Попри добрі наміри, with виявився конструкцією, що втручається в один із фундаментальних механізмів JavaScript — пошук ідентифікаторів через scope chain. І через це привносить неочікувану невизначеність, через що код стає неочевидним і складним для аналізу.Що почитати:MDN: with statementMDN: JavaScript Guide — Working with objectsЩо почитати душнілам:ECMAScript: with statementECMAScript: Object Environment RecordsECMAScript: GetIdentifierReferenceP.S. Навіщо я взагалі вирішив розповісти про таку стародавню й дивну чудасію? Бо одним з моїх принципів є чергове складне речення: "треба знати не лише як правильно, але і як не правильно, щоб не писати неправильно, не знаючи, що це неправильно".@babichdev