Blog

This week everyone’s worked on his/her own project: building a JavaScript/JQuery game of their choise. Even though a week might seem a short time for such a project for someone who was practically thrown into the deep and murky water of web dev just two weeks earlier it felt like a blessing to have time to go thru (many times with the teacher assistant) everything we’ve learned so far and build the game by the book (more or less), i.e. creating a file for the logic of the game and another one for the DOM manipulation, using a constructor in the ”logic file”, using prototypes as well different array methods (splice, sort, pop and _shuffle from LoDash) and manipulating the DOM with JQuery and/or ”pure” JavaScript. Below is the outcome of my project, a game which solves all the problems of the numerous advanced students of Finnish who are dying for revising their sports vocabulary in Finnish ; -)

P.S. I”ve probably never felt so stupid in my entire life like during the first two weeks of this course. Everything we were taught in the morning we had to practice in the afternoon and evening and it’s not only that there was a huge amount of new information to process, but also the exercises we were given were (as I’ve found out later on), to put it mildly, challenging, even for my course mates who have been doing programming much more seriously than myself and for a much longer time. Then came this third week, when I embraced that my web dev knowledge is close to zero and that the last two weeks’ learning material is in an absolute chaos in my head and decided to work my way up from there. With a lot of help from the TA. I’m still useless when it comes to e.g. JavaScript katas used in technical interviews, but hey, I’ve done this project and I more or less understand everything in my code. Except perhaps the part on generating randomly the Finnish word and the English translations so that there would always be different translations on the different cards + that one of the cards contains the right translation. My head is still spinning every time I read that code. Well, that’s how it is right now, but some day, one day…

 

JavaScript:
1. Passing functions into other functions as arguments (i.e. resultFn, which will be ”replaced” in the add() function call by logDone or square):

function add (first, second, resultFn) {
console.log(”Add function started”);
resultFn(first + second);
}

function logDone (num) {
console.log(”I’m done! The result is: ” + num);
}

function square (num) {
console.log(”The square is: ” + num*num);
}

add(2, 3, logDone);
add(2, 3, square);

2. Using functions as variables (here: logDone):

function add (first, second, callbackFunc) {
console.log(first + second);
callbackFunc();
}

var logDone = function() {
console.log(”I’m done!”);
};

add(2, 3, logDone);

3. ’Return’ breaks the flow of the code and returns a value:

var sayHello = function(){
return ”I’m a string”;
console.log(’hello’);

}
console.log(sayHello())
//”I’m a string” (i.e. console.log won’t work, because of breaking the flow of the code with return)

4. Reassigning a variable (console.log will print out 4, because of reassigning var a to 4 inside function inner):

var a = 1;
var b = 2;

function inner() {
a = 4; // not using `var`
var b = 3; // using ’var’ | Shadowing the global variable
}

inner();
console.log(a);
console.log(b);

5a. Because of hoisting when console.logging inside a function the globally defined variable that has been reassigned inside that function we’ll get an ’undefined’ for it:

var name = ”Fer”;

function changeName () {
console.log(”Original name was ” + name);

var name = ”Harry”;
console.log(”New name is ” + name);
}

changeName();
//’Original name was undefined’
//’New name is Harry’

5b. Fixing the ’undefined’ problem mentioned above:

var name = ”Fer”;
console.log(”Original name was ” + name);

function changeName () {

var name = ”Harry”;
console.log(”New name is ” + name);
}

changeName();
//’Original name was Fer’
//’New name is Harry’

6a. When using ’this’ in a function inside a function, ’this’ will refer to the global variable, in this case the var value = 500:

var value = 500;
var obj = {
value: 0,
increment: function() {
this.value++;

var innerFunction = function() {
console.log(this.value);
}

innerFunction(); // Function invocation pattern
}
}
obj.increment(); // Method invocation pattern
//500

6b. Making sure the ’this’ in a function inside a function is referring to the right variable:

var value = 500;
var obj = {
value: 0,
increment: function() {
var that = this;
that.value++;

var innerFunction = function() {
console.log(that.value);
}

innerFunction(); // Function invocation pattern
}
}
obj.increment();
//1

7a. Modifiying with ’apply’ the context to which ’this’ may refer to (here from the object foo to window):

var obj = {
foo: function(a, b, c) {
console.log( arguments );
console.log( this );
}
};

obj.foo(1,2,3);
// ==> [1,2.3]
// ==> obj {}

obj.foo.apply(window, [1,2,3]);
// ==> [1,2.3]
// ==> window {}

7b. Modifiying with ’bind’ the context to which ’this’ may refer to (here from the object foo to window):

var obj = {
foo: function() {
console.log( this );
}
};

var bindFoo = obj.foo.bind(window);

obj.foo(); // ==> obj
bindFoo(); // ==> window

8a. ’this’ is referring to the object AT THE MOMENT OF THE EXECUTION, that’s why in the jQuery code below ’this’ works only when pressed the first time (after that you get undefined):

var dog = {
sound: ”Whoof!!!”,
makeSound: function(){
console.log(this.sound);
}
}
dog.makeSound()

$(’button’).click(dog.makeSound());

8b. Making ’this’ work every time you click the button with the help of ’bind’:

var dog = {
sound: ”Whoof!!!”,
makeSound: function(){
console.log(this.sound);
}
}
dog.makeSound()

$(’button’).click(dog.makeSound.bind(dog));