Let's get Classy - Ricky Thomas

Thus far throughout DevBootcamp my main focus has been on the Ruby programming language. However, this last week I spent a good amount of time with Javascript and began to get a bit of a feel for it. During my studies many things about Javascript seemed to fit right in with the concepts I had already learned in Ruby, but there are definitely many differences. So far many of the differences seem to be syntactic though I'm sure as I continue my studies I will find more and more deviations. In this blog I'm going to look at the differences between Ruby classes and Javascript constructor functions.

Ruby Classes

In my previous blog Booo Chores 10.18.14. I discuss in depth how to create classes in Ruby. But for those of you who are just joining us, let's have a bit of review!

  class Blog
  attr_reader :about, :author
    def initialize(about)
      @about = about
      @author = "Ricky"
    end
  end

  new_blog = Blog.new("Ruby")
  new_blog.about
  ==> "Ruby"

  new_blog.author
  ==> "Ricky"

In the example above, I've created a new Blog class. I've also given this class an instance variable called @about which when we create a new instance of the Blog class called new_blog, we can then call the new about method in order to display the value of @about; in this case "Ruby." Now let's add a class method.

  class Blog
  attr_reader :about, :author
    def initialize(about)
      @about = about
      @author = "Ricky"
    end

    def is_about
      puts "This blog is about #{self.about}."
    end
  end

  another_new_blog = Blog.new("cats")
  another_new_blog.is_about
  #prints "This blog is about cats."
  another_new_blog.author
  ==> "Ricky"

Notice that even though we've initiated a new Blog class object (about cats this time) I'm still the author! This class could continue to be built upon until it was a great way to create new blog objects and give them each in turn their own qualities. Let's now look at some Javascript.

Javascript Constructor Functions

Javascript is a classless language but there are still ways to create multiple objects that all share the same properties. First let's look at how to create a basic object in Javascript using what's called literal notation:

  var blogObject = {
    about: "Javascript",
    author: "Ricky"
  }

  blogObject.about
  ==> "Javascript"

This is pretty simple so far. We have a new variable (var blogObject) and we're setting it to have the value of an object we've created with a couple of properties; about, and author. That's all well and good but I want to be able to create new blogs that are about different things! Observe the following:

  function blogObject(about) {
    this.about = about;
    this.author = "Ricky"
  }

  dog_blog = new blogObject("Dogs");
  dog_blog.author
  ==> "Ricky"

  dog_blog.about
  ==> "Dogs"

In the code above, this works in the same way that self works in Ruby. We now have a function that can be used to create blog objects! Notice the differences in syntax. When we invoke functions using new they are then constructor functions. Using new creates a new object and also indicates that this should refer to that new object as opposed to one global object. But how can we make it so that each new object created is able to perform an object specific function? In the Ruby code earlier we made the method is_about so that any Blog class object could use it. Now let's look at a way to do this in Javascript:

  function blogObject(about) {
    this.about = about;
    this.author = "Ricky"
  }

  blogObject.prototype.isAbout = function() {
    return "This blog is about " + this.about + ".";
  }

  var newBlog = new blogObject("fish");
  newBlog.isAbout();
  ==> "This blog is about fish."

Now anytime a new blogObject is created in this program the isAbout function will be available to it for use. This is called prototypal inheritance. In the second bit of code where we establish a blogObject.prototype we are just basically accessing that object and writing a function into that objects prototype. We can view an objects prototype by calling the following:

  Object.getPrototypeOf(newBlog);
  ==> { isAbout: [Function] }

Summary

You can see that these two coding languages are very different in some ways. Especially syntactically, but also in that Javascript is not able to make "classes." Of course it does have it's own way of achieving similiar results. I hope this blog has helped you in your learning!
Thanks for reading!
- Ricky