Javascript get value from array at index while avoiding undefined if index does not exist?

Question

Coming from Python, it is very odd for me to see this JavaScript:

a = []
b = a[0] 
b === undefined // returns true

In Python a[0] would throw an index error, and would prevent you from continuing and potentially running into more errors in the future. B would never be set to undefined.

In Python I could do something like:

a = [1, 2, 3]
try:
    b = a[5]
except IndexError:
    print('Index out of range')

b could never be set to undefined, which would prevent potential weird things happening later on. What is the best way for me to handle this in JavaScript? I tend to want to try something like this:

a = []
b = a[0] || <something other than undefined>

In the case that a is supposed to be a list of objects it could be:

a = []
b = a[0] || {} // set b to empty object instead of undefined

I think a common way of handling this in JavaScript is handling it further down the line:

a = []
b = a[0]

if (b) {
    // do something if b is defined
}

// or 

if (!b) {
    // do something if b is undefined 
}

In JavaScript is there a best or common practice for avoiding setting something to undefined? And in this specific case of accessing an array what is the best way to avoid setting something to undefined?

const b = a[0] || <something other than undefined> is perfectly fine and is often done. IMO it's the preferable terse way, to avoid reassigning b. (unnecessary reassignment is often frowned upon) — CertainPerformance
– CertainPerformance, Commented Jul 13, 2018 at 6:23

Nina Scholz · Accepted Answer · 2018-07-13 06:24:19Z

4

You could use in operator operator, which check if a property exists in an object/array with a conditional (ternary) operator ?: for either the value or some default value.

This approach saves falsy values as well.

const b = 0 in aa ? a[0] : <something other than undefined>;

answered Jul 13, 2018 at 6:24

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

apokryfos · Accepted Answer · 2018-07-13 07:46:24Z

What you are seeing is basically a design decision. It's just how JavaScript works. For example PHP is similar in the sense that accessing a non existing index is a warning rather than a hard error. There's probably other language examples out there that behave this way.

To get around this:

A common way is indeed using b = a[0] || "default" however beware of the behaviour with falsy but not undefined values as for example:

var myarray = [ 0, null, "" ];

var a = myarray[0] || "default[0]";
var b = myarray[1] || "default[1]";
var c = myarray[2] || "default[2]";
var d = myarray[3] || "default[3]";

console.log(a, b, c, d);

If you want to strictly check for undefined while allowing falsy values to be used do be explicit:

    var myarray = [ 0, null, "" ];

    var a = myarray[0] !== undefined ? myarray[0] : "default[0]";
    var b = myarray[1] !== undefined ? myarray[1] : "default[1]";
    var c = myarray[2] !== undefined ? myarray[2] : "default[2]";
    var d = myarray[3] !== undefined ? myarray[3] : "default[3]";

    console.log(a, b, c, d);

Ashlesh · Accepted Answer · 2018-07-13 06:47:42Z

The JavaScript Execution is little different from other programming languages. JavaScript doesn't create intermediate code which languages like C, Java creates (eg- byte code). The first phase in Javascript is the declaration phase where variables are defined in their respective scope. The default scope is the global scope. Each function creates its own scope in javascript.

var a = 10;

So in 1st phase it will define 'a' in global scope. Note that its not initialising it with value 10. The next phase is the initialisation phase where the value of 10 is assigned to the var 'a'. if a is not declared any value it will be initialised as 'undefined'.

In the end you have to remember that its just the way JavaScript does it.

Zach Taylor · Accepted Answer · 2018-07-16 16:25:51Z

1

In a future release of JavaScript (current date 7/16/18) nullish coalescing should be available:

Instead of:

value != null ? value : 'default value';

Or:

value || 'default value'

(The number zero, the boolean false, and an empty string are all considered false in the second solution. Very dangerous.)

Now we can do:

value ?? 'default value';

Docs: https://github.com/tc39/proposal-nullish-coalescing

answered Jul 16, 2018 at 16:25

Zach Taylor

2891 gold badge4 silver badges9 bronze badges

Collectives™ on Stack Overflow

Javascript get value from array at index while avoiding undefined if index does not exist?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related