Solve - Cannot read Property 'slice' of Undefined in JS

avatar

Borislav Hadzhiev

Wed Oct 20 20212 min read

banner

Photo by Jad Limcaco

Solve - Cannot read Property 'slice' of Undefined #

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

cannot read property slice of undefined

Here is an example of how the error occurs.

index.js
const arr = undefined; // โ›”๏ธ Cannot read properties of undefined (reading 'slice') arr.slice(0);

Instead, provide a backup value if the variable stores a falsy value or conditionally check if the value is of the correct type.

Here are examples of how to solve the error when using the slice() method with arrays or strings.

index.js
// ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ // ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ Using ARRAYS ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ // ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ const fromDb = undefined; // โœ… Provide empty array fallback value const arr = fromDb || []; // โœ… Using optional chaining const r1 = arr?.slice(0); // โœ… Using ternary operator const r2 = arr ? arr.slice(0) : []; // โœ… Using Array.isArray if (Array.isArray(arr)) { const r3 = arr.slice(0); } else { console.log('arr is not an array'); } // โœ… Provide fallback in place const r4 = (arr || []).slice(0);

Here are the same examples, applied to using the slice method with strings.

index.js
// ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ // ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ Using STRINGS ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ // ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ const fromDb = undefined; const str = fromDb || ''; // โœ… Using optional chaining const r5 = str?.slice(0); // โœ… Using ternary operator const r6 = str ? str.slice(0) : ''; // โœ… Using typeof if (typeof str === 'string') { const r7 = str.slice(0); } else { console.log('str is not a string'); } // โœ… Provide fallback in place const r8 = (str || '').slice(0);

We used the logical OR (||) operator to provide a fallback value if the value to the left of the operator is falsy (e.g. undefined).

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

The next example shows how to use the optional chaining (?.) operator, which enables us to short-circuit if the reference is equal to undefined or null.

You can also use a ternary operator which is very similar to an if/else statement.

If the value to the left of the question mark is truthy, the ternary operator returns the value before the colon, otherwise the value after the colon is returned.

You can also check if value you're calling the slice method on is of the correct type, using the Array.isArray method or the typeof operator.

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