JavaScript Basics: Types

Primary Data Types

• Boolean
• String
• Number

Composite Data Types

• Object
• Array

Special Data Types

• Undefined
• Null

As you might expect, Boolean can have one of two values: true or false.

String is one or more unicode values strung together.

JavaScript does not make a distinction between integer and floating-point values. Number includes positive and negative integers and 0. Values can be represented in decimal, hexadecimal, and base 8. The special value of NaN is the result of a conversion that does not produce a meaningful number.

Undefined has a single value - undefined. If a variable has been declared but has no value or an object property that does not exists will return undefined.

The Null data type can have only one value - null. Null is used to refer to the absence of value or an object. Assigning null to a variable means that the variable holds no valid Boolean, String, Number, Object, or Array. You can assign null to a variable in the case you intend for it to have to value. Note that the typeof operator in JavaScript will report a variable with value of null to be of type Object, and not of type null. This is legacy functionality that is present for backwards compatibility.

The skinny on undefined  and null is this: If you declare a variable without assigning a value, the value of that variable is undefined. Null is explicitly assigned to designate the absence of a value or object.

var foo;
console.log( foo )// undefined

foo = null; //explicitly assign null to designate an absence of value or object assignment

The typeof operator is an introspective feature of the JavaScript language. It is useful in determining the type of a variable. A confusing caveat to typeof: Variables of type null will be come back as type object.

var myVar = "Wherever you go...";
typeof( myVar ); // prints "string"

Notes:

Chapter 8, Ecma-262

http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf

http://msdn.microsoft.com/en-us/library/7wkd9z69(v=vs.94).aspx

http://jibbering.com/faq/notes/type-conversion/

Micro Controlling Your Views Using State Machines

Recently, in the course of creating an media asset manager for my day job, I ran across a very useful micro framework.

https://github.com/jakesgordon/javascript-state-machine/

The author is Jake Gordon. He has a blog, http://codeincomplete.com.

A finite state machine is a common paradigm that's been around in computer science at least since Mealy and Moore. It's defined as an abstract machine that can be in one of a number of finite states.

Think of a stop light. Red, yellow, green. It can only be one of these states at a time. The machine is restricted in regards to which state(s) it can transition to and from. It can move from red to green, but not red to yellow. Green to yellow, but not green to red. Yellow to red but not yellow to green.

The following is a simple programmatic example. Open your developer's console to see messages and errors.
http://www.oonn.us/statemachine-minimalist.html

What state machines are NOT good for. State machines don't replace routes.

I've been building apps at my day job with Backbone.js . A route in Backbone is hash-masrked string in the URL and points to a resource. For example, www.mydomain.com/myapp#comment/1234 would present a view of the comment with the id 1234. Everything after the # is the route - a path to the resource.

Other routes might be
/comments ( a list of all the comments in the app )
/comment/4321 ( displays comment with id of 4321 )
or
/comment/new ( a form to create a new comment )

State machines don't replace routes and describing resources in a RESTful way.

So what are state machines good for?

What I've found is that I often have screens that are to be viewed in sequence. Think of a uploading an image. The initial screen might be an input field that allows the user to choose a file from their computer. Once they hit submit, the upload process begins, and the screen presents a loading bar or indeterminate loader. Once loading has completed, the user gets the message 'Your upload is complete! Upload another!'

So here we have three states:
A. Choosing a file
B.  Uploading
C. Upload Complete

and three events that would drive the changes in state:

1. User chooses a file.
2. File is completely uploaded.
3. The user clicks to upload a file.

The initial state is ( A.  Choosing a file ). Once the event ( 1.  User chooses a file ) occurs the state machine transitions from finite state ( A. ) to ( B. ). And when event ( 2. ) is fired, the state transitions to ( C. ). If event ( 3. ) is initiated by the user, the state machine transitions back to state ( A. ).

Using Jake Gordon's code, the state machine would be initiated something like this:

var fsm = StateMachine.create({

initial: 'chooseFile',

events:[
{ name: 'fileChosen', from: 'chooseFile', to: 'uploading' },
{ name: 'fileUploaded', from: 'uploading', to: 'uploadComplete' },
{ name:'uploadFile', from:'uploadComplete', to: 'chooseFile'}
]
}

As you can see, the constructor takes an array named 'events'. Those events have a 'name', 'from', and 'to' properties. When you need to change the state of your view, you invoke fsm.fileChosen() , for instance. If and only if you are in the state chooseFile will the state machine transition to uploading. In any other state, an error will be thrown.

I'll leave it to you to look at my minimalist example and Jake Gordon's README on github to find out how this can be useful to you.

https://github.com/jakesgordon/javascript-state-machine/blob/master/README.md

https://github.com/jwaggener/State-Machines

The takeaway here is:

• Finite State Machines are great for organizing and controlling your views.
• State machines don't replace routing and describing resources in a RESTful way.
• There's a free state machine for javascript ready to go - https://github.com/jakesgordon/javascript-state-machine/ - so take advantage of it.

Notes:

Stop Light code on github:

https://github.com/jwaggener/State-Machines

Jake Gordon's state machine:

https://github.com/jakesgordon/javascript-state-machine/

JavaScript Basics: Rebinding

Here's a simple test:

var foo = 24;
var bar = foo;
foo = 34;

What is the value of bar?

When foo is created it is bound to a value. foo is simply an identifier that is bound to the value 24. When we say that bar = foo, bar is being pointed to the value 24 as well. When we then assign the value of 34 to foo, foo points to 34. However, bar is still pointing to 24. The block of memory to which it is pointing has not changed.

So, in the example of above, the value of bar is 24.

Often rebinding is confused with assignment by reference. One might have incorrectly assumed that the value of bar was 34. After all, it pointed to foo and foo now pointed to the value 34. But this would be an example of assignment by reference, when what we are doing is taking identifiers and binding to values - blocks of memory.

A graphic representation of Rebinding:

Reference:
http://dmitrysoshnikov.com/ecmascript/es5-chapter-3-1-lexical-environments-common-theory/#rebinding