Javascript Array Concat not working. Why?

Question

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.

[JavaScript: How to join / combine two arrays to concatenate into one array?](https://stackoverflow.com/q/3975170/86967) — Brent Bradburn, Jun 13 '18 at 04:18
Very similar (for arrays instead of strings): ["concat" does not join JavaScript arrays together? - Stack Overflow](https://stackoverflow.com/questions/12810366/concat-does-not-join-javascript-arrays-together) — user202729, Mar 01 '21 at 00:00

score 322 · Accepted Answer · edited Oct 09 '12 at 15:40

322

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 );

edited Oct 09 '12 at 15:40

gen_Eric

214,658
40
293
332

answered Oct 09 '12 at 15:39

Alcides Queiroz

9,156
3
27
42

6

That did it. I would have thought that a concat method on an object would append to the object. But I guess that's not how it works. – Rafael Baptista Oct 09 '12 at 15:44
4

@Rafael: The `push` method does that, you could do `[].push.apply(this.refs, ref)` – Bergi Oct 09 '12 at 15:48

score 87 · Answer 2 · answered Oct 09 '12 at 15:42

87

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.

answered Oct 09 '12 at 15:42

Konstantin Dinev

32,797
13
71
95

10

Why, oh why, must I always forget this? – Jeff Lowery Nov 10 '19 at 00:20

mewc · Answer 3 · 2019-10-03T01:33:25.563

20

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);

edited Oct 03 '19 at 01:33

answered Mar 27 '19 at 01:40

mewc

956
11
21

score 14 · Answer 4 · answered Apr 15 '20 at 16:26

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);

score 2 · Answer 5 · edited Jul 14 '19 at 12:41

2

dataArray = dataArray.concat(array2)

edited Jul 14 '19 at 12:41

double-beep

4,567
13
30
40

answered Jul 14 '19 at 12:34

PRATHYUSH P

177
1
5

score 0 · Answer 6 · answered Aug 06 '21 at 22:41

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);
}

Javascript Array Concat not working. Why?

6 Answers6

Linked

Related