DEV Community

Cover image for My React Journey: Day 3
Ayoola Damilare
Ayoola Damilare

Posted on

My React Journey: Day 3

Today, I explored one of the most essential concepts in programming: Functions. Functions are a game-changer because they make code reusable, reducing the need for repetition. Let me break down what I learned:

What is a Function?
A function is a block of reusable code designed to perform a specific task. It has two main aspects:

Declaration: This is where you create or define the function.

function greet(name) {
    return `Hello, ${name}`;
}
Enter fullscreen mode Exit fullscreen mode

Invocation: This is where you call the function to execute it.

console.log(greet('Ayoola')); // Output: Hello, Ayoola
Enter fullscreen mode Exit fullscreen mode

Parameters vs. Arguments

  • Parameters
    : Variables used when defining a function. For example, in function greet(name), name is the parameter.

  • Arguments
    : Actual values passed when calling the function. For example, in greet(Ayoola), Ayoola is the argument.

Ways to Declare Functions

There are two main ways to declare functions:

1. Function Declaration
Also known as a named function, this type of function is defined with a specific name.

function greet() {
    console.log("Hello!");
}
greet(); // Output: Hello!
Enter fullscreen mode Exit fullscreen mode

A unique feature of function declarations is hoisting— you can call the function before it’s declared in the code.

2. Function Expression
This is a function assigned to a variable. It can be named or unnamed (anonymous).

const greet = function () {
    console.log("Hello!");
};
greet(); // Output: Hello!
Enter fullscreen mode Exit fullscreen mode

Anonymous Functions
These are functions without a name. They’re often used as function expressions or in situations where a quick, temporary function is needed.

setTimeout(function () {
    console.log("This runs after 2 seconds!");
}, 2000);
Enter fullscreen mode Exit fullscreen mode

Arrow Functions
Arrow functions provide a shorter syntax for writing functions, introduced in ES6. Example:

const greet = (name) => `Hello, ${name}`;
console.log(greet('Ayoola')); // Output: Hello, Ayoola
Enter fullscreen mode Exit fullscreen mode

Arrow functions are concise and often used for simple tasks, but they have some differences, like no access to this.

Final Thoughts
Functions are incredibly powerful and make programming so much fun. From named functions to anonymous functions and now arrow functions, the journey gets sweeter by the day.

I’m excited about what tomorrow will bring. Let’s keep learning and growing!

Stay tuned for Day 4!

Top comments (0)