Borislav Hadzhiev
Last updated: Oct 20, 2021
Check out my new book
The "length is not a function" error occurs when we try to invoke the length
property like a function instead of accessing it using dot notation. To solve
the error, access the length
property without parenthesis, e.g.
arr.length
.
Here are some examples of how the error occurs.
// ⛔️ On Arrays const arr = [1, 2]; const r1 = arr.length(); // ⛔️ Using jQuery const boxes = $('.box'); const r2 = boxes.length(); // ⛔️ On strings const str = 'hello'; const r3 = str.length();
To solve the error, remove the parenthesis after the length property.
// ✅ On Arrays const arr = [1, 2]; const r1 = arr.length; // ✅ Using jQuery const boxes = $('.box'); const r2 = boxes.length; // ✅ On strings const str = 'hello'; const r3 = str.length;
Length is a property we can access on multiple types in JavaScript, e.g. - Array.length, String.length, NodeList.length.
length
property sets or returns the number of elements in the array.The length
property always returns an integer with a positive sign.
The property can also be set by the user.
Here are examples of truncating an array by setting it's length
property to a
lower value.
const arr = ['a', 'b', 'c']; arr.length = 1; console.log(arr); // 👉️ ['a'] arr.length = 0; console.log(arr); // 👉️ []
After setting the array's length to 1
, only the first element remained in the
array.
length
property to 0
empties the array.And here is an example of setting an array's length to a higher value.
const arr = ['a']; arr.length = 3; console.log(arr); // 👉️ ['a', , ] console.log(arr.length); // 👉️ 3
After we set the array's length to a higher value, the array got filled with empty elements.
All of the empty elements in the array are non-iterable.
That's because there are specialized methods that allow us to manipulate an array that work in a more predictable manner.