Please help me understand why, after converting each element of an array in a loop, the result contains an element undefined

here http://jsfiddle.net/umEeG/
in the colorize method, I convert the array and output it via alert . The first value is oddly Undefined . I would like to understand where it came from

 (function($){ // -------------------------------------------------------------------------------------------------- options ---------- $.fn.kalininRainbowText = function(options) { var options = jQuery.extend({ colorArray: new Array('#974bff', '#ec11a1', 'navy', 'orange', '#ecb111', 'magenta', '#055d12', '#4bb1ff') },options); return this.each(function() { // ------------------------------------------------------------------------------------------ properties --------- var self = $(this); var colorArrayLength = options.colorArray.length, text = self.text(), textLength = text.length; init(); // ------------------------------------------------------------------------------------------ methods ------------ function init(){ var i, letterArray = new Array(); for(i = 0; i < textLength; i++){ letterArray[i] = text[i]; } colorize(i, letterArray); } function colorize(textLength, letterArray){ var i, newText; for(i = 0; i < textLength; i++){ q = letterArray[i]; letterArray[i] = '<span>' + q + '</span>'; newText += letterArray[i]; } console.log(newText); } function deColorize(){ } // ------------------------------------------------------------------------------------------ handlers ----------- function onClick(){ alert(1); } // ------------------------------------------------------------------------------------------ events ------------- self.on('click', onClick); }); }; })(jQuery);

    1 answer 1

    Initialize the variable correctly.
    Replace

     function colorize(textLength, letterArray){ var i, newText;

    On this:

     function colorize(textLength, letterArray){ var i, newText = '';

    And it will work like a clock.