Web Development MEAN-Stack from A to Z Fundamentals Level1

This is, in short, the definition of a function. The simplest form of a function is a set of code with a specific name that can be called by that name, like: The above code contains a function called `SayWelcome` that writes "Welcome user." However, in its current state, it will not execute any code. The function must be called by its name to execute the code it contains. It is called by writing its name followed by parentheses `()`, like: You can also pass different values to be used inside the function's code. For example, in the previous example, websites welcome users by their names, not as "users." If we want to modify the welcome message, we can pass the user's name through the function parameters, like: And when calling it, the name is passed like this: A function can take any number of parameters, separated by commas, like: And the function is called like this: A function can also return a value using `return`, as in the following example: In the above example, I created a function that takes two numbers, adds them, and returns the result. This result can be used like variables, for example: This means that a function containing `return` is like a variable containing a value. You can give default values to parameters, like in the following example: Thus, when calling the function, if no variable is passed, the variable is considered equal to `''` (an empty string).
You can also give a default value to a numeric variable, like: You can also make the parameter an array that receives any number of variables, like in the following example:

Hoisting

Hoisting is one of the important basics related to JS and is associated with functions. First, what is hoisting, and what does it do? Literally, the word means "lifting," and indeed, it does that. We previously talked about variables and how they are associated with two processes: declaration, which is the process of defining the variable, and assignment, which is the process of assigning a value to the variable.
For example:

Normally and logically, in most programming languages, we cannot use a variable before defining it.

For example, the following code: In most programming languages, this would cause an error, but in JS, it does not cause an error. Instead, it will give `undefined` because JS separates the declaration from the assignment during execution. It sees the code like this: Similarly, when dealing with functions, JS lifts the function declarations to the top of the file. For example, the following code: Will work normally and will not cause an error because hoisting modifies the code to look like this: When talking about hoisting, we must mention the other types of variable declarations, `const` and `let`. Some people think that hoisting does not happen with these variables, but in fact, hoisting happens for all variables and functions, but for `let` and `const` variables, they are placed in a Temporal Dead Zone (TDZ), which prevents their use before they are defined. The above code will cause an error because a variable of type `let` cannot be used before it is declared. We can use this feature with functions through function expressions, like the following code: The above code works fine, while the following code will cause an error: Another concept related to functions is local and global scope when defining and assigning variables. Variables defined inside a function cannot be used outside the function, while variables written outside the function can be accessed and used anywhere, whether inside or outside the function, as they are globally scoped. For example: In the above code, an error will occur because it attempts to use variables that have not been declared, as they are local to the function and cannot be seen in the global scope. While in the following code: In the above code, no error will occur because there are variables with the same name in the global scope. Here, you must distinguish between local and global variables. While the global variable can be used inside the function, like: As in the above example, the global variable can be used inside the function. What if we try to change the value of the global variable from inside the function? Indeed, we can do that, and the variable's value will change globally. We will get the value `11` in the above code.

Self-Invoking Function

You can also write a function and invoke it at the same time. This is a type of expression function called a self-invoking function, like the following code: This is an important method often used when we want to divide code into scopes within a larger scope without needing to create functions that are reused. Notice that the above function does not have a name to call it elsewhere; it will execute in its place only once.

Arrow Function

This is another type of expression function, added recently to simplify writing functions. It can be written as in the following example: Here, `function()` is replaced with `() =>`. You can also omit the parentheses `()` if there are no parameters and replace them with `_`, as in the following code: Or if it requires one parameter, you can write the single parameter like: While if there are multiple parameters, they are written inside parentheses, like: You can also shorten the code by omitting the curly braces `{}` and not writing `return` if the function consists of a single line, like the following code: This can be the most concise way to write an arrow function, as in the following example: