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

avatar

Borislav Hadzhiev

Last updated: Jul 24, 2022

banner

Check out my new book

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 undefined and conditionally check if the 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. If you use strings, scroll down to the next section.

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

index.js
const fromDb = undefined; const arr = fromDb || []; console.log(arr); // 👉️ []

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.

index.js
const fromDb = undefined; const arr = fromDb || []; const e1 = arr?.concat(['b', 'c']); console.log(e1); // 👉️ ['b', 'c']
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 calling concat.

index.js
const fromDb = undefined; const arr = fromDb || []; if (Array.isArray(arr)) { const e2 = arr.concat(['b', 'c']); } else { console.log('arr is NOT an array'); }

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

index.js
const fromDb = undefined; const arr = fromDb || []; const e3 = (arr || []).concat(['b', 'c']); console.log(e3); // 👉️ ['b', 'c']

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 very similar to the previous ones.

However, they use the String.concat method, so 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.

Use the search field on my Home Page to filter through my more than 3,000 articles.