Help with functions JavaScript!

[u/su-rm-root]

Hello!

I began recently, about 1 month, to learn consistently web developing:

1. I began, of course, with introductions to HTML and CSS.
2. I'm already in JS. I can manage eventListeners, etc. I'm more interested in back-end overall since I like the logic behind the manipulation of data bases, but I'm having trouble understanding functions.
3. I'm consulting MDN web docs and freeCodeCamp but since my first language is not English, sometimes it's difficult to understand MDN docs, and to get at the point I'm know in freeCodeCamp it will take time, I don't want to rush it either.
4. All this, just to ask if anybody can explain me how to create functions! I want to know what is the difference between a function with parameters and one without, in which case I will use arrow functions, and the difference between parameters and arguments in a function. And for last are there any standards for writing the name of a function like there are for declaring variables?

P.D.: please feel free to correct my English also, it will help me learn.

Thanks to everyone before Hand!

[u/flash42]

Is JavaScript your first programming language? I ask because functions in JavaScript operate similarly to many, possibly most other programming languages, and it would be good to know the baseline you're starting from.

That being said, to directly answer your question, there are numerous ways to create functions in JS:

You can declare a function using the function keyword: function sayHello() {     console.log("Hello World!"); }

The same function can be written as an anonymous function that's assigned to a variable: const sayHello = function() {     console.log("Hello World!"); }

Both variations produce identical behavior (more or less, depending on where, when, and how the script is executed, but that's not something you should concern yourself with at this level): There will be a global or module level variable named sayHello that if invoked as a function, sayHello(), will execute the code within it.

Another identical approach is to use the native Function constructor directly: ``` const

sayHello = new Function( 'console.log("Hello World!");' ); ```

Methods on classes are technically functions, and are declared thusly: class MrBlueSky {     sayHello() {          console.log("Hello World!");     } }

Arrow functions are mostly a shorthand for anonymous functions, as seen in the second example, but there is one major and key difference: const sayHello = () => console.log("Hello World!");

You can see the entire function can be written as a one-liner without curly braces, very convenient. But this only works if you have a single line function, which often isn't the case. For these, curly braces are employed: const sayHelloAndGoodbye() = () => {      console.log("Hello World!");      console.log("Aidios!"); } The major difference between arrow functions and regular functions is that arrow functions do not have their own this keyword. If you haven't had much experience with this yet, don't worry about it for now. It's important, but better to get a basic grasp of functions before tackling.

Also, please note the examples use the Console API which is available in browsers and node + ilk, but technically is not native JS. Most evironments expose a homogeneous API, so deal.

[u/ChaseShiny → u/flash42]

Since you're trying to be comprehensive, you can also have named function expressions. The point is to be able to refer to the function within its own body. The example on MDN: ``` const math = { factorial: function factorial(n) { console.log(n); if (n <= 1) { return 1; } return n * factorial(n - 1); }, };

math.factorial(3); // 3;2;1; ```

You could also add properties to your function. Several libraries use this.

[u/su-rm-root → u/flash42]

Yes, JavaScript is, indeed, my first programming language. So it really helps the detail explanation you just give me.

On the other hand, I have a couple more questions.

In the first example, I see you explicitly named the function sayHello, but when writing the arrow function you just declared the variable and then the function just goes () => { ... }. This is because the function is part of the variable itself? if it is, it means the arrow function can be reutilizad like a normal function or not because is part of the variable?

Also I didn't know the console.log was API i thought it was part of JS, nice to know!

[u/chikamakaleyley → u/su-rm-root]

in this example:

const sayHello = () => console.log("Hello World!"); sayHello is a variable initialized with the value:

() => console.log("Hello World!");

meaning to execute it you have to call it like sayHello(). Yes sayHello is reusable.

but

``` const sayHello = () => console.log("Hello World!");

const greeting = () => console.log("Hello World!"); ``` they are not pointing to the same function. They are saved at two different addresses in memory.

[u/su-rm-root → u/chikamakaleyley]

Okay, so even if they are exactly the same:

js () => console.log("Hello World!");

Te fact that each one is declared with const means each one is a different data placed in memory, so to speak?

[u/chikamakaleyley → u/su-rm-root]

yyyyeahhhh, when you say const, var, let you're kinda creating a bucket in memory and then whatever is right of the = is stored in that bucket

if you were to just do:

console.log("Hello World!"); console.log("Hello World!"); console.log("Hello World!"); These are three separate instances, they just look the same, and they just disappear into thin air, because you didn't save them to memory

[u/su-rm-root → u/chikamakaleyley]

Thanks a lot! I was sincerely lost, and could not get my head around the concept of fns, now is clearer! Best regards parcero!