Differential D25075 Diff 343 src/docs/flavor/javascript_object_array.diviner

Changeset View

Standalone View

src/docs/flavor/javascript_object_array.diviner

@title Javascript Object and Array		@title JavaScript Object and Array
@group javascript		@group javascript

This document describes the behaviors of Object and Array in Javascript, and		This document describes the behaviors of Object and Array in JavaScript, and
a specific approach to their use which produces basically reasonable language		a specific approach to their use which produces basically reasonable language
behavior.		behavior.

= Primitives =		= Primitives =

Javascript has two native datatype primitives, Object and Array. Both are		JavaScript has two native datatype primitives, Object and Array. Both are
classes, so you can use `new` to instantiate new objects and arrays:		classes, so you can use `new` to instantiate new objects and arrays:

COUNTEREXAMPLE		COUNTEREXAMPLE
var a = new Array(); // Not preferred.		var a = new Array(); // Not preferred.
var o = new Object();		var o = new Object();

However, you should prefer the shorthand notation because it's more concise:		However, you should prefer the shorthand notation because it's more concise:

Show All 19 Lines	//also// the base class of all classes.
o instanceof Array; // false		o instanceof Array; // false
a instanceof Object; // true		a instanceof Object; // true
a instanceof Array; // true		a instanceof Array; // true


= Objects are Maps, Arrays are Lists =		= Objects are Maps, Arrays are Lists =

PHP has a single `array` datatype which behaves like as both map and a list,		PHP has a single `array` datatype which behaves like as both map and a list,
and a common mistake is to treat Javascript arrays (or objects) in the same way.		and a common mistake is to treat JavaScript arrays (or objects) in the same way.
Don't do this. It sort of works until it doesn't. Instead, learn how		Don't do this. It sort of works until it doesn't. Instead, learn how
Javascript's native datatypes work and use them properly.		JavaScript's native datatypes work and use them properly.

In Javascript, you should think of Objects as maps ("dictionaries") and Arrays		In JavaScript, you should think of Objects as maps ("dictionaries") and Arrays
as lists ("vectors").		as lists ("vectors").

You store keys-value pairs in a map, and store ordered values in a list. So,		You store keys-value pairs in a map, and store ordered values in a list. So,
store key-value pairs in Objects.		store key-value pairs in Objects.

var o = { // Good, an object is a map.		var o = { // Good, an object is a map.
name: 'Hubert',		name: 'Hubert',
species: 'zebra'		species: 'zebra'
};		};

		o.paws = 4;

		o['numberOfEars'] = 2;
		valerio.bozzolanAuthorUnsubmitted Done Inline Actions I've added more examples here ↑ since being able to do both can be counter-intuitive valerio.bozzolan: I've added more examples here ↑ since being able to do both can be counter-intuitive

console.log(o.name);		console.log(o.name);
		console.log(o.paws);
		console.log(o.numberOfEars);
		valerio.bozzolanAuthorUnsubmitted Done Inline Actions I added more minor examples there since it's not that obvious for people that o.stuff and o['stuff'] are the same. valerio.bozzolan: I added more minor examples there since it's not that obvious for people that o.stuff and o…

...and store ordered values in Arrays.		...and store ordered values in Arrays.

var a = [1, 2, 3]; // Good, an array is a list.		var a = [1, 2, 3]; // Good, an array is a list.
a.push(4);		a.push(4);

Don't store key-value pairs in Arrays and don't expect Objects to be ordered.		Don't store key-value pairs in Arrays and don't expect Objects to be ordered.

COUNTEREXAMPLE		COUNTEREXAMPLE
var a = [];		var a = [];
a['name'] = 'Hubert'; // No! Don't do this!		a['name'] = 'Hubert'; // No! Don't do this!

This technically works because Arrays are Objects and you think everything is		Technically, both work because Arrays //are// Objects and you think everything
fine and dandy, but it won't do what you want and will burn you.		is fine and dandy, but it won't do what you want and will burn you. For example,
		using `.length` will play tricks on you.

		In short, trust me:

		* use `[]` only to create a stack of consecutive elements numerically indexed
		* use `{}` to create associative maps ("associative arrays")
		valerio.bozzolanAuthorUnsubmitted Done Inline Actions I've added an "In short" paragraph since this topic deserved it. valerio.bozzolan: I've added an "In short" paragraph since this topic deserved it.

= Iterating over Maps and Lists =		= Iterating over Maps and Lists =

Iterate over a map like this:		Iterate over a map like this:

lang=js		lang=js
for (var k in object) {		for (var k in object) {
f(object[k]);		f(object[k]);
▲ Show 20 Lines • Show All 51 Lines • ▼ Show 20 Lines

The correct way to deal with this is:		The correct way to deal with this is:

for (var ii = 0; ii < list.length; ii++) {		for (var ii = 0; ii < list.length; ii++) {
if (list[ii] == undefined) {		if (list[ii] == undefined) {
continue;		continue;
}		}
f(list[ii]);		f(list[ii]);
}		}

Avoid sparse arrays if possible.		Avoid sparse arrays if possible.

= Ordered Maps =		= Ordered Maps =

If you need an ordered map, you need to have a map for key-value associations		If you need an ordered map, you need to have a map for key-value associations
and a list for key order. Don't try to build an ordered map using one Object or		and a list for key order. Don't try to build an ordered map using one Object or
one Array. This generally applies for other complicated datatypes, as well; you		one Array. This generally applies for other complicated datatypes, as well; you
need to build them out of more than one primitive.		need to build them out of more than one primitive.