Как переместить значение из функции ниже по коду, сделать глобальным в js?

Question

[Иван]

У меня есть функция, которая динамически получает дату из html select

$('.fakelink').on('change', function () {
    //date = $(this).val();

    date = '2010-01-24';
    $('#ever').text(date);

    console.log(ever);  
    console.log(date); // Есть в консоли

});
    console.log(ever);  
    console.log(date); // Нет в консоли

(window.webpackJsonpFF = window.webpackJsonpFF || []).push([
[7], {
    120: function(e, a, t) {
        "use strict";
        t.r(a), t.d(a, "Cl", (function() {
            return r
        }));
        var d = t(50),
            n = t(8),
            i = t(0);
        t(127);
        let r = {
            viewYears: !0,
            addQToUrl: !0,
            init: function(e, a) {
                if (!page_description.DPdata) return !1;
                page_description.DPdata && page_description.DPdata.disableSelectDateBtns && (e = !1), r.viewYears = void 0 === e || e, r.addQToUrl = void 0 === a || a, r.dateWrap = i(".input-wrap--datepicker"), r.dateInput = r.dateWrap.find(".input-item"), r.dateDiv = i("#calendar"), r.dateDiv.length || (r.dateDiv = r.dateWrap.find(".calendar-holder")), page_description.DPdata.datebegin && page_description.DPdata.dateend ? (r.prv = page_description.DPdata.datebegin.getTime(), r.cur = page_description.DPdata.dateend.getTime()) : (r.prv = null, r.cur = null), r.selectflag = !1, r.disableRangeDate = !!page_description.DPdata.disableRangeDate && page_description.DPdata.disableRangeDate, r.minDateRange = r.validDate(date, "min"), r.maxDateRange = r.validDate(page_description.DPdata.maxdate, "max"), r.markedDays = !!page_description.DPdata.markedDays && page_description.DPdata.markedDays, r.disableRangeDate && (r.prv = i.datepicker.parseDate("dd.mm.yy", r.dateInput.val())), r.initDatepicker(), r.mutation(), r.bindMainEvents(), r.prv ? r.dateDiv.datepicker("setDate", new Date(r.prv)) : r.dateDiv.datepicker("setDate", new Date), r.dateDiv.datepicker("refresh"), r.dateDiv.hide()
            },
            validDate: function(e, a) {
                let t = new Date(e);
                return isNaN(t.getTime()) && ("min" === a ? t = new Date(1900, 1) : (t = new Date, t.setFullYear(t.getFullYear() + 1))), t
            },
            setDates: function(e, a) {
                r.prv = e, r.cur = a, r.dateDiv.datepicker("setDate", new Date(r.prv)), r.dateInput.val(i.datepicker.formatDate("dd.mm.yy", new Date(r.prv), {}) + " — " + i.datepicker.formatDate("dd.mm.yy", new Date(r.cur), {})), r.dateDiv.datepicker("refresh"), r.dateWrap.addClass("has-value"), Object(d.b)(!1, r.addQToUrl), r.dateDiv.hide()
            },
            getClassesForDate: function(e) {
                var a = [""];
                if (r.markedDays) {
                    const t = i.datepicker.formatDate("yy-mm-dd", e); - 1 !== r.markedDays.indexOf(t) && a.push("marked")
                } else r.prv && r.cur && (e.getTime() > r.prv && e.getTime() < r.cur && a.push("range"), e.getTime() != r.prv && e.getTime() != r.cur || (r.cur !== r.prv && a.push("has-range"), a.push("active")), e.getTime() == r.prv && a.push("first"), e.getTime() == r.cur && a.push("last"));
                return a.join(" ")
            },
            bindMainEvents: function() {
                i(".datepicker-opener, .show-datepicker").on("click", (function() {
                    r.toggleCalendar()
                })), r.dateInput.on("focus", (function() {
                    this.blur(), r.toggleCalendar()
                })), i(".input-wrap--datepicker").on("click", ".input-clear", (function() {
                    r.dateInput.val(""), r.dateWrap.removeClass("has-value"), Object(d.b)(!1, r.addQToUrl), r.dateInput.trigger("clearVal")
                }))
            },
            initDatepicker: function() {
                r.dateDiv.datepicker({
                    prevText: "",
                    nextText: "",
                    monthNames: ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"],
                    dayNamesMin: ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
                    dateFormat: "dd.mm.yy",
                    showOtherMonths: !0,
                    minDate: r.minDateRange,
                    maxDate: r.maxDateRange,
                    firstDay: 1,
                    changeMonth: !0,
                    changeYear: !0,
                    beforeShowDay: function(e) {
                        return [!0, r.getClassesForDate(e)]
                    },
                    onSelect: function(e, a) {
                        if (!r.selectflag || r.disableRangeDate) r.prv = new Date(a.selectedYear, a.selectedMonth, a.selectedDay).getTime(), r.cur = r.prv, r.selectflag = !0;
                        else {
                            var t = new Date(a.selectedYear, a.selectedMonth, a.selectedDay).getTime();
                            t < r.prv ? r.prv = t : r.cur = t, r.selectflag = !1
                        }
                        r.disableRangeDate ? (r.dateInput.val(i.datepicker.formatDate("dd.mm.yy", new Date(r.cur), {})), r.submit.trigger("click")) : r.dateInput.val(i.datepicker.formatDate("dd.mm.yy", new Date(r.prv), {}) + " — " + i.datepicker.formatDate("dd.mm.yy", new Date(r.cur), {}))
                    },
                    onAfterUpdate: function(e, a) {
                        r.bindButtons()
                    }
                })
            },
            mutation: function() {
                i.extend(i.datepicker, {
                    _generateHTML_original: i.datepicker._generateHTML,
                    _generateHTML: function(e) {
                        var a = i(this._generateHTML_original(e));
                        if (i(a[1]).addClass("datapicker-table"), r.viewYears) var t = i("<div/>").addClass("datapicker-btn").append(i('<button type="button">За этот год</button>').addClass("btn-cur-month btn btn-outline-blue btn-block")),
                            d = i("<div/>").addClass("datapicker-btn").append(i('<button type="button">За прошлый год</button>').addClass("btn-cur-year btn btn-outline-blue btn-block")),
                            n = i("<div/>").addClass("datapicker-btn").append(i('<button type="button">За все время</button>').addClass("btn-all-time btn btn-outline-blue btn-block"));
                        const p = page_description.DPdata.submitTxt || "Показать",
                            c = i("<div/>").addClass("datapicker-btn").append(i('<button type="button">' + p + "</button>").addClass("btn-apply btn btn-blue btn-block")),
                            s = i("<div/>").addClass("datapicker-drop__body").append(a[1]);
                        r.viewYears && s.append(t).append(d).append(n), r.cur > -1 && s.append(c), s.find("td > span").addClass("datapicker-day__wrap").wrap("<span class='datapicker-day unactive'></span>"), s.find("td > a").wrap("<span class='datapicker-day'></span>"), s.find("td > span > a").addClass("datapicker-day__wrap"), i(a[0]).addClass("datapicker-drop__header");
                        var o = r.dateDiv.datepicker("option", "monthNames")[e.selectedMonth],
                            l = i("<div>").addClass("datapicker-drop__month");
                        (r.minDateRange.getFullYear() < e.selectedYear || r.minDateRange.getFullYear() == e.selectedYear && r.minDateRange.getMonth() < e.selectedMonth) && l.append(i('<button type="button">prev</button>').addClass("datapicker-tool-btn prev")), l.append(i("<span>" + o + "</span>").addClass("datapicker-drop__val-text")), (r.maxDateRange.getFullYear() > e.selectedYear || r.maxDateRange.getFullYear() == e.selectedYear && r.maxDateRange.getMonth() > e.selectedMonth) && l.append(i('<button type="button">next</button>').addClass("datapicker-tool-btn next")), l.appendTo(a[0]);
                        var u = i("<div>").addClass("datapicker-drop__year");
                        return r.minDateRange.getFullYear() < e.selectedYear && u.append(i('<button type="button">prev</button>').addClass("datapicker-tool-btn prev")), u.append(i("<span>" + e.selectedYear + "</span>").addClass("datapicker-drop__val-text")), r.maxDateRange.getFullYear() > e.selectedYear && u.append(i('<button type="button">next</button>').addClass("datapicker-tool-btn next")), u.appendTo(a[0]), i("<span>").addClass("datapicker-drop__triangle").prop("outerHTML") + i(a[0]).prop("outerHTML") + s.prop("outerHTML")
                    }
                }), i.datepicker._defaults.onAfterUpdate = null;
                var e = i.datepicker._updateDatepicker;
                i.datepicker._updateDatepicker = function(a) {
                    e.call(this, a);
                    var t = this._get(a, "onAfterUpdate");
                    t && t.apply(a.input ? a.input[0] : null, [a.input ? a.input.val() : "", a])
                }
            }
        }
    }
}
]);

