Василий Банников

Подобные веб-приложения называются SPA (single page application).
Такие сейчас, в основном, делают при помощи одного из: Angular, React, Svelte, Vue. (Самые популярные - Angular и React. Самый наименее популярный - Svelte.)

В принципе, такое ты можешь сделать при помощи любой технологии - даже при помощи jquery, или вообще без сторонних библиотек.
Не уверен правда, сколько ты времени на это потратишь.
С другой стороны, если ты гениален, но плохо изучаешь новые вещи - может быть тебе проще будет навелосипедить всё с нуля.

Ничего особенного для связи не нужно.
Фронт скорее всего запускается через webpack-dev-server - в него можно через переменные среды прокинуть адрес бэкенда.
На проде фронт будет раздаваться, скорее всего, с nginx, так что никакой параметр прокинуть нельзя, зато можно обращаться к тому же домену, на котором сидит и фронт (делать запросы типа fetch("/api/something")) - и уже на стороне nginx разруливать.

axios шлёт json, а из консоли вы шлёте form-data.
Раз уж делаете запрос к локалхосту - значит у вас есть доступ к коду. Смотрите что сами ожидаете.

Babel и acorn
https://babeljs.io/docs/en/babel-parser
https://github.com/acornjs/acorn

Number.prototype.add = function(rhs) { return this + rhs; };
console.log((2).add(3)); // 5

А вот то как вы хотите (без скобочек вокруг чисел) невозможно в js

Быстрее ли поиск в Map чем поиск в обычном массиве?

Поиск по ключу - конечно да. В случае массива, в худшем случае, придётся перебрать весь массив, а в случае с Map и Object поиск будет за константное время, но чуть большее, чем в массиве по номеру элемента.

А разницы между Map и Object особой быть не должно, но я бы предпочёл Map.

Это классическая задача на конкурентный доступ к одному ресурсу.
Варианта три:
1. Дать возможность редактировать форму в реальном времени, как это делает miro и google docs, но тут возникает много других сложных проблем.
2. Ввести понятие "ревизии" в форму. И при сохранении клиент будет передавать номер ревизии, на которой основаны его изменения.
Если при этом на сервере ревизия уже новая - клиенту она передаётся, и он должен поправить у себя номер ревизии.
Так делает, например Azure Devops
3. Когда пользователь работает над формой - он накладывает блокировку на форму. Информация о блокировке сохраняется в БД, и другие пользователи не могут редактировать, пока на объекте стоит чужая блокировка.
Так делает 1С

f12, открываешь исходник, и расставляешь брекпоинты.
Ну или аналогично с vscode

`
        <div class="box">
  		${[0,1,2,3,4,5,6,7,8,9].map(i=> `<p class="show">Show ${i}</p>`).join('\n')}
        </div>
`

Хз что у вас не получилось, но в вопросе у вас кавычки неправильные.

document.querySelector('input[type="hidden"][name="r_name"]')