Why does the following 3 line code return 1?

Question

I'm reading a book on JavaScript called Eloquent JavaScript. The following is a snippet from the book:

"The two main ways to access properties in JavaScript are with a dot and with square brackets. Both value.x and value[x] access a property on value—but not necessarily the same property. The difference is in how x is interpreted. When using a dot, the word after the dot is the literal name of the property. When using square brackets, the expression between the brackets is evaluated to get the property name. Whereas value.x fetches the property of value named “x”, value[x] tries to evaluate the expression x and uses the result, converted to a string, as the property name."

While playing around with this bit of information, I happened to try this bit of code. It returns the value at the first index of the array. Why so?

arr = [1,2,3];
len = "length";
console.log(arr[len]);

// Output is "3" as expected

arr = [1,2,3];
console.log(arr.length);

//Output is "3" as expected

arr = [1,2,3];
len = "length";
console.log(arr[length]);

//Output is "1"

//The output I was expecting was an error or at least the value "3" since JS is a flexible language.

tony · Accepted Answer · 2019-07-16T12:02:29.000

5

Because the zeroth element of arr is 1

i.e. you probably meant to do this

arr[len]

length itself is zero, hence the you are really doing this arr[0]

length is window.length, which this link explains

https://www.w3schools.com/jsref/prop_win_length.asp

(Added later)

The confusion seems to be around length being the same as window.length. The links below may help with understanding that, although if you're a beginner I'd probably just accept it and return to it later

window.variableName

Difference between variable declaration syntaxes in Javascript (including global variables)?

edited Jul 16 '19 at 12:02

answered Jul 16 '19 at 11:52

tony

2,178
2
23
40

Yes I figured as soon as I posted the question that it was returning the 0th index value. But why is it returning that – tinuggunit Jul 16 '19 at 11:56
"length itself is zero" -- how did it get initialized to 0? – tinuggunit Jul 16 '19 at 11:58
I do explain that, because length (number of iframes on the window) is 0. – tony Jul 16 '19 at 11:58
You may not realise that when you type length it's actually shorthand for window.length – tony Jul 16 '19 at 11:59
Oh yes. Just read that. Wasn't aware of the concept of iframes. Thank you tony – tinuggunit Jul 16 '19 at 12:04

score 3 · Answer 2 · answered Jul 16 '19 at 11:56

You can't use variable names as strings.

length has a value of 0 (because it is the same as window.length, which actually represents the number of frames in the current document), so you're seeing the first element of the array:

let arr = [ 1, 2, 3 ];
console.log( length );      // 0
console.log( arr[length] ); // 1

score 2 · Answer 3 · answered Jul 16 '19 at 11:56

2

You take the length, which is a property of Window and returns the number of frames of the window.

console.log(length); // 0

answered Jul 16 '19 at 11:56

Nina Scholz

376,160
25
347
392

Why does the following 3 line code return 1?

3 Answers3