Define javascript function in most fancy way

Published at: 2020-01-19 16:00:00

Updated at: 2023-10-01 13:59:37

javascriptfunction

Since I'm still kind of new to code in JavaScript. There's a lot of things I'm not yet encounter while learning by myself or self-taught. So today's sharing topic will be about the JavaScript functions that I managed to learned for the past 2 days. Haha. Yeah I know. That's too early to share. But not for me. Hehe. I'm looking for a discussion where one might comment or share their thoughts on the topic. That would be a plus for me right?

An active discussion would help me in a lot of ways that maybe I couldn't get it by just reading a documentation. Yeah, we got StackOverflow and other forum as well. But you guys have to admit that sometimes reading and understanding other people code could be more daunting. Not to mention, there's a lot of time when you want to ask further question or clarification on the topics. But unfortunately the topic was already closed, leaving you a slim chance of people would actually respond to your comment.

So here I am, posting updates on my progress of learning how to React. Haha. Couldn't yet get in depth in React JS since I need to learn a lot about JavaScript first. Without further ado, let's get right into it.

What is Function?

  • A function is a block of code (with parameters or not) that perform a particular task.
  • It can be defined once and can be called multiple of times where it will be executed when they are called know as invoking a function.
  • Values can be passed usually know as parameters. Passed into a function and can be used within the function too.
  • Every function must or will return a value (defined or undefined)
  • Functions are objects

Ways to define function in Javascript

A. Function Declaration

Define by using a keyword function that followed by a mandatory function name. Usually also comes with a list of parameters in a pair of parenthesis (param1, ..., paramN) and a pair of curly braces {...} that contained a block or body of the code.

// function desclaration
function convert2Percent(num) {
    return num / 100;
}
 
console.log(convert2Percent(50)); // => 0.5
console.log(convert2Percent(70)); // => 0.7

B. Function Expression

Define by using a keyword function, but optional use of function name. Also comes with a pair of parenthesis holding the parameters (param1, ..., paramN) and a pair of curly braces {...} containing the body of the code.

  • With the use of function name

    // function expression with the use of function name
    let percent = function convert2Percent(num) {
      return num / 100;
    }
     
    console.log(percent(50)); // => 0.5
  • Without the use of function name

    // function expression without the use of function name
    let convert2Percent = function(num) {
      return num / 100;
    }
     
    console.log(convert2Percent(50)); // => 0.5

Either way, you will get the same result, with or without function name.

C. Arrow Function

Define by using a pair of parenthesis that contains the list of parameters (param1, ..., paramN), followed by a fat arrow => and a pair of curly braces {...} that delimits the body statements.

  • Style 1

    // arrow function with Definition Style 1
    const convert2Percent = (num) => {
      return num / 100;
    }
     
    console.log(convert2Percent(50)); // => 0.5
  • or Style 2

    // arrow function with Definition Style 2 (the best simplified one)
    const convert2Percent = num => num / 100;
     
    console.log(convert2Percent(50)); // => 0.5

Both will give you the same result!

Step by Step Change (Function Implementation)

Let's see how you can basically simplify short or non-complex functions using the above function definition style.

  1. Step 1 - Regular/Declaration Function Definition

    function convert2Percent(num) {
      return num / 100;
    }
     
    console.log(convert2Percent(50)); // => 0.5
  2. Step 2 - Expression Function Definition (ditching function name)

    let convert2Percent = function(num) {
      return num / 100;
    }
     
    console.log(convert2Percent(50)); // => 0.5
  3. Step 3 - Arrow Function Definition Style 1 (ditching function keyword and name entirely)

    const convert2Percent = (num) => {
      return num / 100;
    }
     
    console.log(convert2Percent(50)); // => 0.5
  4. Step 4 - Arrow Function Definition Style 2 (ditching function keyword & name, curly braces and return all together)

    const convert2Percent= num => num / 100;
     
    console.log(convert2Percent(50)); // => 0.5

So which one is better?

No one is. No winner or loser. It depends on the situation and how you use them.

Right now, from what I've encountered and learned. If your function statements is quite complex and huge. Then the choosing to go for regular Function Declaration, Expression and Arrow Style 1 would be better.

For Function Arrow Style 2 would be better for a short light code which dealing with short statements.

So there you have it. If you guys have any questions to ask, please do so. Will help you anywhere I can. Or you want to share you thoughts on the topic at hand. You are most welcome to leave a comment below. I'm open to discussion.

Anyway, thanks for spending time to read this short update progress article on my endeavor to learn React JS, Node JS, and GraphQL. Thanks again!