Skip to main content

Your first function

In the previous lesson we have seen how to generate some output in the console. That's a fundamental tool: without it, we wouldn't be able to see any effect on our screens, and most important we wouldn't be able to make any observations along our path to knowledge.

In this lesson we'll introduce one of the most important concepts in programming, if not the most important at all! You won't be able to perceive such importance yet, but since it's also one of the hardest to digest, the sooner you familiarize with it, the better.

Defining custom features​

We already know how to print something out. It's the only thing we know actually. Instead of the world, let's greet our friend Sally Brown this time:

console.log('Hello Sally Brown');
Toggle Console Output
  • 'Hello Sally Brown'

I apologize in advance for introducing some new syntax all at once.

function greet() {
  console.log('Hello Sally Brown');
}

greet();
Toggle Console Output
  • 'Hello Sally Brown'

What? greet? Why twice? What does function ever mean? And the () without anything in between, and that {} weird other set of brackets. Bear with me a second. First let's observe that there is no change in our output, we still read 'Hello Sally Brown' in the console: it means we haven't introduced nor removed any feature in our original program, and that's a start.

Let's see what happens now:

function greet() {
  console.log('Hello Sally Brown');
}
Toggle Console Output
  • No output

Look ma no output! But how come if the console.log statement is still there? That's true indeed, but it look like that portion of code hasn't been run by the machine.

The difference between the two snippets is the greet() line at the end of the first one. We are close to the solution of the case! In the first example we did two things: we defined something and we referenced it right after.

More rigorously:

  • we declared a new function: function greet() { ... };
  • we called it right away: greet().

We call a function in JavaScript by writing its name followed by round parentheses:

function greet() {
  console.log('Hello Sally Brown');
}

  greet();
//^----^
//|    ⌞ round parentheses
//|
//⌞ name of the function

Actually this is the very first thing we have done in the course:

console.log('Hello World!');

Exactly, console.log is a function! More precisely a global function that the language makes available to you. We'll come back to that later. Why are we not just writing console.log() then, but putting something in the parentheses? Well intuitively, we have to tell the machine what to log. We say that we are passing an argument to the function, to better specify what we need. We'll dive into the matter in the very next lesson.

We have quite some freedom in naming a function:

function someVeryFunnyName() {
  // some code here
}

Spaces in the name are not allowed though, that's why if a function name contains multiple words, we capitalize those after the first. This convention is called camel case be cause of the similarity of the capital letters to the humps of a camel's back 🐪.

Note

Commenting the code​

By the way we encountered some lines starting with two slashes - //. This is how you tell the machine to ignore such line, allowing us to write inline explanations and notes that won't be interpreted. Such lines are called comments.

To be more precise, the slashes make the comment start after them, allowing to write a comment at the end of a line:

console.log(2 + 3); // this line will log 5

Since comments make the machine ignore portions of the program they can be used to temporarily suppress any existing line:

function greet() {
  console.log('Hello Sally Brown');
}

// greet();
Toggle Console Output
  • No output

This operation is called to comment out a line. It is useful to see what happens by removing a part of the program without losing it completely. The change is easy to revert by removing the leading slashes. The operation is unsurprisingly called to comment (back) in. In most editors the shortcut for both operations is the same, saving you from typing and deleting the slashes.

Further function considerations​

We can define as many functions as we need:

function myFirstFunction() { ... }
function someOtherFunction() { ... }
function anotherFunctionWhyNot() { ... }

We can call the same function as many times as we need:

function greet() {
  console.log('Hello Sally Brown');
}

greet();
greet();
Toggle Console Output
  • 'Hello Sally Brown'
  • 'Hello Sally Brown'

Let's stay a moment on this last example: we get twice the same output, even though there is only one console.log occurrence in the code. That is because we are calling greet twice. Calling a function is more or less like telling the machine hey sis, can you please execute whatever is inside the function I am mentioning? Much appreciated!.

The examples so far haven't been particularly exciting, I know. That's because we just know to log stuff. This is the last one for now, I promise!

function greetFriends() {
  console.log('Hello Sally Brown');
  console.log('Hello Charlie Brown');
}

greetFriends();
greetFriends();
Toggle Console Output
  • 'Hello Sally Brown'
  • 'Hello Charlie Brown'
  • 'Hello Sally Brown'
  • 'Hello Charlie Brown'

Don't open the results yet! Can you guess the output?

Conclusion​

Functions are the building blocks of programming because they allow us to extend any programming language with the features we need. We have seen how to define new functions and how to call them, in the next lesson we'll see how to pass information to them.