JavaScript Functions: Basic Concepts You Should Know

Dini Anjelina — Wed, 08 Jul 2026 09:55:03 +0000

Introduction

When learning JavaScript, one of the first concepts you’ll encounter is functions.

Functions are the building blocks of JavaScript. They help you organize code, avoid repetition, and make your programs easier to understand. If variables store data, functions define behavior.

You’ll use functions everywhere: handling user input, processing data, calling APIs, and structuring your code.

In this article, we’ll cover:

What is a function
Function declarations
Function expressions
Parameters vs arguments
Return values
Arrow Functions
Why Functions Matter

1. What is a Function?

A function is a reusable block of code designed to perform a specific task.

Think of it like a machine:

Input → Process → Output

function greet() {
  console.log("Hello!");
}

To run the function, you call it:

greet(); // Hello!

2. Function Declaration

This is the most common way to define a function:

function add(a, b) {
  return a + b;
}

💡 Explanation:

Defined using the function keyword
Can be called before it is declared (because of hoisting)

Key parts:
function → keyword
add → function name
a, b → parameters
return → output value

add(); // ✅ Works!

function add(a, b) {
  return a + b;
}

💡 Why does this work?

JavaScript reads the code first, and function declarations are stored in memory during the initial phase (hoisting).
That’s why you can call the function even before it’s defined in the code.

3. Function Expressions

Functions can also be stored in variables:

function add(a, b) {
  return a + b;
}

💡 Explanation:

Assigned to a variable
Cannot be used before initialization

add(); // ❌ Error: Cannot access before initialization

const add = function (a, b) {
  return a + b;
};

💡 Why does this cause an error?

Because:

const add has not been initialized yet when it is called.
The function itself is not in memory at that moment.

4. Parameters vs Arguments

This is a common beginner confusion:

Parameter: variable in function definition
Argument: actual value passed in

function greet(name) { // parameter
  return `Hello, ${name}`;
}

greet("Dini"); // argument

5. Return Values

Functions can send data back using return.

function multiply(a, b) {
  return a * b;
}

const result = multiply(2, 3);
console.log(result); // 6

If you don’t use return, the function returns undefined.

6. Arrow Functions (Modern Syntax)

A shorter way to write functions:

const add = (a, b) => {
  return a + b;
};

Even shorter (implicit return):

const add = (a, b) => a + b;

7. Why Functions Matter

Functions help you:

Avoid repeating code (DRY principle)
Make code more readable
Break problems into smaller pieces
Reuse logic easily

Conclusion

Functions are fundamental to writing JavaScript effectively.

Once you understand:

how to define them
how data flows in/out
and how to reuse them

you’ve unlocked a huge part of programming.

References

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
https://javascript.info/function-basics

DEV Community: Dini Anjelina