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));