0

What is meant by arr[arr.length]. I mean what it really means or what it really does, I cannot understand the logic of how it works. Can anybody explain?

Cjmarkham
  • 9,484
  • 5
  • 48
  • 81
Ali Hassan
  • 11
  • 3
    `arr[arr.length]` is the element after the last element. You can use it to add an element similar to `arr.push`. – jabaa Oct 19 '21 at 21:10
  • 2
    see: [array.push(element) vs array\[array.length\] = element](https://stackoverflow.com/questions/16952605/array-pushelement-vs-arrayarray-length-element) – pilchard Oct 19 '21 at 21:19

4 Answers4

2

arr.length means the length of the array that spans from index 0 to arr.length - 1.

For instance if you got arr = ["a", "b", "c"], arr.length is 3.

arr[0] is "a", arr[1] is "b" and arr[2] is "c".

arr[3] does not exist, yet. but if you do arr[arr.length] = "d", you obtain ["a", "b", "c", "d"].

This is an odd construction and usually, one should simply write arr.push("d").

const arr = ["a", "b", "c"];
console.log(arr.length, arr[0], arr[1], arr[2], arr[3]);
arr[arr.length] = "d";
console.log(arr);
arr.push("e");
console.log(arr);
Cyrille Pontvieux
  • 2,356
  • 1
  • 21
  • 29
  • This answer doesn't describe the advantages of `arr[arr.length]`. Why would someone use `arr[arr.length]`? – jabaa Oct 19 '21 at 21:20
  • There is not advantage. This is old code/old habit – Cyrille Pontvieux Oct 19 '21 at 21:22
  • 1
    Of course there is an advantage. `arr[arr.length] = b` returns `b`. You can write `() => arr[arr.length] = b` in one statement, e.g. for a random generator with memory `() => numbers[numbers.length] = Math.random()` – jabaa Oct 19 '21 at 21:23
  • So if you had the answer, why asking in comments and not propose an edit of the answer? – Cyrille Pontvieux Oct 19 '21 at 22:34
  • People should think about their answer and invest some time. I didn't have the time. – jabaa Oct 20 '21 at 08:05
1

This statement gets the index of the last index of the array plus one. It is used to append items to an array. Equivalent to array.push().

var fruits = ["apple", "orange", "banana", "pear"];
// appends grapes to the array
fruits[fruits.length] = "grapes";
console.log(fruits);

For further reading, check out MDN's page on array methods.

unrealapex
  • 578
  • 9
  • 23
  • `array.push()` appends a value to an array. – unrealapex Oct 19 '21 at 21:16
  • 1
    This answer doesn't describe the advantages of `arr[arr.length]`. Why would someone use `arr[arr.length]`? – jabaa Oct 19 '21 at 21:21
  • @jabaa I'm not sure if there are any advantages or disadvantages to using this method as opposed to `array.push()`. I'll do some research and try to figure it out. – unrealapex Oct 19 '21 at 21:26
  • 1
    Simple isn't always best – Cjmarkham Oct 19 '21 at 21:26
  • 1
    `arr[arr.length] = b` returns `b`. You can write `() => arr[arr.length] = b` in one statement, e.g. for a random generator with memory `() => numbers[numbers.length] = Math.random()` – jabaa Oct 19 '21 at 21:27
  • @jabaa You can just as easily write the number generator like this: `() => numbers[numbers.push(Math.random()) - 1]` so I'm not sure that's any different. – ᴓᴓᴓ Oct 19 '21 at 23:25
0

arr.length is the length of the array.

arr[arr.length] is accessing by index the array length (out of bounds as length starts at 1, not index 0).

example:

const test = [1,2,3]
test[test.length]
undefined
test[test.length-1]
3
ᴓᴓᴓ
  • 1,178
  • 1
  • 7
  • 18
  • This answer doesn't describe the advantages of `arr[arr.length]`. Why would someone use `arr[arr.length]`? – jabaa Oct 19 '21 at 21:20
  • I see literally no good reason to use it in JavaScript, but I'm happy to hear some if there are. – ᴓᴓᴓ Oct 19 '21 at 23:14
  • I prefer `() => numbers[numbers.length] = Math.random()` over `() => numbers[numbers.push(Math.random()) - 1]` but obviously it's just an opinion. I see no good reason to force `push` and use the returned length to access the array instead of directly using the value. For me it looks like writing bad code to force "good habits" – jabaa Oct 20 '21 at 08:21
  • I think the fact that it is accessing an out of bounds index is reason enough, but I also find the push more readable because it always and only means adding a new item to the array, whereas reassigning an index is typically an update rather than insert operation. We're completely off topic from the original question, though. :) Also, this was linked under the original question if you're curious about efficiency, although the difference is trivial: https://stackoverflow.com/questions/16952605/array-pushelement-vs-arrayarray-length-element – ᴓᴓᴓ Oct 20 '21 at 15:46
0

It just requests specific index of the array, Use case: Not very elegant way of adding new element to the array, like:

arr[arr.length] = newVal
arr.push(newVal)
arr = [...arr, newVal]
Maciej Kwas
  • 6,169
  • 2
  • 27
  • 51
  • This answer doesn't describe the advantages of `arr[arr.length]`. Why would someone use `arr[arr.length]`? – jabaa Oct 19 '21 at 21:21
  • 1
    @jabaa why u think there is any advantage at all? I mean- what's special about accessing an array by index? Getting anything more than that out of it, like one line hacks are just anti-patterns that makes codebase unsustainable. – Maciej Kwas Oct 19 '21 at 21:50
  • Elegant is an opinion. For me something like `() => numbers[numbers.length] = Math.random()` is much more elegant than `() => { numbers.push(Math.random); return numbes[numbers.length - 1]; }` – jabaa Oct 20 '21 at 08:07
  • @jabaa but you need to store numbers somewhere anyway, right? So even if this code looks still super ugly, it is way more clear what it does: `() => array.push(Math.random()) && array.at(-1)`, but anyway, as I said, if you plan to use it in any bigger project, then again: this code is unsustainable – Maciej Kwas Oct 20 '21 at 09:16
  • `arr.push(newVal)` is more sustainable than `arr[arr.length] = newVal` because why exactly? Elegance is an opinion. What advantages do you have with `arr.push(newVal)`? – jabaa Oct 20 '21 at 09:27
  • @jabaa no advantage at all. However if you learn to do something in ugly way, you might eventually end up with: `() => aParticularlyLongAndObnoxiousNameForIllustrativePurposes[aParticularlyLongAndObnoxiousNameForIllustrativePurposes.length] = newVal` – Maciej Kwas Oct 20 '21 at 10:48
  • And `() => aParticularlyLongAndObnoxiousNameForIllustrativePurposes.push(Math.random()) && aParticularlyLongAndObnoxiousNameForIllustrativePurposes.at(-1)` is less ugly for you? – jabaa Oct 20 '21 at 11:02