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 (3)

Collapse
 
philip_zhang_854092d88473 profile image
Philip

It’s great that you’re diving into functions in React! Understanding how to declare, invoke, and work with different types of functions (including arrow and anonymous functions) is crucial for building efficient, reusable code. EchoAPI can help by streamlining your API calls and testing, allowing you to integrate and test your functions seamlessly in your development workflow.

Collapse
 
ayoola_damilare_212d5bde0 profile image
Ayoola Damilare

Thank you, Philip. I'll research EchoAPI

Collapse
 
philip_zhang_854092d88473 profile image
Philip

You are welcome! 😊 Echoapi is indeed a great tool for beginner, and you can access it easily through echoapi.com.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.