JavaScript For C# Developers: 2. Everything is an Object

Category: JavaScript
Last Modified: May 2 2017
May 20 2015

JavaScript is actually quite a simple language.  It is described as a loosely typed language, which means that unlike C# it doesn’t enforce a strict “typing” model. 

In fact, in JavaScript, aside from a few primitive value types, everything is an object.  Ok, some of you C# developers are saying – that’s true of C#, everything in C# is considered an object.  The difference is that whereas in C# everything is an instance of a class which "derives” from the Object class, everything in JavaScript actually is an object.

This is demonstrated in Listing 1.

Listing 1 : Examples of JavaScript types

var name = "Michael";  var isClosed = true;  var cat = {     name: "fluffy",     color: "ginger" }  var numbers = [0, 1, 2, 3]  var add = function (a, b) {     return a + b; };  console.log(typeof (name)); // "string" console.log(typeof (isClosed)); // "boolean" console.log(typeof (cat)); // "object" console.log(typeof (numbers)); // "object" console.log(typeof (add)); // "function" 

Note that both the cat and the array (numbers) are identified as an object type, and while a function is identified as such, it is really just a special type of object - an object that can be invoked.

In fact there are only seven possible return values of the typeof function:

  1. number
  2. boolean
  3. string
  4. object
  5. function 
  6. null
  7. undefined

 

In JavaScript an object is an associative array of name/value pairs, augmented by prototypes (more on prototypes in a future post). 

In the cat example we can access the property using the “.” notation, familiar to C# developers, but because it is just an array we can also access the value of the property using an array indexer (see Listing 2)

Listing 2: Accessing a JavaScript Object’s Properties

var cat = { name: "fluffy", color: "ginger"}  console.log(cat.name); // "fluffy" console.log(cat[“color”]); // "ginger"

The idea that an object is just an array of name/value pairs is kind of interesting.  This means that at any time in the life cycle of an object, I can augment it by adding a new property - or delete an existing property.

Listing 3: Adding and Deleting an Objects Properties

var cat = { name: "fluffy", color: "ginger"}  cat["breed"] = "Siamese";  delete cat["name"];  console.log(cat.name); // "undefined" console.log(cat.breed); // "Siamese"

I can also add or remove “methods” - the term used to describe a property of type function.

Creating Objects

As has been demonstrated above, when creating the cat object, the simplest way to create an object is to use an object literal.

var cat = { name: "fluffy", color: "ginger"};

However you could create an object by using the Object constructor function.

var cat = new Object( {     name: "fluffy",     color: "ginger" });

Or we can make it more re-usable by creating a constructor for our Cat object.

function Cat(name, color) {     this.name = name;     this.color = color; }

and then create our Cat object by calling our custom constructor function.

var cat = new Cat("fluffy", "ginger");

Note that constructor functions are a special type of function.  They must be called using the new keyword, and by convention they are named using Pascal-style casing (first letter is capitalized) rather than camel-casing which is the norm for JavaScript functions.

So that’s a (very) brief introduction to JavaScript objects.  In future posts I will dive deeper into how JavaScript’s prototypal inheritance differs from C#’s class-inheritance models.

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

Tags