This article is the second part of a three-part series exploring JavaScript from the perspective of a .NET developer. In this installment, I will delve into JavaScript's prototypal inheritance, the distinction between primitives and objects, and the syntactic evolution of object-oriented programming concepts.

If you wish to start from the beginning, please navigate to Part I.

A weird json like syntax way of defining an object on the fly:

const wallet = {
    address: "0x123",
    balance: 10101010,
    getOwner() { return this.address; }
}

const owner = wallet.getOwner();
console.log(owner);                   // 0x123

wallet is a reference like in C#. It has the same shallow copy behavior, same for passing it in functions as well.

Literal declaration is a fast way of bundling some data together, but what if you need a second wallet object?

A regular function can act as a constructor, without being declared inside a class. WHAT?

const Wallet = function(address, balance){
    this.address = address;
    this.balance = balance;
}

“new“ serves the same scope as in C#: allocates memory, initializes the object and returns a reference to it.

const wallet1 = new Wallet("0x123", 101010);
console.log(wallet1);

const wallet2 = new Wallet("0x456", 100100);
console.log(wallet2);

wallet2.balance += 100;        // set prop
console.log(wallet2.balance);  // get prop

Now what if I want to add a method to our object?

Since we don't have a class to add methods to, we will use JavaScript's prototypal Inheritance.

Wallet.prototype.getOwner = function () {
    return this.address; 
}

Wallet.prototype.setBalance = function (balance) { 
    this.balance = balance;
}

console.log(wallet1.getOwner());    // 0x123
console.log(wallet2.getOwner());    // 0x456

wallet1.setBalance(200000);
console.log(wallet1.balance);        // 200000
}

It’s worth mentioning that you can’t use the arrow function here since arrow functions don't bind "this", so you won’t have access to the object from within.

The prototype property is an object where we can add methods / properties on the fly (even after instances are created) that we want to be shared across all Wallet instances.

const wallet3 = new Wallet("0x789", 303030);
// wallet3.[[prototype]] = Wallet.prototype

wallet3.[[prototype]] automatically gets a reference to Wallet.prototype.

When calling a property / method on an object JavaScript first checks if that property is part of the instance, If it can’t find it it will search for it up the inheritance chain using the [[prototype]] property.

console.log(wallet3.balance);

Here JS searches for balance property on wallet3. It finds it and gets it.

console.log(wallet3.getOwner());              

Again, here JS searches for getOwner method on wallet3. It cannot find it so it uses wallet3.[[prototype]] reference to go up the prototype chain and find the method at wallet3.[[prototype]].getOwner().

Another difference worth mentioning is that JS allows us to “on the fly“ override a property/method directly on an instance (shadowing):

wallet2.getOwner = function() {return "The owner is secret"; }
console.log(wallet1.getOwner());      // 0x123 
console.log(wallet2.getOwner());      // 0x456
console.log(wallet3.getOwner());      // 0x789 

It's funny; the last time I checked JavaScript about 7 years ago, the prevailing notion was that everything in JavaScript is a function. However, now I'm hearing that everything is an object.

JS has 5 primitive types (like in Java not .NET which does not have primitives, only value types). Those 5 primitives are: string, number, boolean, null and undefined. Everything else is an object.

const flag = true;
console.log(flag); 

const age = 35;
console.log(age); 

const book = "The Art of War";
console.log(book); 

will print in the console:

From the first 5 primitives outlined above only null and undefined will ever be a primitive. The first three are initially primitives as seen in the console, but if needed JS will wrap an object around them. That’s why if I try to call methods on any of them (string, boolean, number) I can.

console.log(book.split(''));

will print in the console:

As we can see JS turned our primitive string into an object that inherits from an array of characters prototype, that further inherits from the Object prototype.

As all value types and reference types inherit from Object in C#, In JavaScript all objects inherit from Object prototype.

Here is the prototypal inheritance chain for different types in JS:

• Object: myObject > Object.prototype > null

• Number: myNumber > Number.prototype > Object.prototype > null

• Boolean: myBool > Boolean.prototype > Object.prototype > null

• String: myString > String.prototype > Object.prototype > null

• Array: myArray > Array.prototype > Object.prototype > null

• Function: myFunction > Function.prototype > Object.prototype > null

You can further explore the inheritance chain and all the properties by creating an object of some type and just dumping it to the console.

And finally a familiar syntax. Using classes:

class Wallet {

    // clean differentiation from regular functions via constructor keyword <3
    constructor(address, balance){
        this.address = address;
        this._balance = balance;
    }

    // methods defined within the class, not all over the place <3
    // using that useless "function" keyword in here would actually crash the program. <3
    getOwner() { 
        return this.address; 
    }

    addToBalance(value) { 
        this._balance += value;
    }

    // encapsulation through getters and setters <3. (although we could do w/o the parenthesis)
    get balance(){
        return this._balance;
    }

    set balance(value){
        if(value >= 0){
            this._balance = value;
        }
    }
}

const wallet1 = new Wallet("0x123", 101010);
console.log(wallet1);

class MultiSigWallet extends Wallet { // extends like in java
    constructor(address, secondAddress, balance){
        super(address, balance);      // super like in java

        this.secondAddress = secondAddress;
    }

    // method override in subclass just like in C#/Java
    getOwner(){ return `first address: ${this.address} & second address: ${this.secondAddress}`; }

}

const w = new Wallet("0x123", 101010);
console.log(w);
w.addToBalance = 5000;          // method from Wallet
console.log(w.getOwner());      // method from Wallet

const msw = new MultiSigWallet("0x456", "0x789", 9999999);
console.log(msw);
w.addToBalance = 6000;          // method from Wallet (no override on MultiSigWallet)
console.log(msw.getOwner());    // method from MultiSigWallet

So there you have it.

In conclusion I am amazed by how strongly JavaScript has developed a syntactic resemblance to C# and Java. It almost feels as though the evolution of JS was influenced by Microsoft developers.

However, it's important to remember that this resemblance is primarily syntactic sugar, as the underlying functionality remains the same.JS still allows you to mess with the properties and methods of an object even after it has been created through the [[Prototype]] object.

Navigate to part three of this three part series where we explore Asynchronous Programming in JavaScript: Part III

You can find the full set of examples over at my github page.

Also if you liked the article, I'm constantly tweeting about this stuff and more. Feel free to follow me on Twitter and drop a comment to say hi!

This article is the second part of a three-part series exploring JavaScript from the perspective of a .NET developer. In this installment, I will delve into JavaScript's prototypal inheritance, the distinction between primitives and objects, and the syntactic evolution of object-oriented programming concepts.

If you wish to start from the beginning, please navigate to Part I.

A weird json like syntax way of defining an object on the fly:

const wallet = {
    address: "0x123",
    balance: 10101010,
    getOwner() { return this.address; }
}

const owner = wallet.getOwner();
console.log(owner);                   // 0x123

wallet is a reference like in C#. It has the same shallow copy behavior, same for passing it in functions as well.

Literal declaration is a fast way of bundling some data together, but what if you need a second wallet object?

A regular function can act as a constructor, without being declared inside a class. WHAT?

const Wallet = function(address, balance){
    this.address = address;
    this.balance = balance;
}

“new“ serves the same scope as in C#: allocates memory, initializes the object and returns a reference to it.

const wallet1 = new Wallet("0x123", 101010);
console.log(wallet1);

const wallet2 = new Wallet("0x456", 100100);
console.log(wallet2);

wallet2.balance += 100;        // set prop
console.log(wallet2.balance);  // get prop

Now what if I want to add a method to our object?

Since we don't have a class to add methods to, we will use JavaScript's prototypal Inheritance.

Wallet.prototype.getOwner = function () {
    return this.address; 
}

Wallet.prototype.setBalance = function (balance) { 
    this.balance = balance;
}

console.log(wallet1.getOwner());    // 0x123
console.log(wallet2.getOwner());    // 0x456

wallet1.setBalance(200000);
console.log(wallet1.balance);        // 200000
}

It’s worth mentioning that you can’t use the arrow function here since arrow functions don't bind "this", so you won’t have access to the object from within.

The prototype property is an object where we can add methods / properties on the fly (even after instances are created) that we want to be shared across all Wallet instances.

const wallet3 = new Wallet("0x789", 303030);
// wallet3.[[prototype]] = Wallet.prototype

wallet3.[[prototype]] automatically gets a reference to Wallet.prototype.

When calling a property / method on an object JavaScript first checks if that property is part of the instance, If it can’t find it it will search for it up the inheritance chain using the [[prototype]] property.

console.log(wallet3.balance);

Here JS searches for balance property on wallet3. It finds it and gets it.

console.log(wallet3.getOwner());              

Again, here JS searches for getOwner method on wallet3. It cannot find it so it uses wallet3.[[prototype]] reference to go up the prototype chain and find the method at wallet3.[[prototype]].getOwner().

Another difference worth mentioning is that JS allows us to “on the fly“ override a property/method directly on an instance (shadowing):

wallet2.getOwner = function() {return "The owner is secret"; }
console.log(wallet1.getOwner());      // 0x123 
console.log(wallet2.getOwner());      // 0x456
console.log(wallet3.getOwner());      // 0x789 

It's funny; the last time I checked JavaScript about 7 years ago, the prevailing notion was that everything in JavaScript is a function. However, now I'm hearing that everything is an object.

JS has 5 primitive types (like in Java not .NET which does not have primitives, only value types). Those 5 primitives are: string, number, boolean, null and undefined. Everything else is an object.

const flag = true;
console.log(flag); 

const age = 35;
console.log(age); 

const book = "The Art of War";
console.log(book); 

will print in the console:

From the first 5 primitives outlined above only null and undefined will ever be a primitive. The first three are initially primitives as seen in the console, but if needed JS will wrap an object around them. That’s why if I try to call methods on any of them (string, boolean, number) I can.

console.log(book.split(''));

will print in the console:

As we can see JS turned our primitive string into an object that inherits from an array of characters prototype, that further inherits from the Object prototype.

As all value types and reference types inherit from Object in C#, In JavaScript all objects inherit from Object prototype.

Here is the prototypal inheritance chain for different types in JS:

• Object: myObject > Object.prototype > null

• Number: myNumber > Number.prototype > Object.prototype > null

• Boolean: myBool > Boolean.prototype > Object.prototype > null

• String: myString > String.prototype > Object.prototype > null

• Array: myArray > Array.prototype > Object.prototype > null

• Function: myFunction > Function.prototype > Object.prototype > null

You can further explore the inheritance chain and all the properties by creating an object of some type and just dumping it to the console.

And finally a familiar syntax. Using classes:

class Wallet {

    // clean differentiation from regular functions via constructor keyword <3
    constructor(address, balance){
        this.address = address;
        this._balance = balance;
    }

    // methods defined within the class, not all over the place <3
    // using that useless "function" keyword in here would actually crash the program. <3
    getOwner() { 
        return this.address; 
    }

    addToBalance(value) { 
        this._balance += value;
    }

    // encapsulation through getters and setters <3. (although we could do w/o the parenthesis)
    get balance(){
        return this._balance;
    }

    set balance(value){
        if(value >= 0){
            this._balance = value;
        }
    }
}

const wallet1 = new Wallet("0x123", 101010);
console.log(wallet1);

class MultiSigWallet extends Wallet { // extends like in java
    constructor(address, secondAddress, balance){
        super(address, balance);      // super like in java

        this.secondAddress = secondAddress;
    }

    // method override in subclass just like in C#/Java
    getOwner(){ return `first address: ${this.address} & second address: ${this.secondAddress}`; }

}

const w = new Wallet("0x123", 101010);
console.log(w);
w.addToBalance = 5000;          // method from Wallet
console.log(w.getOwner());      // method from Wallet

const msw = new MultiSigWallet("0x456", "0x789", 9999999);
console.log(msw);
w.addToBalance = 6000;          // method from Wallet (no override on MultiSigWallet)
console.log(msw.getOwner());    // method from MultiSigWallet

So there you have it.

In conclusion I am amazed by how strongly JavaScript has developed a syntactic resemblance to C# and Java. It almost feels as though the evolution of JS was influenced by Microsoft developers.

However, it's important to remember that this resemblance is primarily syntactic sugar, as the underlying functionality remains the same.JS still allows you to mess with the properties and methods of an object even after it has been created through the [[Prototype]] object.

Navigate to part three of this three part series where we explore Asynchronous Programming in JavaScript: Part III

You can find the full set of examples over at my github page.

Also if you liked the article, I'm constantly tweeting about this stuff and more. Feel free to follow me on Twitter and drop a comment to say hi!