Какого лисого!
 

Почему оно выводит: undefined ????

Очевидно потому что между var DATA; и alert(DATA); в переменную DATA ничего не записывалось.

Ещё напомню что ф-я reader.onload выполняется асинхронно, т.е. на следующей же строчке в alert(DATA); будет undefined, т.к. ещё не случилось событие onload. Алерт следует перенести вовнутрь ф-ии loaded.

Ответ: Какого лисого!
 

Всё верно АВТОМАТ сказал.
JavaScript - очень асинхронный. Не зря его классифицируют как event-driven language.
Суть в том что ты присваиваешь событие, которое будет вызвано когда-то потом, но не сразу. Т.к. операция на которую ты подписываешься произойдёт позже.
Это как событие click - когда пользователь нажмёт на кнопку. Тут тоже самое.

Также у тебя ошибка, которая редко ловиться но возможна в некоторых броузерах. Заключается она в том что ты должен подписываться на событие ДО того как указываешь важное данное для триггера этого события.
Например когда создаёшь новую картинку, перед тем как ты укажешь ей путь, ты должен присвоить событие. Либо если эта картинка уже в кеше броузера, некоторые броузеры вызовут событие onload в момент присвоения пути к картинке, а т.к. ты его ещё не назначил - оно не сработает.

Следственно присваивай событие до того как указываешь источник данных / путь к файлу.

Также используй console.log заместо alert.
В Firefox, Chrome и других нормальных броузерах есть консоль - в него и будет выводиться твои данные при вызове console.log.
Умный Inspector будет форматировать эти данные красиво, например json объекты там ваще круто выглядят.