Java development 2.0: JavaScript for Java developers

justforregister

JavaScript variables
JavaScript is a fairly easygoing language, in that it allows you to make quite a few programming mistakes and still come out with web pages that load. JavaScript elements often fail silently, which is mostly good news. The early web would have been a rough place if sloppy JavaScript programming prohibited pages from loading. That said, as we rely on JavaScript to do fancier things (like asynchronously updating page state), careless JavaScripting does take a toll. It's for this reason that Java developers should take the time to really understand certain aspects of JavaScript syntax.
JavaScript's handling of variables is particularly important to understand. You can    define a variable named foo, for instance, either directly or via the var declaration, as shown in Listing 1:

justforregister

Listing 1. Variable foo

foo = 'foo'
var bar = 'bar'


The foo in Listing 1 is a valid variable in JavaScript. But because it lacks a var declaration, it's a global variable. Variables defined with var are consequently scoped (for example, within the function in which they are defined).

In general, global variables are bad. More often than not they give off code smell, meaning that because they can be accessed and altered anywhere within a JavaScript application, their use can lead to insidious bugs. Thus, when you program in JavaScript, don't forget the var with your variables.

justforregister

Primitives and objects

While JavaScript is anything but unsophisticated, it is quite simple when it comes to types. In fact, JavaScript really only has four basic types, three of them primitives. JavaScript's primitive types are Number, String, and Boolean. You can see these types in action via JavaScript's handy typeof operator.

Let's try this out together. In Chrome's JavaScript console, type what you see in Listing 2:

justforregister

Listing 2. Activating types

var string = "test"
typeof string


You should see the console print out the value "string." You'll also note that semi-colons are optional in JavaScript. Like in most popular languages, a string is delineated by quotations; accordingly, numbers are delineated by, well, numbers. Booleans are delineated by the values true or false, without quotations.

justforregister

Listing 3. JavaScript truth and numbers

var aNumber = 10
var anotherNumber = 0.99
var aBool = true
var notABoolean = "false"


You'll note that JavaScript doesn't differentiate between numeric types; numbers are just numbers, with different formats.

JavaScript also supports generic objects, which in and of themselves have instance types, such as Array, shown in Listing 4:

justforregister

Listing 4. An instance of Array

> var myArray = ["Hello", 1, true]
> typeof myArray
"object"
> myArray instanceof Array
true


Arrays in JavaScript are much like lists in other languages: they can be created without a size limit and can hold anything you want to throw into them. Like in Ruby or Groovy, JavaScript Arrays can be created with a literal syntax: []. What's more, JavaScript Arrays support methods (shown in Listing 5) you've come to expect in other languages that support lists:

justforregister

Listing 5. Array's methods

> var myArray = ["Hello", 1, true]
> myArray[0]
"Hello"
> myArray.length
3
> myArray.pop()
true
> myArray
["Hello", 1]
> myArray.pop()
1
> myArray
["Hello"]
> myArray.push("pushed")
2
> myArray
["Hello", "pushed"]


You can obtain an Array's value via its position, which is zero-based. Arrays respond to push and pop, where push adds an item (at its last spot) and pop removes one (like a stack, from the last position).

Arrays also support iteration, shown in Listing 6:

justforregister

Listing 6. Iterating through an Array

> var myArray = [1,2]
> for(var i = 0; i < myArray.length; i++) { console.log(myArray) }
1
2

justforregister

Type coercion

JavaScript isn't just a weakly typed language — it's even weaker than Ruby or Groovy! JavaScript goes out of its way to coerce objects into whatever type makes sense at a given point in the code. That makes sense in the context for which JavaScript was originally conceived: web page interaction. Sloppy JavaScript should not prohibit someone from reading an online article!

Type coercion isn't unique to JavaScript, but JavaScript's particular brand is quite flexible. This can be a good thing or a bad thing depending on your point of view. JavaScript's looseness can hide defects, much like global variables do.

For example, I could define an Array and then inadvertently attempt to do something numeric with it, or even some String concatenation, shown in Listing 7:

justforregister

Listing 7. JavaScript's type flexibility

> var myArray = [1,2]
> console.log(2 * myArray)
> console.log("A" + myArray)


In this case, the first log message would print NaN, while the second would print A1,2. In both cases, the code "worked" in that nothing blew up — JavaScript just kept on trucking. This is weak typing at its extreme. The same code in Ruby wouldn't work like that, as in Listing 8: