Java to JS

FROM JAVA TO JS: A GUIDE

So you're a seasoned (or not, heh) programmer looking to dip your feet into web programming- and that means JavaScript. Thing is, JS does certain things differently that most common languages- and here's all the changes that you should care about.

[In this tutorial, I use Java as the "from" language, but any OO language (C++, perhaps?) should be a sufficient background.]

DYNAMIC TYPING

JavaScript is dynamically typed. Unlike Java, where the type of a variable is of utmost importance, JS doesn't really care. You can see the effects of this in a lot of syntactic changes:

VARIABLE INSTANTIATIONS: instead of declaring by type, you have one, solitary var keyword. And a const keyword, which isn't seen as often, but it's there.

var x = 5;
x = "Dynamic typing!"

FUNCTION HEADERS: again, instead of declaring by return type, you have a function keyword. Note the lack of types for arguments, too:

function addNumbers(x, y) {
	return x + y;
}

The lack of typing here can obviously be both a blessing and a curse- no more casting between doubles and ints, that's for sure, but you've got to be careful that anything that goes into that function is a number, unless accidental string concatenation is okay with you. JS is a very permissive language. The entire responsibility has been placed on you to write good code. Spooky, no?

FUNCTION LITERALS: Function literals look wrong. They just do. Your programmer sense will complain the first time you write one, but that's okay: JS understands. Function literals are primarily used to set methods of objects, like elements on a page:

someElement.onclick = function() {
	alert("Click get!");
}

It's quite a weird syntax, but JS will allow you to start your statement as if you were declaring a property, then actually declare a method with a function literal. Doesn't that look strange? Don't worry- that's perfectly normal, both the syntax and your initial perception. It will pass. Well, the latter, at least. We'll see more of this in about X paragraphs.

By the way, meet alert(). It creates a simple alert box. It's got a cousin, prompt(), which includes a text input and returns it as a String. Think of it like an easier-to-call JOptionPane.

OBJECTS: Alright, here's where things start to deviate heavily. Objects in JS don't follow the usual OO pattern. When it comes to declaring objects, first of all, you have something called an object literal:

var objectLiteral = {
	number: 5;
	sayHi: function() {
		alert("Hi!");
	}
}

Some things of note in that example- notice the var keyword to initialize, the lack of var keywords for the properties, the colons instead of equals signs (this is the only time JS uses this, by the way), the function literal to declare the method. Note that we can still call objectLiteral.sayHi(), even though when we initially name the method we don't have parentheses. Confused yet?

When it comes to declaring classes, there's no class keyword. Instead, you declare it implicitly via a constructor.

function Class(num) {
	this.number = num;
	this.sayHi = function() {
		alert("Hi!");
	}
}

var instance = new Class(5);
instance.sayHi();

Notice how we're still not using a var keyword- if the property being referenced doesn't exist, JS will simply go ahead and create one. You can see this behavior in action with the onClick example above.

A unique property of constructors (and all functions, but specifically for constructors) in JS: If you define a constructor with multiple arguments, you can call it later on with fewer arguments, and any not specified will default to null. JS doesn't provide any method of multiple constructors for a single class, seing as the constructor is the class definition; use this property and some clever argument ordering instead.

function Constructor(par1, par2, par3) {
	if (par1 != null) {
		this.prop1 = par1;
	} else {
		this.prop1 = someDefaultValue;
	}
	//et cetera...
}

var instance1 = Constructor(1, 2, 3); //prop1, prop2, and prop3 given values
var instance2 = Constructor(1, 2); //prop3 is null; given default value manually (hopefully)

The property and method we created are instance methods, by the way. This becomes important in 3... 2... 1...

CLASS METHODS: Every JavaScript object has a prototype. Prototypes are JS's way of simulating class methods and properties- they're definitely not the same, but you can get pretty darn close to the behavior you expect.

There are two ways you can set class properties and methods, with varying levels of scope:

Via prototype, you create a class property or method that both gives and receives access to the instance properties, i.e., the ones created with this. Again, no need for var keywords, and you'll use function literals here. You set class methods outside of the constructor, since they're not part of the instance:

Class.prototype.
Class.prototype.classMethod = function() {
	alert("Wow! A class method");
}

Or, you can set class properties that do not have access to the instance properties; these are set without prototype:

Class.secretNumber = 404;
Class.getSecretNumber = function() {
	return secretNumber;
}
Class.secretFormula = function() {
	return secretNumber + this.number;
}

All the instance properties and methods will know the secretNumber. The class methods getSecretNumber() and secretFormula() have access to the secretNumber as well, but secretFormula, try as it might, cannot access the instance property number, so it will fail.

There you have it: two ways of making class methods, with differing scopes; restrict accordingly.

INHERITANCE: One of the greatest downfalls, in my opinion, of prototype OO, is the hackiness of inheriting. Sure, it's entirely possible, but it's messy and usually nobody will bother to do it. Instead, I recommend you just maintain any would-be subclasses seperately, and sort of manually inherit- just copy-and-paste whatever methods you need. Is it more of a hassle? Yes. But keep this in mind:

One of the ideas behind inheritance is that the subclasses are of type superclass, and so all the subclasses are guaranteed to have all the superclass methods and properties. That makes code like this possible:

class Superclass {
	public int number() {
		return 5;
	}
}

class Subclass extends Superclass { }

public static void main(String[] args) {
	Superclass instanceOfSub = new Subclass();
	int x = instanceOfSub.number(); // x = 5
}

But here's the thing- in JS, type isn't important! So instead of relying on inheritance and a compiler to guarantee a method's there, how about some self-confidence instead? Like I said- JS is a very permissive language- enjoy the freedom, but don't take it as an excuse to get sloppy.