Как функции в JavaScript возвращают значение?

Question

[Сева]

Суть: есть json файл, в котором хранятся данные о музыкальных альбома (жанр, исполнитель и т. д.)
Пытаюсь реализовать фильтрацию: если функция вызывается без параметров, забираем все данные, какие есть. Если указана группа и не указан жанр - те, в которых упоминается группа

function getData(band, genre) {
    var result = [];
    $.getJSON("data.json", function(data) {
        if (!band && !genre) { 
            result = data
        }
        if (band !== 'undefined' && !genre) {
            for (var i = 0; i < data.length; i++) {
                if (data[i].band == band) {
                    result.push(data[i]);
                }
            } 
        }   console.log(result)
    });
}

console.log(getData('Muse'));

Так - работает, в консоли виден нужный массив данных. Если вместо console.log(result) написать return result, возвращает undefined. Что такое? Полдня мучаюсь.

Comments

[Pavel Shvedov]

Напутствующий вопрос: а присмотритесь внимательно, разве return result относится к вашей функции getData()? Видно же, что этот return будет возвращаться из анонимной функции. А в консоль в конце Вы выводите именно то, что возвращаетgetData(), в этой функции вы ничего не вернули - вот Вам и undefined. Как ответили ниже - используйте колбэки.

Answer 1

[Денис Инешин]

В данном случае вам нужен не return. Присмотритесь внимательно, ваша функция запускает асинхронный ajax запрос, который выполняется какое-то время. А вы пытаетесь прочитать тот return что зашит в функцию по умолчанию (а он вернет undefined).

Чтобы решить вашу проблему вам нужен коллбэк, который будет вызван после загрузки данных, например так:

function getData(band, genre, callback) {
    var result = [];
    $.getJSON("data.json", function(data) {
        if (!band && !genre) { 
            result = data
        }
        if (band !== 'undefined' && !genre) {
            for (var i = 0; i < data.length; i++) {
                if (data[i].band == band) {
                    result.push(data[i]);
                }
            } 
        }

        callback(result); // вот тут мы передаем загруженное значение
    });

    return undefined; // а вот тут на самом деле расположен тот return, который функция вызовет синхронно
}

function readResult (result) {
    console.log(result);
}

getData('Muse', null, readResult)

Comments

[Максим Дунаевский]

Будучи новичком, постоянно ходил по этим граблям.