Javascript Length Undefined or Zero

Question

I am trying to write a Javascript function that returns a single element given the name. I found this question and modified the answer to use the ternary operator.

function getField(fieldName)
{
    var elements = document.getElementsByName(fieldName);

    return elements.length && elements.legth > 0 ? elements[0] : null;
}

My question is about the case where document.getElementsByName(fieldName) doesn't find any matches. Does it return undefined or 0? When I output elements.length as an alert message, the value in the alert is 0 but the console Chrome's DevTools says undefined. When I call console.log(elements.length) from the console, it ouputs 0 and undefined.

I know that my function handles either case, but what am I missing here? What is Javascript actually doing?

Thanks in advance for helping me understand this.

EDIT: Sorry for posting a picture instead of actual code and thanks for the syntax clarification.

Please [include code as text, not as images](http://idownvotedbecau.se/imageofcode). You likely want `elements && elements.length > 0`... — Heretic Monkey, Feb 18 '19 at 20:26
`alert(something)` returns undefined, as does `console.log()`. — dandavis, Feb 18 '19 at 20:27
The first `undefined` is the result that `alert` returns. `console.log` also returns `undefined`, but prints the value of `elements.length` first. See [Chrome/Firefox console.log always appends a line saying undefined](https://stackoverflow.com/q/14633968/215552) — Heretic Monkey, Feb 18 '19 at 20:27
`return elements[0] || null;` would be simpler/faster. you can even omit the `null`, since `undefined` is a better (more universal) `null` anyway. — dandavis, Feb 18 '19 at 20:28
How come `elements.length` doesn't return undefined or throw an exception? Does `getElementsByName()` return an empty object if no matches are found? — tbriggs707, Feb 18 '19 at 20:35

score 1 · Answer 1 · answered Feb 18 '19 at 20:34

elements.length is equal to 0 in your case.

Your understanding of console.log is misleading:

console.log(elements.length);
> elements.length is printed. It evaluates to 0, so 0 is printed
> console.log(elements.length). It evaluates to undefined, so undefined is printed.

score 1 · Accepted Answer · answered Feb 18 '19 at 20:48

As your question seems to be what document.getElementsByName is returning when it isn't found, it would be an empty NodeList, with a length of 0 (so not undefined)

Therefor, the easiest would be as dandavis suggested in his comment to simply return the first element of the nodelist. If it is empty, it will be undefined, if not it would the first element (not sure if that always matches your case though)

so your function might as well be

function getFieldAt(fieldName, index = 0) {
  return document.getElementsByName(fieldName)[index];
}

if you don't use optional parameters, you could change it to

function getFieldAt(fieldName, index) {
  return document.getElementsByName(fieldName)[index || 0];
}

Your misunderstanding about the devtools are thoroughly explained in the comments and the other answer as well :)

score 1 · Answer 3 · answered Feb 18 '19 at 21:08

no need to test length value simply use:

function getField(fieldName)
{
  let elements = document.getElementsByName(fieldName);
  return (elements[0]) ? elements[0] : null;
}

console.log( getField('div-A') );
console.log( getField('neverExist') );

<div name="div-A"> div-A 1 </div>
<div name="div-A"> div-A 2 </div>
<div name="div-A"> div-A 3 </div>

Javascript Length Undefined or Zero

3 Answers3