TypeError: Cannot read Property 'slice' of Undefined in JS

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

TypeError: Cannot read Property 'slice' of Undefined in JS #

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; // ⛔️ TypeError: Cannot read properties of undefined (reading 'slice') arr.slice(0);
To solve the error, provide a fallback 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 and 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).

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

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.

index.js
const fromDb = undefined; const arr = fromDb || []; const r1 = arr?.slice(0); const str = fromDb || ''; const r5 = str?.slice(0);

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

index.js
const fromDb = undefined; const arr = fromDb || []; const r2 = arr ? arr.slice(0) : []; const str = fromDb || ''; const r6 = str ? str.slice(0) : '';
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 the value you're calling the slice method on is of the correct type by using the Array.isArray method or the typeof operator.

index.js
const fromDb = undefined; const arr = fromDb || []; if (Array.isArray(arr)) { const r3 = arr.slice(0); } else { console.log('arr is not an array'); } const str = fromDb || ''; if (typeof str === 'string') { const r7 = str.slice(0); } else { console.log('str is not a string'); }

The Array.isArray method returns true if the provided value is an array, otherwise false is returned.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.