Last week we learned all about variables. This week we are focused on just one thing: functions.

Functions are the centerpiece of many programming languages, including JavaScript. One way or another, everything runs inside of a function. In this lesson, we are going to go step-by-step through the fundamentals of functions and functional programming.

Coding Environment

For this lesson, I was able to make a pretty significant upgrade to ngclub.app which is based on Angular and Blockly. Each student can go here to follow along with the lesson:

https://ngclub.app

Besides enabling some new blocks (logic, loops, arrays, etc.) and some minor style updates, there are two major changes to the generated code:

  1. All variables generated are now function scoped. This will make functional programming much easier.
  2. If you have any code outside of a function, the entire code area will highlight red. This is to remind the developers that they need to put code in functions.

Note that one key missing feature which I will add next week is the creation of objects. I didn’t have time to get that working, but I am close, so it will definitely be there in future lessons.

Function Fundamentals

Functions are one of the fundamental building blocks in JavaScript. A function is a JavaScript procedure—a set of statements that performs a task or calculates a value. To use a function, you must define it somewhere in the scope from which you wish to call it. –MDN

A function definition consists of the keyword function, followed by:

  • Name of the function
  • List of input parameters enclosed in parentheses and separated by commas
  • JavaScript code statements enclosed in curly brackets, { }

For example:


function add(one, two) {
  return one + two;
}

In this code, the function defined is called add. The add function has two input parameters, one and two. In the function, there is one statement which returns the result of one + two.

When you run this code, nothing happens. That is because the function is defined, but it is not executed. Think of it like you bake a pie, but you didn’t eat it yet. The pie is there and ready to be eaten when you want. To execute the function (i.e. to eat the pie) you need to call the function like this:

add(3, 6)

This line of code would be below the function definition. So, when this code runs, the add function will be executed with the number 3 assigned to the input parameter one and 6 assigned to the input parameter two. Then one + two translates to 3 + 6 which equals 9. Thus 9 will be returned from the function.

There is at most one value returned from a function. That value can be assigned to a variable like this for example:

var sum = add(10, 5);

In this case, the add function will return 15 which is then assigned to the variable called sum.

Functional Programming

Functional Programming (or FP for short) is a really big topic, but there are a few important things we will go over:

  1. Try to keep your functions “pure”
  2. Avoid shared state
  3. Avoid side-effects

A pure function is one that only uses the values input as parameters and returns a result. In other words, the function doesn’t reference anything in the global scope.

Of course, it is impossible to write a full program without any side effects. But you can isolate/limit your side effects to a small surface area. For that reason, in ng-club we will follow a few rules:

  1. Try to use pure functions as much as possible
  2. Have one function called run() that contains all side effects and is used as the entry point to your code

So, as an example this is how your ng-club code should look like:


function doSomething(oneValue) {
  return oneValue + 'something else';
}

function doAnother() {
  return 'yo';
}

function main() {
  var str = doSomething('woo');
  var str2 = str + doAnother();
  console.log(str2);
}

main();

As you can see here there are a few functions defined and then the main() function brings everything together.

Categories: Blockly

Jeff Whelpley

CTO at GetHuman, Google Developer Expert, AI and Angular Boston meetup organizer

Leave a Reply

Your email address will not be published. Required fields are marked *