Java To JavaScript Cheat Sheet

Coming from the Java language and landing in the JavaScript realm can be kind of confusing experience. All you see is functions and thinking in objects can be hard if you are not familiar with the language idioms.

This post is an attempt to help overcome the initial struggle and can be used as a cheat sheets for Java developers who want to start writing in JavaScript.

Let’s start with something simple – how to create objects.

Object Creation

Java sample that declares a Book class and creates an instance of it

The Java code should be clear so no need to dwell on it. However let’s see the JavaScript code for the same thing.

JavaScript samples for creating and using a Book object

The easiest way is to define an Object literal (a.k.a inline object)

As you can see JavaScript does not have any notion of classes – you define objects instead.

What about creating several object that have the same properties and methods? One way is to place object literals in the code however this can be a bit frustrating. To avoid code duplication and accidental typos a function that creates such objects can be defined

There is a shortcut to this approach and it is to use constructor function:

The constructor function is the closest version of a class in JavaScript. It basically defines properties and methods.

Note that in this case the new operator is used to invoke the function. Also by convention the name of a constructor function starts with a capital letter.

There is still another way to create an object – by invoking the Object() constructor.

You can use this constructor to create generic object and attach properties and methods to it later.

Default values for properties and methods can be passed to the Object constructor:

Polymorphism

Java sample – Render Rectangle and Square

Again the Java code should be clear so let’s see the JavaScript part.

JavaScript samples showing the dynamic nature of prototypal inheritance

Since JavaScript has no notion of classes the inheritance is implemented by using a prototype object. Basically each object has a prototype object that serves as a template and extenders inherit properties and methods from it. It might sound confusing at first but after running the following examples it makes sense.

Let’s start by defining a Rectangle object.

It has two properties. If this object is designed to be extendable all methods that can be inherited must be defined in the prototype object.

(Remember that each object has a prototype object)

The code above adds the render method to the prototype object thus any object that inherits Rectangle can override it.

Now let’s define another object – Square, that will extend Rectangle

As you can see it has only one argument and calls Rectangle ‘s constructor passing it.

Now If we call render()

We’ll see the following error:

To fix this we have to copy the prototype object from the parent object

Calling render() again will result in:

Now we can override the behaviour of renderfor Square objects:

And here is the full code:

Can you guess the output?

Encapsulation

Java sample – private Rectangle properties

The Java code defines a Rectangle whose properties are not exposed and can be changed only through the resize method.

Let’s see how this can be achieved in JavaScript

JavaScript counterpart – function scoped variables

The code looks a bit stranger than the previous snippets so let’s start from the top. The expression

defines anonymous function and executes it. If the last () is omitted then only a function will be declared but not executed (if no variable points to it then the function cannot be called at later time).

The next important thing is this idiom:

This is an anonymous function that returns an empty object. Having in mind that the variables are scoped in a function this means that everything that is declared in the function and before the return statement will be visible to the inlined object and not visible to the callers of the function. Example:

This will log 10 in the console output. And this will log undefined

Hopefully the code we started with is more clear now. The next question is – What about having multiple objects with scoped state?

JavaScript sample – multiple objects with scoped state

As a last note – this approach is not restricted to variables only. Functions declared outside the return statement won’t be visible as well.