estoy obteniendo

SyntaxError no detectado: final inesperado de la entrada JSON

error en la consola cuando trato de analizar los datos JSON por encima de la instrucción if dentro del alcance de eventListner, pero también genera los datos esperados.

 const getData = (link, callback) => { const request = new XMLHttpRequest(); request.open('GET', link); request.send(); const err = `couldn't fetch data Error COde:${request.status}`; request.addEventListener('readystatechange', () => { const data = JSON.parse(request.responseText); if (request.readyState === 4 && request.status === 200) { callback(data, undefined) } else if (request.readyState === 4) callback(undefined, err); }); } const link = '/tom.json' getData(link, (err, data) => { if (err) console.log(err); else console.log(data); });

producción:

VM133780:1 Error de sintaxis no detectado: fin inesperado de la entrada JSON
en JSON. analizar ()
en XMLHttpRequest. (async.js:13:27)
(anónimo) @ async.js:13
XMLHttpRequest.send (asincrónico)
getData @ async.js: 9
(anónimo) @ async.js:28
async.js:29 (3) [{…}, {…}, {…}]

si coloco el JSON.parse(); dentro de la declaración if, no muestra ningún error y genera los datos como se esperaba `

 const getData = (link, callback) => { const request = new XMLHttpRequest(); request.open('GET', link); request.send(); request.addEventListener('readystatechange', () => { const err = `couldn't fetch data ErrorCOde:${request.status}`; if (request.readyState === 4 && request.status === 200) { const data = JSON.parse(request.responseText); callback(data, undefined) } else if (request.readyState === 4) callback(undefined, err); }); } const link = '/tom.json' getData(link, (err, data) => { if (err) console.log(err); else console.log(data); });

producción

asíncrono.js:30
(3) [{…}, {…}, {…}]

¿cual es la diferencia?