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.

Can you all point me to resources explaining the concept - This is called Object Literal Notation or initializer notation. Here is a reference: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Randy Casburn
– Randy Casburn, Commented Jul 5, 2019 at 3:56

slebetman · Accepted Answer · 2019-07-05 03:59:34Z

2

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 {}.

edited Jul 5, 2019 at 3:59

answered Jul 5, 2019 at 3:49

slebetman

115k19 gold badges148 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Josh Over a year ago

So it's only one instance of object? The video used multiple vectors at once.

Paul Over a year ago

It's a single instance, but it also has a method create that creates more objects that have it as their prototype, which means the objects created by vector.create also have access to all the methods on vector. It basically is a class, but there are lots of ways to make them in JavaScript.

slebetman Over a year ago

@Josh If you're starting learning javascript I'd suggest first ignoring the prototype mechanism because it can get confusing quickly. Instead first learn how objects behave and the new class syntax and get comfortable with the language - then delve in to the gory details of prototype inheritance

Josh Over a year ago

@slebetman that makes sense. But can you explain the difference in method declarations?

slebetman Over a year ago

@Josh Just read about function expressions. What you are seeing there is assigning a function to a property of an object. see: developer.mozilla.org/en-US/docs/web/JavaScript/Reference/…

|

Collectives™ on Stack Overflow

JavaScript var vs class

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest