Why the below code runs to 'undefined'?

Why the below code runs to 'undefined'?

< script >
var memberTable;
$ ( document ). ready ( function (){
memberTable = $ ( '#memberTable' ). DataTable ();

});
function addMemberModal (){
$ ( "#createForm" )[ 0 ]. reset ();
$ ( "#createForm" ). unbind ( 'submit' ). bind ( 'submit' , function (){
var form = $ ( this );
$ . ajax ({
url : form . attr ( 'action' ),
type : form . attr ( 'method' ),
data : form . serializeArray (), //converting form data into array and sending it to the server
dataType : 'json' ,
success : function (response){
console . log (response);
if ( response . success === true ){
$ ( ".messages" ). html ( '<div class="alert alert-success alert-dismissible" role="alert">' +
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
'<strong><span class="glyphicon glyphicon-ok-sign"></span></strong>' + response . messages +
'</div>' );

}
else {
if ( response . messages instanceof Array ){
$ . each ( response . messages , function (index, value){
alert (index);
//var id = $("#"+index);
//id
//.closest('.form-group')
//.addClass(value.length > 0 ? 'has-error' : 'has-success')
//.after(value);

});
}
else {
$ ( ".messages" ). html ( '<div class="alert alert-warning alert-dismissible" role="alert">' +
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
'<strong><span class="glyphicon glyphicon-question-sign"></span></strong>' + response . messages +
'</div>' );
}
}

}
});
return false ;
});
}
< / script >
</ body >
</ html >
W