[JavaScript] Typing in JavaScript, and the Intro to Objects

This is the second in a planned series of introductory articles on JavaScript. It is not an introduction to programming, but rather a quick crash course on what makes the language unique.

Tl;Dr Takeaways:

• Everything in JavaScript is an object
• JavaScript object-literals are collections of key-value pairs, and are able to be nested
• Objects are always passed by reference, never copied
• JavaScript has five primary datatypes that are immutable, despite being objects in a stricter sense
• Arrays are, you guessed it, objects

Visit JsFiddle.net if you want to play around with the code in these examples.

JavaScript === Objects

JavaScript is based entirely on the concept of Objects, which are collections of key-value pairs. Everything in JavaScript, all data, all functions, are objects. After being created, these collections are never copied, only ever passed by reference.

A further post will go into more detail, but the object-literal declaration syntax looks like this:

// An object being instantiated 
{ name: "Sedge", age: 24 };

// An object being instantiated, with
// a reference to it being copied into
// a variable
// NOTE: The whitespace is irrelevant 
var q = { 
  name: "Sedge",
  age: 24
};

Getting the data out of an object is simple. The keys of the collection are called Attributes of the object they belong to. The data inside them can be easily dereferenced, updated or changed:

q.name; // "Sedge"
q.name = "Not Sedge";
q["name"]; // "Not Sedge"

Adding new attributes is easy too:

q.middleName = "none";
q["middleName"]; // "none"

The use of the standard array notation in this example, [“middleName”], exposes a fact about JavaScript arrays – they’re objects!

Arrays

Arrays are JavaScript objects. Their internals aren’t too important at this point, so just consider that each array object can be modified in two ways. The first is using the familiar array syntax:

var q = [];

q[0] = "HUZZAH!";

console.log( q[0] ); // HUZZAH!
console.log( q.length ) // 1

The second is using the methods common to all children of the global Array object (and therefore, all arrays):

var q = [];

q.push( "HUZZAH!" );

console.log( q[0] ); // HUZZAH!
console.log( q.length ) // 1

Data can still be assigned like in a regular object, but these attributes won’t be touched by the Array methods, and won’t count towards its length:

var q = [];

q.newAttribute = "HUZZAH!"

console.log( q["newAttribute"] ); // HUZZAH!
console.log( q.length ); // 0  

JavaScript has a robust library of commonly used methods on almost every object. String objects have methods like substr and splice, while Array objects have methods like push, pop and others.

For more information, search the Mozilla Developer Network‘s JavaScript centre for the object you’d like details on.

JavaScript Primitives

JavaScript deals with data by dividing its representation into five primitive, immutable types. Immutable datatypes cannot be changed after they are instantiated. I’ll show an example using the most common, a string:

// This is a String being instantiated
"this is a string";

// This is a new String being instantiated,
// with a reference to it being copied into
// `a`.
var a = "this is a string"; 

Note that the second string is an entirely separate instance from the first one. Also, it seems like the string should be copied into the variable instead of a reference to a string. What’s going on?

In reality, JavaScript primitives are wrapped by objects, and these objects contain an attribute holding the primitive itself (“this is a string”). So,

// Instantiates a string, copies the
// wrapper object reference into `a`
var a = "this is a string";

// Instantiates a second string,
// and replaces the reference contained
// in `a` with a reference to the object 
// wrapping the new string.
a = "new string";

Confused? Not surprising! For now, forget about the object part – this will be expanded on in another post.

The Five Types

For data processing and representation, JavaScript uses:

String – A representation of characters, “surrounded by quotes”
Number – A representation of a numerical value (including floating point)
Boolean – A true/false value
Undefined – The default value of any attribute of any Object, and the sole primitive able to be stored in the Undefined wrapper object
Null – A value representing the absence of a value – when dereferenced, evaluates as `null`

The most interesting are `undefined` and `null`, which are similar. The `undefined` type symbolizes does not exist. From Kevin Chisholm’s blog:

var foo = undefined;

console.log("Typeof foo is: " + typeof( foo ) );
// "Typeof foo is: undefined"

console.log("Value of foo is: " + foo );
// "ReferenceError: foo is not defined" 
// (crashes the program)

The lesson here is that you can’t dereference a value that hasn’t been set, or was manually set to `undefined`. This is in contrast to the `null` type:

// We declare foo as null
var foo = null;

console.log("Typeof foo is: " + typeof( foo ) );
// "Typeof foo is: object"

console.log("Value of foo is: " + foo );
// "Value of foo is: null"

Don’t be fooled: Null is null. It is an object, because everything is, but it is always a reference to a single instance of an empty object with no attributes.

The distinction is important, because dereferencing `undefined` will cause crashes, while dereferencing `null` won’t.

Conclusion

So far I’ve been setting the stage for how to solve programming problems using JavaScript by introducing its components. The next article will be an examination of Objects in JavaScript, which (as you have seen) form the basis of the language.