Using LLMs for efficient learning
Until now, you've written code that runs in one flow from top to bottom. A function is simply a named block of code that performs a specific task. You can give it some input (parameters), it does its job, and optionally gives you back a result (return value). Functions allow you to break your code into reusable pieces that you can call whenever needed.
Let’s look at an example:
function calculateArea(width, height) {
const area = width * height;
return area;
}
const result = calculateArea(5, 10);
console.log(result); // Output: 50
Decomposing this piece of code we can see the following key parts:
calculateArea - This is what you use to call the function laterwidth and height - These are the inputs the function expects when you call it<aside> ⚠️
Be aware that another term used for Parameters is Arguments. Although they are not totally the same thing, they are used interchangeably online.
</aside>
{} - This is where the actual work happensreturn area; - This sends the result back to wherever the function was calledcalculateArea(5, 10) - This is how you execute the function with specific valuesWhen you call calculateArea(5, 10), the function takes 5 as the width and 10 as the height, multiplies them together, and returns 50.
<aside> ⌨️
Hands on: Create a new JavaScript file and create a function to calculate the volume of a box.
Reminder: the formula to calculate the volume is width * height * length
</aside>
The short answer is: all the time! Functions provide you with great ways to organise your code and increasing the readability of your code. A well-named function immediately tells other developers (and future you) what that code does without needing to read through all the implementation details. Compare these two approaches:
// Without a function - you need to read and understand the logic
if (age >= 18 && age < 65 && hasLicense && !hasSuspension) {
console.log("Can drive");
}
// With a function - the intent is immediately clear
function canPersonDrive(age, hasLicense, hasSuspension) {
return age >= 18 && age < 65 && hasLicense && !hasSuspension;
}
if (canPersonDrive(age, hasLicense, hasSuspension)) {
console.log("Can drive");
}
In the second example, the function name canPersonDrive tells you exactly what the condition checks for, without needing to parse through the boolean logic. The function encapsulates the "what" (checking if someone can drive) and hides the "how" (the specific age and license requirements).
<aside> 💡
Function names commonly start with a verb to indicate the action performed by the function. If it is a modal verb (is, can, etc) then you as a developer can expect it to return a boolean
</aside>
As functions are such a core aspect of programming, JavaScript provides us with a shorthand way of writing the function that will be useful in certain situations which will be covered later in the program. For now let’s introduce the syntax by comparing the two ways of writing a function:
// Regular function syntax
function addNumbers(a, b) {
return a + b;
}
// Arrow function syntax
const addNumbers = (a, b) => {
return a + b;
};
An arrow function tries to follow the way we assign variables by using the const functionName = value syntax. You can also see why it is called an arrow function as it places an arrow => in between the parameters (on the left) and what the function will do (on the right).
Something else that is cool about arrow functions is that they have the possibility to provide an implicit return. That looks like this:
// Arrow function with implicit return
const addNumbers = (a, b) => a + b;
This only works if what you want to return from the function fits in one line. All three versions do exactly the same thing - they take two numbers as input and return their sum. The arrow function syntax becomes especially concise when you have a simple one-line return statement, as you can omit both the curly braces and the return keyword.
<aside> 💡
If you only have one parameter then you can even remove the parentheses 🤯. So for example:
</aside>
const timesTwo = a => a * 2;
timesTwo(10); // -> 20
Technically, either syntax can be used in 99% of the situations. Which situations you cannot are out of the scope of this part of the curriculum as you will not encounter them any time soon. So when to use which is mostly a stylistic choice as long as you are consistent. In most developer teams there is a code style guide that will define what the default way of writing code is.
We suggest using arrow functions for now as they will be extra useful next week, but in future weeks the two syntaxes will be used interchangeably to have you get comfortable with both of them as you should be able to read and write both.
<aside> ⌨️
To help cement arrow function syntax, convert the functions you created so far in your test files to the arrow syntax. Then create an arrow function with no parameters to see how that looks.
</aside>
The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0 **