자바스크립트 함수: 알아야 할 기본 개념

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:

1. What is a function
2. Function declarations
3. Function expressions
4. Parameters vs arguments
5. Return values
6. Arrow Functions
7. 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!");
}

Enter fullscreen mode Exit fullscreen mode

To run the function, you call it:

greet(); // Hello!

Enter fullscreen mode Exit fullscreen mode

2. Function Declaration

This is the most common way to define a function:

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

Enter fullscreen mode Exit fullscreen mode

💡 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;
}

Enter fullscreen mode Exit fullscreen mode

💡 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;
}

Enter fullscreen mode Exit fullscreen mode

💡 Explanation:

• Assigned to a variable
• Cannot be used before initialization

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

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

Enter fullscreen mode Exit fullscreen mode

💡 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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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;
};

Enter fullscreen mode Exit fullscreen mode

Even shorter (implicit return):

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

Enter fullscreen mode Exit fullscreen mode

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