What does this JS syntax mean and what is up with 'length'?

Question

So in another answer (How can I create a two dimensional array in JavaScript?) I saw the following

function createArray(length) {
var arr = new Array(length || 0),
    i = length;

if (arguments.length > 1) {
    var args = Array.prototype.slice.call(arguments, 1);
    while(i--) arr[length-1 - i] = createArray.apply(this, args);
}

return arr;
}

createArray();     // [] or new Array()

createArray(2);    // new Array(2)

createArray(3, 2); // [new Array(2),
                   //  new Array(2),
                   //  new Array(2)]

What does this mean:

var arr = new Array(length || 0),
    i = length;

The two parts I am confused about are length || 0 and the usage of the comma followed by i = length. For length || 0 I did some experiments and I am very confused. Here's a JSFiddle where I try something using the variable length and then the exact same thing with the variable blah and only get an error on the second one: https://jsfiddle.net/vrp0uhtL/4/ you will need to go into the debugger. I've only tested this on chrome.

For ,i = length is this just shorthand for declaring i also as a var on the same line?

Thanks

EDIT: Because I'm finding some strange things happening and to differentiate this question similar other ones: Why is it that:

var arr = new Array(length || 0)
  console.log(arr)

var arr2 = new Array(blah || 0)
  console.log(arr2)

Will produce an error only on the second one, when neither length or blah have been defined elsewhere; More specifically, why does length always have a value of 0 even when I haven't defined it (see JSFiddle above)

It means create an array with either length `length` or length 0, if `length` is falsy. falsy means an expression gets evaluated to `false`. This expression uses a mechanism called short circuiting — , Jun 28 '16 at 13:04
[`var` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var) — str, Jun 28 '16 at 13:05
Your edit is a different question (which is "[Why is there is a global variable called length defined in my browser?](https://developer.mozilla.org/en-US/docs/Web/API/Window/length)"), it's only indirectly related to the `length || 0` question. (Note that in your original code, `length` was a local variable in your function so unrelated to that new question anyway) — Quentin, Jun 28 '16 at 13:14
If you have a new question (note that there is a link in my previous comment, so you probably shouldn't need to ask one to get the answer to your new question) then you should make a new question. You probably shouldn't delete this one as it has been closed and has pointers to answers (as well as answers of its own). — Quentin, Jun 28 '16 at 13:18
@Quentin Oh my bad, somehow I didn't see the link there. Is length actually safe to modify? It seems a bit dodgy to me but it's not a reserved keyword. — Edward Kotarski, Jun 28 '16 at 13:20
It doesn't make any sense to modify it … and none of the code here tries to modify it. — Quentin, Jun 28 '16 at 13:25
@Quentin: Just to be sure, do you want to say, if I omit the explicitly declared *function parameter* named `length`, JavaScript will resort to the property `window.length` inside the function? — Holger, Jun 28 '16 at 14:44
Yes. If there isn't a more locally scoped variable with the same name, JavaScript will keep going up the scope chain until it reaches global variables, which are represented by properties of the global object, which is `window` in a browser. — Quentin, Jun 28 '16 at 14:45

score 1 · Answer 1 · answered Jun 28 '16 at 13:05

1

In JS, if you see || in an assignment operation like x = a || b it means that x will be set to the value a as long as a is defined, otherwise it will be set to b.

answered Jun 28 '16 at 13:05

m_callens

6,100
8
32
54

Not entirely correct. Being defined alone is not enough, `a` has to evaluate to "true". – str Jun 28 '16 at 13:07
`27 != true` and `0 != true`, however, the statement `var a = 27 || 0` sets the variable `a` to `27`. – m_callens Jun 28 '16 at 13:09
4

I did not say `a` has to *be* true, I said `a` has to *evaluate to* true. This code `var a = 0; var b = a || 1;` will set `b` to "1" although `a` is defined. – str Jun 28 '16 at 13:17

score 0 · Answer 2 · answered Jun 28 '16 at 13:05

new Array(length || 0) means that you create a new Array with the given parameter and if that is undefined it will be an array with zero length. The comma seperated variable declaration is just a way of defining your variables without using a new line for every variable.

Cruiser · Answer 3 · 2016-06-28T13:17:34.940

What's going on here is that the code in question is checking if there is a value passed into the length variable. If there is a value there it will use that value to set the length of a new array and the length var inside the function. If not, it will make a new array of 0.

The reason the function is doing this is because of the ability to send multiple arguments to this function. In the example you can see that you can call this function with one or more arguments: createArray(3), createArray(3,2). The || operator in the line

var arr = new Array(length || 0)

will check if you still have a value in length. If you've reached the end of the arguments, the last length will be undefined and a new array of 0 length will be made, which tells the function to stop making arrays.

In many programming languages you can declare multiple variables of the same type on the same line, separated by commas:

int a = 0, b = 1;
var text, input;

score 0 · Answer 4 · edited May 23 '17 at 11:55

0

length || 0 this expression is evaluate as length in case length variabile is defined otherwise 0 see explanation here short-circuit evaluation

var a, b,c explanation here comma operator

edited May 23 '17 at 11:55

Community

1
1

answered Jun 28 '16 at 13:07

Vladu Ionut

8,075
1
19
30

What does this JS syntax mean and what is up with 'length'?

4 Answers4