Skip to content

Functions

Marcelo Barsotti edited this page Jan 3, 2019 · 5 revisions

A sequence of computer program instructions to perform a specific task, packaged as a unit, is called a subroutine. In Javascript you create subroutines using functions. There are many reasons to write your code in functions. Among them:

  1. you can organize your code in smaller parts, that are easier to understand on their own;
  2. you can reuse the function over and over again and from multiple places (for example, console.log is a function you will use many, many times throughout this course);
  3. you can isolate parts of your code from others, making it harder to introduce unwanted errors.

To create functions in Javascript you have to write the keyword function followed by one or more spaces, the name of your function, a list of parameters between parenthesis, and your code between curly braces. For example, let's say you frequently want to write the current date and time to your console, so you know when the output was generated. You could write a function like this one:

   var now = new Date();
   console.log(now);
}```

Woah, too much information! Ok, let's break it down and talk a little about coding in Javascript in general.

First, as in any language, there are some _keywords_. These are special words that have a specific meaning in the programming language and cannot be used for anything else in the program. In the example above, `function` and `var` are Javascript keywords. If you type them in an editor with syntax highlight, they will appear in a different color, so you can spot keywords from miles away. 

Second, there are spaces. When you write Javascript, just like in English for the most part, you have to separate words using spaces, and you use spaces before or after certain symbols (or punctuation) to make your code or text more readable. Specifically in Javascript, the characters `space`, `tab`, and `new line` (or `carriage return` or `enter`) are all considered "spaces". In some places spaces are required, for example to separate words, and in others they are optional. Wherever you can use one space, you can also use many spaces. For example if you have three tabs followed by one new line and then by five spaces, Javascript will treat all these characters the same way it would treat one single space. You can use this to make your code more readable, and we will see some space conventions used to make code prettier.

Third, you can create your own names for some Javascript elements. In the example above we create our own name for the function, `printWithDateAndTime`, and for one variable, `now` (we will talk about variables in another part of the course). Identifiers start with one character but they cannot contain spaces (otherwise Javascript would consider more than one identifier, because spaces are used to separate words in the language). So, in order to make your spaceless names more readable, we use the convention of starting every following English word in the identifier with a capital letter. That is why "With", "Date, "And", and "Time all start with a capital letter. Notice how it is easy to read `printWithDateAndTime` even though there are no spaces between the words. If the very first word starts with a lowercase letter we say we are using the camel case convention. If the first word starts with an uppercase letter, we say we are using Pascal case convention. We will learn that it is common to use camel case for certain Javascript elements, and Pascal case for others. As you have already guessed, variables and functions, as in the example above, are usually written using camel case.

Fourth, there are some paired symbols, like parethesis `( )` and curly braces `{ }`. These pairs are used to contain lists of other elements. For example we will learn that parenthesis can contain a list of parameters to a function, and curly braces can contain a list of Javascript code statements. Curly braces containing Javascript code is very important, and we call it a code block. In the example above you have the following code block:

```{
   var now = new Date();
   console.log(now);
}```

Fifth, you may have notices a semicolon after each Javascript statement. It serves to inform the computer that the statement ended. It is like a period in English sentences. You could even put two statements in the same line if you use the semicolon at the end of each one, but your code will be a lot more readable if you write one statement per line, so it is considered a best practice.