Solve - Cannot read property 'concat' of Undefined in JS

avatar

Borislav Hadzhiev

Wed Oct 20 20212 min read

banner

Photo by Dex Ezekiel

Solve - Cannot read property 'concat' of Undefined #

The "Cannot read property 'concat' of undefined" error occurs when the concat() method is called on an undefined value. To solve the error, make sure to only call the concat method on data types that implement it - arrays or strings.

cannot read property concat of unefined

Here is an example of how the error occurs.

index.js
const arr = undefined; // โ›”๏ธ Cannot read properties of undefined (reading 'concat') arr.concat(['b', 'c']);

Here are examples of how to provide a fallback value if the variable stores an undefined value and conditionally check if the stores value is of the correct type before calling the concat() method.

index.js
const fromDb = undefined; // โœ… Provide fallback empty array const arr = fromDb || []; // โœ… Using optional chaining ?. const e1 = arr?.concat(['b', 'c']); console.log(e1); // ๐Ÿ‘‰๏ธ ['b', 'c'] // โœ… Using Array.isArray if (Array.isArray(arr)) { const e2 = arr.concat(['b', 'c']); } else { console.log('arr is not an array'); } // โœ… Provide fallback in place const e3 = (arr || []).concat(['b', 'c']); console.log(e3); // ๐Ÿ‘‰๏ธ ['b', 'c']
Note that the concat() method can be used with both arrays and strings. The examples show how to avoid the error when used with arrays, but the concept applies to using strings as well.

The first example shows how to use the logical OR (||) operator to provide a fallback value when initializing the arr variable.

The logical OR (||) operator returns the value to the right if the value to the left is falsy (e.g. undefined).

The second example uses the optional chaining (?.) operator to avoid getting the error.

The optional chaining (?.) operator short-circuits if the reference is equal to undefined or null, otherwise it calls the concat method.

The next example uses the Array.isArray method to check if the value is an array before invoking the concat method.

The last example uses the logical OR (||) operator to provide a fallback value right before calling the concat method.

Here are examples that apply to using the concat method with strings.

index.js
const fromDb = undefined; const str = fromDb || ''; // โœ… Using optional chaining ?. const e1 = str?.concat('a', 'b'); console.log(e1); // ๐Ÿ‘‰๏ธ "ab" // โœ… Using typeof if (typeof str === 'string') { const e2 = str.concat('a', 'b'); } else { console.log('str is not a string'); } // โœ… Provide fallback in place const e3 = (str || '').concat('a', 'b'); console.log(e3); // ๐Ÿ‘‰๏ธ "ab"

These examples are pretty similar to the previous ones, however this time we work with strings, therefore we have to initialize the value to an empty string instead of an empty array.

Conclusion #

The "Cannot read property 'concat' of undefined" error occurs when calling the concat() method on an undefined value.

To solve the error, provide a fallback value of the correct type before calling the concat method.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee