Transition Guide: From Java to JavaScript

Last year, I decided to dive into programming again, learning Java after a break. This time, I aimed to tackle something more challenging than Python. I spent about 3-4 months exploring Java, learning key concepts like how it works, OOP, memory management, and connecting databases using JDBC.

It was only around last month that I decided to get into web development, starting off with JavaScript. After spending a few days with JavaScript, I wanted to share my thoughts and learnings with you about the differences between Java and JavaScript, and how a person can easily transition from Java to JavaScript.

---

Main Difference

The first major difference you will notice is the way data types are declared. As you may know, JavaScript is dynamically typed, while Java is statically typed. Both approaches have their pros and cons, but we won’t go into that here,apart from that there's the difference that javascript is single-threaded unlike java which is multi-threaded.

Java vs JavaScript: A Quick Analogy

You can think of Java as a disciplined soldier very strict and precise. When you give him a task, you need to provide exact instructions, explaining both what needs to be done and why. JavaScript, on the other hand, is more like the laid-back friend who doesn't ask too many questions. He’ll get the job done without needing all the details—you just give him the task, and he handles the rest.

Data Types

In Java, you need to define the data type when declaring a variable, such as String, int, float, or boolean, before writing the variable name. However, in JavaScript, the data type doesn't matter—you can declare a variable with just let or const (for constant values). You might wonder how JavaScript manages to store these variables. Well, it first stores them and then determines their type at runtime. Earlier, var was also used similarly to let, but nowadays, it’s not preferred.

Java:

class Main {
    public static void main(String[] args) {
        int a = 5;
        int b = 6;
        int result = a + b;
        System.out.println(result);
    }
}

JavaScript:

let a = 5;
let b = 6;

let sum = a + b;

console.log("The sum is: " + sum);

OOP Differences in Java and JS

Moving on to the important concept of OOP, it is crucial to understand how OOP is used in JS, as it is prevalent everywhere.

Again, besides JS being dynamically typed, it's prototype-based, meaning it uses prototypes to inherit properties from other objects. However, after ES6, JS is fully OOP, meaning it has classes, but under the hood, it’s still using prototypes.

Here is a code snippet that highlights the exact difference in the syntax of creating classes and methods in Java and JS:

Java:

class Person {
    String name;

    Person(String name) {
        this.name = name;
    }

    void greet() {
        System.out.println("Hello, " + name);
    }

    public static void main(String[] args) {
        Person person = new Person("John");
        person.greet();
    }
}

JavaScript:

class Person {
    constructor(name) {
        this.name = name;
    }

    greet() {
        console.log(`Hello, ${this.name}`);
    }
}

const person = new Person("John");
person.greet();

Object Creation in JavaScript

One more thing to keep in mind is that, like in Java, you must create a class to do everything. The main class must always be there. However, in JavaScript, this isn’t an issue, and you can create objects directly without needing a class.

In Java, every object must be an instance of a class, meaning you must define a class first before you can create an object. But in JavaScript, you can create objects directly like this:

JavaScript

const person = {
    name: "John",
    greet: function() {
        console.log(`Hello, ${this.name}`);
    }
};

person.greet();

Inheritance

The syntax for inheriting the properties of another class is almost similar in both languages.

Java:

class Animal {
    void sound() {
        System.out.println("Some sound");
    }
}

class Dog extends Animal {
    void sound() {
        System.out.println("Bark");
    }
}

public class Main {
    public static void main(String[] args) {
        Dog dog = new Dog();
        dog.sound();
    }
}

JavaScript:

class Animal {
    sound() {
        console.log("Some sound");
    }
}

class Dog extends Animal {
    sound() {
        console.log("Bark");
    }
}

const dog = new Dog();
dog.sound();

Encapsulation

It is important to understand that unlike Java, JavaScript has weak encapsulation. It doesn’t have access modifiers (private, protected, public). However, you can use # (private field), which was only recently released in ES2022. It looks something like this:

class Person {
    #name;

    constructor(name) {
        this.#name = name;
    }

    greet() {
        console.log(`Hello, ${this.#name}`);
    }
}

const person = new Person("John");
person.greet();
console.log(person.#name);  // Error: Private field '#name' must be declared in an enclosing class

Polymorphism

As you know, in Java, there are two types of polymorphism: compile-time polymorphism (achieved through method overloading) and runtime polymorphism (achieved through method overriding).

JavaScript doesn’t support method overloading. This means you can't do the following:

// WRONG
class Calculator {
    add(a, b) {
        return a + b;
    }

    add(a, b, c) {
        return a + b + c;
    }
}

const calc = new Calculator();
console.log(calc.add(1, 2, 3));  // Error: add is already defined

As mentioned earlier, JavaScript is an interpreted language, not compiled, so it doesn’t have the compiler to check methods at compile-time.

However, here's an example of method overriding in JavaScript:

class Animal {
    sound() {
        console.log("Some sound");
    }
}

class Dog extends Animal {
    sound() {
        console.log("Bark");
    }
}

const dog = new Dog();
dog.sound();  // Bark