Loading...

JavaScript Functions

Loops steer when work repeats. Functions answer a different question: where do you keep a block of work so you can run it again by name? A function is a named recipe. You define it once. You call it whenever you need those steps. Copy-paste fades; the name stays.

What is a function?

In JavaScript you declare a function with the function keyword, a name, parentheses (), and a body in { }. Nothing in the body runs until you call the function — write the name and (). Think “pack the steps, then press play.”

Parts of a function

📊 Function anatomy

Part Role Everyday fit
function keyword starts the declaration “here comes a named recipe”
name how you call it later sayHi, showTotal — clear verbs help
() after the name call site / later: inputs empty () still means “run now”
{ } body the steps that run on each call logs, math, page updates
call name() runs the body now reuse without rewriting the body

Defining only stores the recipe. Calling runs it. If you never call, the body stays quiet — that is normal, not a bug in the language.

Declare and call

javascript 
function sayHi() {
console.log("Hi");
}
sayHi();

Declare, then call

The first three lines define sayHi. The last line calls it. You should see Hi in the console. Without sayHi();, the function exists but never runs.

Call the same function twice

javascript 
function beep() {
console.log("beep");
}
beep();
beep();

Reuse one body

One definition, two calls — beep prints twice. That is the point: write the steps once, run them whenever the story needs that sound again. Changing the body later updates every call site that uses this name.

Several steps in the body

javascript 
function showReady() {
console.log("loading");
console.log("ready");
}
showReady();

The body can hold several steps

On one call, both lines run in order: loading, then ready. A function is not limited to one statement — pack the whole mini-task inside the braces.

Local work inside a function

javascript 
function greetCity() {
let city = "Tehran";
let line = "Hello from " + city;
console.log(line);
}
greetCity();

Local work stays in the recipe

city and line live inside greetCity. Each call builds the message and logs Hello from Tehran. You do not need those names outside the function for this pattern — the call is the trigger.

Fill a page element

javascript 
function fillOut() {
let box = document.getElementById("out");
box.textContent = "Function ran";
}
fillOut();

Run work for the page

Same idea as earlier DOM lessons: find an element, set textContent. Wrapping it in a function lets a button, a timer, or a script call fillOut() when the page should update — one name, one job.

Show a function on the page

Define a function that writes a short line into a paragraph, then call it from the script so the visitor sees the result.

Page call of a function

html 
<!DOCTYPE html>
<html>
<head>
<title>functions — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
function showMsg() {
let box = document.getElementById("msg");
box.textContent = "Hello from a function";
}
showMsg();
</script>
</body>
</html>

The page shows Hello from a function. The body of showMsg did the DOM write; the call at the bottom pressed play. Change the string, refresh, and read the new line. Next lesson goes deeper on parameters — values you pass into the parentheses when you call.

Try it yourself

  1. Declare function hello() that logs "hello" and call it once.
  2. Call that same function a second time without rewriting the body.
  3. Make a function whose body logs two different words in order.
  4. Inside a function, build a string with let and log it.
  5. Write a function that sets #out to "ok" (or use the HTML demo’s id).
  6. In the HTML demo, change only the message string, refresh, and read the paragraph.

Common mistakes

  • Defining a function and forgetting to call it with ()
  • Writing sayHi without () — that names the function, it does not run the body
  • Copy-pasting the same three lines instead of calling one function twice
  • Putting work outside the { } and expecting the function name to “own” it
  • Mixing this lesson up with parameters/return — those come next; here focus on define + call

Summary

  • A function packs steps under a name
  • Declare with function name() { … }
  • Call with name() to run the body
  • One body, many calls — that is reuse
  • The body can hold several statements and local let work
  • Page updates fit naturally inside a function you call when needed
  • Next: parameters — pass values into the call

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 27 of 29
Javascript Tutorial