JavaScript 101 /functions
Functions
Functions allow you to wrap code for reuse and better organization. A function is like a recipe: you define the steps once, and then you can use it whenever you need it.
You create a function by first typing the function keyword, followed by a name for your function (make sure it's descriptive and follows naming conventions). Then you type parentheses (), and curly braces {}. Inside the curly braces, you write the code that you want the function to execute. Lastly, you have to call the function to run the code inside of it! So go ahead and try it!
Returning data
Functions can also return data. This means that instead of just performing an action, a function can give back a value that can be used elsewhere in your code. You use the return keyword to specify what value should be returned.
return also doubles as a way to exit a function early. Use this wisely!
Scope
Please analyze the code below and try to understand what is going on. Then try to deduct what "scope"Sniper scope? could mean and how it works in JavaScript. Write your answer on the bottom. You have 5 minutes.
The definition of scope
Scope determines where a variable can be used. In the example above, the var name is defined inside the function sayHello(), so it can only be accessed within that function. The var day, however, is defined outside of any function, so it has global scope and can be accessed from anywhere in the code.
As you might've noticed, you can also call (other) functions from within a function, as long as they are defined in the same scope or a parent scope, just like with the variables.
Passing parameters
In the next assignment (go ahead and start it now) we again encounter a scope problem. dealDamage() can't reach the variables defined inside setup(). There's a potentially better solution than moving everything to global scope: passing parameters to functions.
Did you ever notice those parentheses and think, "what are these for?"? Well, that's where you can pass parameters(data)! I'll be a bit obscure. You need to pass data and then you need to receive it. Can you figure it out? DBZ Narrator voice: "Let's find out n... ow".
The limitations of passing parameters
When you pass data through a function as a parameter, it makes a copy of the original value. This can cause the values of the original variables to remain unchanged where you don't always want that (see example in the previous assignment). A possible solution is to return the modified value and reassign it to the original variable, as we did with playerHealth and enemyHealth in the solution.
Furthermore, it can get messy if you have a lot of data to pass around. It can make your code less readable if you have to pass the same data through multiple functions. That being said it's still a very useful technique in many situations.
Advanced Topics
Recursion
Recursion is a programming technique where a function calls itself in order to solve a problem. A recursive function typically has a base case that stops the recursion and a recursive case that breaks the problem into smaller subproblems. Recursion can be a powerful tool for solving problems that can be broken down into similar subproblems, such as traversing a tree structure or calculating factorials.
Callbacks
Some functions will have the option to accept another function as an argument. These are called callbacks. Callbacks are useful for asynchronousAsynchronous: not happening at the same time operations, such as reading files or making network requests, where you want to execute some code only after the operation is complete.
This might be a great time to explain the order of execution in JavaScript;
JavaScript is single-threaded, which means it can only execute one piece of code at a time. When you call a function, JavaScript will execute the code inside that function before moving on to the next line of code. However, when you use asynchronous functions with callbacks, JavaScript can continue executing other code while waiting for the asynchronous operation to complete. Once the operation is complete, the callback function will be added to the event queue and executed when the main thread is free.
Asynchronous Functions
AsynchronousAsynchronous: not happening at the same time functions are functions that allow you to perform tasks without blocking the main thread of execution. They are often used for tasks that take a long time to complete, such as fetching data from an API or reading a file. Asynchronous functions can be implemented using callbacks, promises, or async/await syntax.
When using async functions, the code execution will wait for the asynchronous operation to complete before moving on to the next line.
We will make use of async functions later in the course.
Closures
A closure is a function that has access to its own scope, the outer function's scope, and the global scope. This means that a closure can remember and access variables from its outer function even after the outer function has finished executing. Closures are often used for data privacy and to create functions with persistent state.
I'm sure it has multiple perfect use cases but I personally tend to stick to simpler methods.
Function expressions and arrow functions
You won’t need these for now. Or maybe ever.