#042 Front-side (7): Introduction to JavaScript 4 (Functions and Arrow Functions)

Introduction to JavaScript Functions for Beginners

What is a function?

A function is a "set of instructions" that performs a specific task. Think of it like a recipe for cooking.

• If you have a recipe (function), you can make the same dish (process) as many times as you like.

• If you change the ingredients (arguments), you can make slightly different dishes (results).

Basic structure of a function

function 関数名(引数1, 引数2, ...) {
    // 処理内容
    return 結果; // 必要な場合
}

A function that performs addition

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

// 関数を使ってみる
console.log(add(5, 3)); // 出力: 8
console.log(add(10, 20)); // 出力: 30

How to use functions

1. Function definition: Create a function using the function keyword, as in the example above.

2. Function call: Execute a function using its name and parentheses (e.g., add(5, 3)).

3. Arguments: Values passed inside the parentheses. They are used to provide information to the function.

4. Return value: The value specified by return is sent back as the result of the function.

Benefits of using functions

1. Code reuse: You don't need to write the same process over and over again.

2. Organization: You can manage programs by breaking them down into small parts.

3. Easy to modify: By fixing one place, it is reflected in all locations where that function is used.

This diagram visually represents the relationship between JavaScript functions, arguments, and return values. Below is an explanation of the diagram:

1. Function (blue box in the center):

   • The large blue box represents the add function.

   • A function is like a "machine" that receives input (arguments), performs processing, and returns output (return value).

2. Arguments (orange boxes on the left):

   • The two orange boxes represent the arguments a and b.

   • In this example, 5 is passed to a and 3 is passed to b.

   • Arguments are input values given to a function.

3. Processing content (inside the blue box):

   • This shows the processing performed inside the function.

   • In this example, it performs the addition a + b.

4. Return value (green box on the right):

   • The green box represents the return value of the function.

   • In this example, 8, which is the result of 5 + 3, is the return value.

5. Arrow:

   • The arrow from left to right indicates the flow of data.

   • It represents that arguments are input into the function and, after processing, output as a return value.

6. Function call:

   • At the bottom of the diagram, it says add(5, 3).

   • This shows how to call this function.

By using this diagram, you can visually understand the sequence of a function 'receiving arguments, performing processing, and returning a result.' By viewing a function as a 'machine that receives input and generates output,' even programming beginners can intuitively grasp the basic concepts of functions.

Introduction to Arrow Functions for Beginners

What are arrow functions?

Arrow functions are a new and more concise way to write functions in JavaScript.The name 'arrow' comes from the => symbol, which is shaped like an arrow and used when defining the function.

Basic syntax

Let's compare regular functions and arrow functions.

Regular function

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

Arrow function

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

Features of arrow functions

1. Can be written more briefly: Especially for simple functions, they can be written very compactly.

2. The function keyword is not needed: Use => instead.

3. return can sometimes be omitted: If the function returns a result in one line, you can omit the {} and return. Example: const add = (a, b) => a + b;

4. If there is only one argument, parentheses can be omitted: Example: const square = x => x * x;

Sample program: A function that doubles a number

The top and bottom perform the same process

// 通常の関数
function double(number) {
    return number * 2;
}

// アロー関数
const double2 = number => number * 2;

console.log(double(5)); // 出力: 10
console.log(double2(5)); // 出力: 10

Points to note

• Arrow functions are always anonymous functions (they do not have a name). They are used by assigning them to variables.

Conclusion

Since this has become a bit long, I will close the discussion here for now.
As this is my own personal study log, the writing may be disorganized.
I apologize for that.

Thank you for reading until the end.
I also read everyone's notes and gain many insights.
I am truly grateful🙏.
I look forward to your continued support.