Javascript Array Concat not working. Why?

So I've created this jqueryui widget. Its creates a div that I can stream errors into. The widget code looks like this:

$.widget('ui.miniErrorLog', {
   logStart: "<ul>",   // these next 4 elements are actually a bunch more complicated.
   logEnd:   "</ul>",
   errStart: "<li>",
   errEnd:   "</li>",
   content:  "",
   refs:     [],

   _create: function() { $(this.element).addClass( "ui-state-error" ).hide(); },

   clear: function() { 
      this.content = ""; 
      for ( var i in this.refs )
         $( this.refs[i] ).removeClass( "ui-state-error" );
      this.refs = [];
      $(this.element).empty().hide(); 
   }, 

   addError: function( msg, ref ) {
      this.content += this.errStart + msg + this.errEnd; 
      if ( ref ) {
         if ( ref instanceof Array )
            this.refs.concat( ref );
         else
            this.refs.push( ref );
         for ( var i in this.refs )
            $( this.refs[i] ).addClass( "ui-state-error" );
      }
      $(this.element).html( this.logStart + this.content + this.logEnd ).show();
   }, 

   hasError: function()
   {
      if ( this.refs.length )
         return true;
      return false;
   },
});

I can add error messages into it, and references to page elements that is will put into an error state. I use it to validate dialogs. In the "addError" method I can pass in a single id, or an array of ids, like this:

$( "#registerDialogError" ).miniErrorLog( 
   'addError', 
   "Your passwords don't match.", 
   [ "#registerDialogPassword1", "#registerDialogPassword2" ] );

But when I pass in an array of id's it doesn't work. The problem is in the following lines (i think):

if ( ref instanceof Array )
   this.refs.concat( ref );
else
   this.refs.push( ref );

Why doesn't that concat work. this.refs and ref are both arrays. So why doesn't the concat work?

Bonus: am I doing anything else dumb in this widget? It's my first one.

The concat method doesn't change the original array, you need to reassign it.

if ( ref instanceof Array )
   this.refs = this.refs.concat( ref );
else
   this.refs.push( ref );

Here is the reason why:

> Definition and Usage > > The concat() method is used to join two or more arrays. > > This method does not change the existing arrays, but returns a new > array, containing the values of the joined arrays.

You need to assign the result of the concatenation back in the array that you have.

To expand on Konstantin Dinev:

.concat() doesn't add to current object, so this will not work:

foo.bar.concat(otherArray);

This will:

foo.bar = foo.bar.concat(otherArray);

you have to re-assign value using = to array , that you want to get concated value

let array1=[1,2,3,4];
let array2=[5,6,7,8];

array1.concat(array2);
console.log('NOT WORK :  array1.concat(array2); =>',array1);

array1= array1.concat(array2);
console.log('WORKING :  array1 = array1.concat(array2); =>',array1);

dataArray = dataArray.concat(array2)

Just a note, if you really want to have a mutable array when using the concat function (by mutable I mean that it does not create a new array but mutate the existing one) you can reassign the concat function for that array instance. There is what I did when I needed this.

let myArray = [];

myArray.concat= function(  toAdd){
     if(Array.isArray(toAdd)){
        for(let node of toAdd)
             this.push(node);
      }else
        this.push(toAdd);
}