jQuery promiseのthenメソッドでエラーが出る

Question

以下のようなHTMLで検証したのですが通常エラーが出なかったのですが、getJSONを挟んでからエラーが出るようになってしまいました。
なぜでしょうか？

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>take</p>

<script type="text/javascript">
var title ;
var content ;

function syncGetJSON() {

    // var dfd = new $.Deferred
    // dfd.resolve("title","content");
    // return dfd.promise();
		// => エラーは出ない

    var dfd = new $.Deferred
    $.getJSON(`http://localhost:3000/api/alc.json?word=hazy`, function(data) {
      title = data.title
      content = data.content
      dfd.resolve(title,content);
      return dfd.promise();
    });
};

syncGetJSON().then(
  function(title,content) {

    console.log(title,content)
　}
);

</script>

エラー

Uncaught TypeError: Cannot read property 'then' of undefined
    at eval (eval at <anonymous> (index:72), <anonymous>:2:14)
    at index:101

Answer 1

$.getJSONからはreturnで戻り値をもっていますが
syncGetJSONからreturnしていないので
syncGetJSON()の戻り値自体がnull(?)でthenメソッドを持たないのでは？

Answer 2

return dfd.promise();の行は、function syncGetJSON()直下、$.getJSONの外側に書いてください。

このままでは、return dfd.promise();は$.getJSONに渡したコールバックからのreturnと解釈されるので、syncGetJSONの返り値はundefinedとなります。

---

なお、$.getJSON自体もjqXHRという、Promiseとして使える値を返すので、こんな書き方もできます。

$.getJSON(/*略*/).then(function(data){
  // dataを使って処理を行う
});