JavaScript var vs class

Question

This might sound like a weird question, considering variable and classes are completely different things, but I come from a Java background (Currently Associate degree level, 3rd year college student) and I've been reading up on javascript and watching videos.

A video about animation in js started with an intro to creating a vector object. He defined a vector in its own file called vector.js and used it as the basis for particle motion in basic 2d animations.

Here is the code:

var vector = {
    _x: 1,
    _y: 0,

    create: function(x, y) {
        var obj = Object.create(this);
        obj.setX(x);
        obj.setY(y);
        return obj;
    },

    setX: function(value) {
        this._x = value;
    },
    getX: function() {
        return this._x;
    },

It continues with more getters and setters for angle, length, etc. Also defines methods for other vector operations like cross and dot product.

My questions are: -How is this different from using a class with methods? -Is this acceptable/standard code? -Is the syntax foo: function(args) as a header the same as function foo(args)? -Can you all point me to resources explaining the concept of having functions and parameters inside of seemingly a declared variale?

I have tried looking up information about, but I don't know if this syntax or usage has a name in js. I haven't seen anything like this in Java. I can't find any information.

Cheers.

Answer 1

That's not a class. That's an object. In Java it's like an anonymous class. So Java does in fact have this exact same feature but with different syntax. In Java it would be something like this:

Object vector = new Object {
    private Integer x = 0;
    private Integer y = 0;

    // rest of code ... 
}

The one key difference is that unlike Java, javascript does not generate errors when you access properties of an object that doesn't exist. The above code would be a syntax error in Java because the Object class does not have members x and y. But javascript will silently add members that don't exist:

class Foo {
    constructor () {
        this.a = 1;
    }
}

var foo = new Foo();
console.log(foo.a); // prints 1
console.log(foo.b); // prints "undefined"
foo.b = 2;          // NOT an error
console.log(foo.b); // prints 2

In javascript, the syntax {} is equivalent to new Object(). This is called the object literal syntax (technically it's specified as "object initializer"). This is in fact the origin of JSON - it's based on javascript object and array syntax.

This behavior of objects in javascript means that it is often used in place of hashes/maps/hashmaps/associative arrays in other languages. Because it literally behaves like an associative array. So where in Java you have Map in javascript you'd use {}.