Published at: 2020-01-19 16:00:00
Updated at: 2023-10-01 13:59:37
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.
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
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.
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!
Let's see how you can basically simplify short or non-complex functions using the above function definition style.
Step 1 - Regular/Declaration Function Definition
function convert2Percent(num) {
return num / 100;
}
console.log(convert2Percent(50)); // => 0.5
Step 2 - Expression Function Definition (ditching function name)
let convert2Percent = function(num) {
return num / 100;
}
console.log(convert2Percent(50)); // => 0.5
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
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
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!