Day 31 at Makers Academy

JavaScript

JavaScript

Today is the start of a new language week, as we are starting to learn JavaScript. JavaScript is a language that runs natively in your web browser, therefore changes can be made to the web page on the fly without having to reload the page. Here is an example from w3schools. You can see that the time updates every time you press the button, but the page doesn’t have to reload.

This is why JavaScript is the language of the web, as it can dynamically make changes and store information. JavaScript is different to Java, despite the similar name.

One of the big differences between Ruby and JavaScript is that it is asynchronous, which means it doesn’t necessarily run in the same order it’s written. Ruby on the other hand is synchronous, so you know it will always execute in the order you write it. This is because the internet used to be a lot slower, so JavaScript would load the faster bits first, then go back to the slower bits. If it didn’t do this, then the page would get caught loading something big and would not show you most of the content.

Learning a New Language

For us, JavaScript is completely new. Unlike with Ruby where we had six weeks to learn it, with JavaScript we have one week. This is going to be a challenge, but it is essentially core to what Makers Academy are trying to teach us. In the last six weeks, they haven’t just taught us Ruby, it has been about learning how to code, so when we start to learn JavaScript, we should feel comfortable in knowing how the code will work and the basic structures. The differences will mainly be in syntax, how the code is written.

I am looking forward to working with JavaScript, as it is much more front end than Ruby, so I will actually be able to see the results of what I am doing. We started to get this with the web apps in the last couple of weeks, but it will be much more of a focus now.

Ruby vs JavaScript

Ruby and Javascript are both object oriented, so there are quite a few similarities between them. I found a useful website which highlights differences however, here. I found some more useful resources here and here and here.

I think the biggest confusion will be with Classes and Methods. Where in Ruby it was clearly defined, a Class had to be written as Class Example, and a method was always def method, in JavaScript they both appear to be written as function(), although I think you need to include prototype for a class, I guess I will find out!

Running through this resource given to us by Makers was pretty helpful in getting some of the basics of JS.
Here are some examples of differences:

Variables

In JS we use camelCasing rather than snake_casing in Ruby. This means rather than joining the words with underscores, each new word is started with a capital letter.

Ruby

the_meaning_of_life = 42

JavaScript

var theMeaningOfLife = 42

The keyword var is used to create a new variable.

Methods

Camel casing is used for methods too…

Ruby

class Dog   
  def dog_breed
   # method code
  end 
end

JavaScript

Dog.prototype.dogBreed = function() {
  // code
}

We cannot use question marks for Boolean methods, so instead we use is…

Ruby

class Dog   
  def purebreed?
   true
  end 
end

JavaScript

Dog.prototype.isPurebreed = function() {
  return true;
}

JavaScript doesn’t have the same concept of private methods like Ruby, so you have to add an underscore in front of the method name…

Ruby

class Banana
  private

  def my_private_method
    # ...
  end
end

JavaScript

Banana.prototype._myPrivateMethod = function() {
  // ...
}

Constants

There isn’t really the same concept of Constants in JS either, however there is a convention to mark a value you don’t expect to change by writing it in all caps, like in Ruby. The value can still be changed without warning however, unlike Ruby.

Ruby

class Number   
  LEGS_CONSTANT = 4

end

JavaScript

Dog.prototype.NUMBER_OF_LEGS = 4;
// or
const NUMBER_OF_LEGS = 4;

The First Rule of JavaScript…

Close your brackets the moment you open them.

Due to all the curly brackets and nesting, it is easy to get confused, so this helps with that!

There are obviously more things to learn…

Almost everything in JavaScript is an object, the primitives being the only exceptions. There are 6 primitive data types: string, number, boolean, null, undefined, symbol.

All primitives are immutable, i.e., they cannot be altered. It is important not to confuse a primitive itself with a variable assigned a primitive value. The variable may be reassigned a new value, but the existing value can not be changed in the ways that objects, arrays, and functions can be altered.

For our project we recreated Fizzbuzz in JavaScript. Basically it needs to print all numbers 1 to 100, but for every number divisible by 3 it prints “Fizz”, 5 it prints “Buzz” and both it puts “Fizzbuzz”. We mostly followed the walkthrough to understand the differences, but it was not too bad! We have started using the test framework Jasmine, which runs all the test on a html webpage! This means we can also play with the console while reviewing our tests.

Todays song of the day: