Lesson 14/100

Tutorials JavaScript Tutorial

Functions — Complete Guide

Functions — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of JavaScript Tutorial on Toolliyo Academy.

On this page

JavaScript Tutorial · Lesson 14 of 100

Functions

BasicsObjects & dataAsync & DOMAdvancedToolsProjects

Beginner · 1 — Learn by example · ~6 min · JS Control Flow & Functions

What is this?

A function is a reusable block of code with a name. You define it once and call it whenever you need that work done — calculate tax, format a date, validate email.

Why should you care?

Without functions you copy-paste the same logic everywhere. One bug fix then means editing ten places.

See it live — copy this example

Paste into an HTML file or the browser console (F12). Use Run below when the live editor is available.

function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("Sandeep"));
console.log(greet("Anita"));

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

Code
Result

What happened?

  • function greet(name) declares a function with one parameter.
  • return sends a value back to the caller.
  • greet("Sandeep") calls the function with an argument.

Practice next

  1. Run greet with different names.
  2. Add function add(a, b) { return a + b; } and test it.
  3. Call greet() with no argument and note undefined.
  4. Give greet a default parameter: name = "Guest".
  5. Return an object from a function that builds a user profile.

Remember

function name(params) { ... return value; } Call with name(arg) Parameters are placeholders; arguments are real values

ScriptVerse invoice formatter

formatCurrency(amount) is reused in cart, receipts, and admin reports instead of duplicating formatting logic.

Outcome: Functions centralize business rules so one fix updates every screen.

Interview prep for this lesson

Practice these questions aloud after reading—each links to a full structured answer.

Mid PDF Detailed
What are higher-order functions?
Short answer: A higher-order function is a function that takes another function as an argument or returns a function. They are key to functional programming in JavaScript. Example: function greet(name) { return `Hello, $…
Mid PDF Detailed
What are functions in JavaScript?
Short answer: Functions are blocks of reusable code that perform a specific task. Example: function greet(name) { return `Hello, ${name}`; } Example code Functions are blocks of reusable code that perform a specific task…
Junior PDF Detailed
What is the difference between inline-block and block?
Short answer: block elements take full width and start on a new line. inline-block behaves like inline (stays in the same line) but allows setting width, height, margin, and padding. Example code .block { display: block;…
Mid PDF Detailed
Explain the difference between HTML4 and HTML5.
Short answer: HTML5 is the modern evolution of HTML4, introducing better structure, multimedia support, and APIs. Explain a bit more Follow me on LinkedIn: HTML4 mainly focused on document markup, while HTML5 focuses on…
Mid PDF Detailed
Class selector: Targets elements with a class.?
Short answer: .highlight { background: yellow; } .highlight { background: yellow; } .highlight { background: yellow; } .highlight { background: yellow; } .highlight { background: yellow; } .highlight { background: yellow…
Questions on this lesson 0

Sign in to ask a question or upvote helpful answers.

No questions yet — be the first to ask!

JavaScript Tutorial
Course syllabus

JavaScript Tutorial

Tutorial — Basics
Control Flow & Functions
Objects & Collections
Strings, Dates & RegEx
Async JavaScript
HTML DOM & Web APIs
Advanced
Performance & Security
Testing & Tooling
Projects
Toolliyo Assistant
Ask about tutorials, ebooks, training, pricing, mentor services, and support. I use public site content only—not admin or internal tools.

care@toolliyo.com

Need callback? Share your details