console.log(date) отображает текущую, выбранную в select дату и изменяет ее без обновления страницы при смене значение в select.

Если console.log(date) вынести за пределы функции, то в консоли пусто, получается, что date не передается ниже по коду, за пределы функции.

Как из функции отправить значение date далее по коду в строку:

r.minDateRange = r.validDate(date, "min"),

?

Как date в функции назначить глобально-асинхронно, чтобы не получить undefined?

Спасибо!

Comments

[Сергей delphinpro]

Про асинхронность в курсе?
А то сейчас начитаетесь советов ниже и побежите задавать следующий вопрос – почему в консоль выводится undefined...

[Иван]

Сергей delphinpro, нет, не в курсе :(

[Сергей delphinpro]

Иван, Надо узнавать.
https://developer.mozilla.org/ru/docs/Learn/JavaSc...
https://habr.com/ru/company/wrike/blog/302896/
ну и дальше по выдаче поисковика.

Answer 1

[Gennady S]

Это удивительный вопрос! Обычно наоборот, начинающие пытаются понять, почему переменная доступна вне функции.

var a = 0; // переменная, объявленная снаружи, всегда доступна вглубь
function foo () {
  b = 1; // b объявлена как window.b и доступна везде
  var c = 2; // переменная доступна внутри функции
  let d = 3; // переменная доступна внутри блока { }, где объявлена
}
// a == 0
// b == 1
// c == undefined
// d == undefined

А вообще, читайте документацию, mdn, например.

PS Не используйте глобальные переменные. Лучше найти другое решение, связать классы, функции в единую среду выполнения.

Answer 2

[Alice]

let date;
let ever;
$('.form-control').on('change', function() {
  date = $(this).val();
  ever = $('#ever').text(date);
});

console.log(date) + console.log(ever);

Answer 3

[Владислав Лысков]

объявляй их вне функции