Functions
As your code grows, you will often need to do the same action more than once.
Instead of typing the same lines again and again, you can save those lines inside a function and reuse them later.
What a function is
A function is a named block of code that performs a specific task.
Think of it like writing down a recipe. Writing the recipe does not bake the cake. It only saves the steps.
In JavaScript, defining a function saves the code, but it does not run it. To run the code inside a function, you must call the function by its name.
function add(a, b) {
const result = a + b;
return result;
}
console.log(add(3,4));
console.log(add(2,8));Why functions are useful
Functions help you avoid repeating the same code.
They also make your code easier to read because a group of steps can have one clear name.
If you need to change what the function does, you can update it in one place instead of editing the same code many times.
First code example
Let's create and use a basic function.
function showGreeting() {
console.log("Welcome to learning JavaScript!");
}
showGreeting();Code walkthrough
Let's break down what is happening:
functiontells JavaScript that we are creating a function.showGreetingis the function name.- The parentheses
()come after the function name. - The curly braces
{}hold the code we want to save. console.log("Welcome to learning JavaScript!");is the code inside the function.showGreeting();calls the function, so the saved code actually runs.
Without showGreeting();, the message would not appear in the Output section.
Calling a function more than once
You can call the same function as many times as you want.
Every time you call it, the code inside the function runs again.
function cheer() {
console.log("Hip, hip, hooray!");
}
cheer();
cheer();
cheer();Mini task
Edit the cheer() code block above.
Change the message inside console.log() to something else, like "You did it!".
Then click Run to see your new message appear multiple times.
Short quiz
Question: What happens if you define a function but never call it?
- A) The code runs automatically.
- B) You get an error message.
- C) The code inside the function does not run.
Answer: C. The code inside the function does not run.
Defining a function only saves the steps. You must call the function to run them.
Small challenge
Create a function named sayGoodbye.
Inside the function, use console.log() to print "See you later!".
Then call the function twice.
// put your code below
console.log()Summary
- A function is a named block of code used to perform a specific task.
- Functions help you reuse code without retyping it.
- You create a function with the
functionkeyword, a name, parentheses(), and curly braces{}. - Defining a function does not run the code inside it.
- You must call the function by its name followed by parentheses to run it.