Глобальная переменная в JS

Пишу JS для своего сайта, в этом деле начинающий, есть такая ситуация:

Есть событие, например "А", после которого становятся доступны другие события например "А-1"... При наступлении события А запускается функция, в ходе которой создается переменная data. При наступлении события А-1 и др., запускается функция которой нужно обработать переменную data которая была создана рание.

Моих знаний хватило только на то, чтоб сделать переменную глобальной, типа так:

let data;
$('#A').on('click', function (){... data = 'myData' ...});
$('#A-1').on('click', function (){... if(data){...} ...});
$('#A-2').on('click', function (){... if(data){...} ...});
...

Читал что создавать такие глобальные переменные - плохая практика, как решение - нашел что можно взять кусок кода в фигурные душки "{}", и теперь эта переменная глобальна только для этого блока:

{
let data;
$('#A').on('click', function (){... data = 'myData' ...});
$('#A-1').on('click', function (){... if(data){...} ...});
$('#A-2').on('click', function (){... if(data){...} ...});
...
}

Код работает как надо пока что, но правильное ли это решение? Какие есть другие решения?