unexpected error occur when writing a simple line of code

Question

here is a function which makes a string into a specific code and other one, decodes that code into a readable string, they looks like this:(problem is in decoder function)

 var hr = [['A','B','C','D','E','F','G','H','I','J'],
          ['a','b','c','d','e','f','g','h','i','j'],
          ['K','L','M','N','O','P','Q','R','S','T'],
          ['k','l','m','n','o','p','q','r','s','t'],
          ['U','V','W','X','Y','Z','0','1','2','3'],
          ['4','5','6','7','8','9','!','@','#','$'],
          ['%','^','&','*','(',')','-','=','_','+'],
          ['[',']','{','}',':',';',',','/','.','<'],
          ['>','?',' ','u','v','w','x','y','z']];



function coder(str){
    str = str.replace(/[ ]+/g,'');
    str = str.split('');// now str is an Array
    var code ='';

    for(var i=0;i<str.length;i++){ // now suppose i here is A
    //console.log(str[i])
        for(var j=0; j<hr.length;j++){
            for(var k=0;k<hr[j].length;k++){
                if(hr[j][k] === str[i]){
                    code = code+'#'+String(j)+'@'+String(k)+'~';
                }// end of if statement
            }// end of k loop
        }// end of j loop
    }// end of i loop

    return code;
};// end of coder function

function decoder(code){
    code = code.split('~');
    console.log(code);
    var str = '',x,y;
    for(var i=0;i<code.length;i++){
        code[i] = code[i].replace('#','');
        code[i] = code[i].split('@');
        code[i][0] = parseInt(code[i][0]);code[i][1] = parseInt(code[i][1])
    };// end of i loop
    console.log(code);

    for(var j=0;j<code.length;j++){ // now suppose j  is right now [1,2]
        x = code[j][0];
        y = code[j][1];
        str = str + hr[x][y];
        /*console.log(x);console.log(y);
        console.log(hr[x][y])*/
    };  
    return str;
}// end of decode function

the problem is in decoder function. i dont see any thing which could provoke the javascript engine to throw an erroe but the truth is that it is throwing an error .

Problem & Error

The name of the Error is TypeError: Cannot read property 'NaN' of undefined. I don't see anything undefined here and as far as NaN is talked upone then x and y are defined.

you can see this by yourself.
decoder(coder('sanmveg')) gives an error

Debugging > thinking > confusion

i use debugging techniques to find out the problem and found that the error is in that line str=str+hr[x][y]. and so NaN is refered to x and y and undefined maybe to hr but all these are defined

i dont know why this is not working and giving me that error.

---

what is the mistake here? please provide a possible explanation over this to increase the quality of this post.
thanks for your constribution and response

Answer 1

This worked for me, haven't had given it a second look as to how to best clean it up yet: http://jsfiddle.net/w5ozg373/3/

where you have:

code = code.split('~');

add:

// add this piece
if(code[code.length -1].trim().length == 0) {
    code.pop();   
}

You're getting a token that's an empty string when you use split.

Maybe something like this to clean it up? :

code = code.filter(function(code_item) {
    return code_item.trim().length > 0; 
});

http://jsfiddle.net/w5ozg373/4/