Creators – Arrays and Classes

Several Values in One Place

This week we looked at two very useful concepts in JavaScript, Arrays (we’ve also called them lists) and Classes (we’ve also called them objects). They are both things that allow one variable to store more than one value at at time. This can often be very convenient and has the potential to save us a lot of typing! Who doesn’t like that?

Arrays

A plain variable in JavaScript can store a single value, we’ve seen that loads of times:

let a = 5;
let b = 7;
let c = a + b; // will be 5 + 7 = 12

An array variable in JavaScript can store more than one value, just by putting them in square brackets and separating them with commas:

let a = [5, 7]
let c = a[0] + a[1]; // This is the same as above!

The code here does the exactly the same thing as the block above it. See that a now has two values in it and we use a[0] to get the first value and a[1] to get the second. This technique isn’t super useful when we only have two values, but the more we have to store, the more useful this gets. Imagine if we had 10 values,  how much shorter would the array version be?

You can also create an empty array and put values in it later:

let a = [];
a.push(5);
a.push(7);

In the code above we create an empty array (nothing between the square brackets) and then use the push() function to add two values into it.

Concept of Classes

A class is a programming concept that lets you define objects which contain both Properties and Methods. Properties are values associated with the object. Methods are actions that we can ask the object to perform.

class

Think of yourself as a Person object and imagine some of the Properties and Methods you might have.

Your Properties might include NameAgeHeightWeight, etc. A simple Method you might have could be SayHi(). That would make you say “Hi, it’s <Name>!”.

A method might have arguments, so it could be SayHiTo(“Dave”) which would make you say “Hi Dave!”.

Classes in JavaScript

Making classes in JavaScript is pretty easy. Let’s look at the Person class we showed above:

class Person{
  constructor(name, age, height, weight){
   this.Name = name; 
   this.Age = age; 
   this.Height = height; 
   this.Weight = weight;
  }
  
  SayHi(){
    Console.Log("Hi, it's " + this.Name + "!");
  }

  SayHi(who){
     Console.Log("Hi " + who + "!" );
  }
}

We say “class“, the name of the class and a pair of curly brackets. Inside these brackets we have three functions (but notice we don’t have to say “function“).

Let’s look at the first of these, called constructor(). This is where we set the class properties. Note that we must put “this.” before properties to distinguish them.

The second two functions, SayHi() and SayHiTo() aren’t too usual, again note that we must use “this.Name” to get the value of the name property.

Download

This week we created a class to represent a bouncing ball and we saw how easy it was, once we’d created the class, to make several of them, all bouncing around simultaneously. This would have taken us a lot more code to do if we hadn’t made a class. As always, the files can be downloaded from our Github page.

 

 

 

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s