Chapter 2: Functions

Functions are perhaps the most important member in Javascript. Functions are so called "first class citizens" in Javascript. They can be assigned to variables and passed around. We'll go into functions even further in the next chapters about scope and closures.

Declare functions

Functions can be declared in 2 ways. A named function:

// named function
function myFunction () {}

// example
function addNumbers(first, second) {
    var result = first + second;
    return result;
}
console.log(addNumbers(1, 2)); // 3

Or an anonymous function (assigned to a var)

// anonymous function
var myFunction = function () {};

// example
var addNumbers = function (first, second) {
  var result = first + second;
  return result;
};
console.log(addNumbers(1, 2)); // 3

You may use either method, but I suggest the anonymous function (because of confusion that may lead to hoisting of named functions). In Javascript you can assign functions to variables. You can even pass functions as parameter in another function. This is useful when making callback functions.

var addNumbers = function (first, second, callback) {
  var result = first + second;
  // call the callback function!
  callback(result);
};
addNumbers(1, 2, function (result) {
  console.log('The result is: ' + result); // 'The result is: 3'
});

Immediately Invoked functions

A useful trick in Javascript is calling functions instantly instead of assigning it to a var first and then calling it. Wrap the function in brackets () and then call it:

// function that's called immediately:
(function () {})();

// example
(function (a, b) {
  console.log(a); // 1
  console.log(b); // 2
})(1, 2);

It might look a little silly, but this trick is very useful for scope changes. More on scopes next chapter!

Pass by value or pass by reference?

When you pass a var into a function, it's important to remember whether the variable is a value or a reference. The difference is that pass by value means the variable is copied/cloned, whereas pass by reference means the original variable can be accessed. In Javascript it works as following:

Booleans, Numbers and Strings are passed by value. Everything else is passed by reference.

Here are a few examples:

var string = 'Hello';
var number = 123;
var cat = {
  name: 'Nom Cat',
  age: 5
};

// a function that edits a string, number and an object
var doStuff = function (str, num, obj) {
  // append world in the string
  str += ' world!';
  console.log(str); // 'Hello world!
  
  // add 1 to the number
  num += 1; 
  console.log(num); // 124
  
  // add 1 to the age property of the object
  obj.age += 1;
  console.log(obj); // {name: 'Nom Cat', age: 6}
}; 

// call the function
doStuff(string, number, cat);

// let's check our variables now
console.log(string); // 'Hello'
console.log(number); // '123'
console.log(cat); // {name: 'Nom Cat', age: 6}

In the above example, we can clearly see that var string and var number aren't changed after calling doStuff. The variables str and num were local to the function and didn't change the original string and number. This didn't apply to cat, which was changed after doStuff.

So remember that everything except Number and String are references to the original variables. It's very easy to accidentally change an object that you didn't intend to.