Key Takeaways: Functions
Tags: webdev, codenewbie, beginners, 100daysofcode
Published: 2020-11-29 01:47:25

<h3><b>JavaScript Functions</b></h3>

<br>

<p>When we last left off in my previous post, <a href="https://dev.to/averyramirez/bootcamp-50-days-in-review-49fm">Bootcamp 50 Days In Review</a>, I mentioned that I was to the point in my bootcamp where we were starting to learn about JavaScript. We had a few lessons that went over some of the basics we needed to know, but the meat of the lessons came when we got to the section about functions. In our "Introducing Functions" section we covered arguments, multiple arguments, and the return value.</p>

<br>

<p>Our introduction to functions described them as "procedures that allow us to write reusable,  modular code". We use them to define a chunk of code that we can then execute at a later point. The process to be put at it's simplest terms is to define a function and then run it, demonstrated plainly below:</p>

<br>

<p>Define a function called "printGreeting" that prints out the string "Hello!"
Execute your function once.</p>

<br>


{% gist https://gist.github.com/averyramirez/689d845c2f71ee1f4044256851e21436.js %}

<br>

<h3><b>Arguments</b></h3>

<br>

<p>Arguments are accessible objects inside functions that pass the values through to the function. If a function is called with missing values, it's set to undefined. Below is an exercise demonstrating a single string argument, but also introduced us to template literals which allow embedded expressions.</p>

<p>Define a function called "yell" which accepts a string argument called "message". This function should print out an uppercased version of message 3 times.</p>

<br>

{% gist https://gist.github.com/averyramirez/563eaf57390f81f7b5d6e57974d38ffd.js %}

<br>

<h3><b>Multiple Arguments</b></h3>

<br>

<p>If you need to create a function with multiple arguments, you can define more than one parameter by separating them with a comma. Keep in mind, the order you put them in matters. Once you have all of your arguments defined, you have the option to return your content. The return statement ends function execution and specifies the value that is to be returned to the function caller. 
</p>

<br>

<p>Below is an exercise where we ran a function with multiple arguments to determine if the dice roll came out as snake eyes or not. It accepted two inputs, representing the two dice. If both of the numbers are 1, print "Snake Eyes!", otherwise print "Not Snake Eyes!".</p>

<br>

{% gist https://gist.github.com/averyramirez/0e44b4d40c28ead22f0bec32d4f595e7.js %}

<br>

<h3><b>Return</b></h3>

<br>

<p>The return keyword does just that - returns values when we call them. We can store these values inside of a function as well. Previously we used console.log to call these values, however it doesn't allow us to return the value and store it in a variable. </p>

<br>

<p>To demonstrate this, we did a simple function called "multiply", that accepts two numerical arguments and returns their product, by multiplying them together. Instead of just printing it with console.log, we're going to return the value.</p>

<br>

{% gist https://gist.github.com/averyramirez/cc054a5ced907297f3dabc232d3fb1c1.js %}

<br>

<p>When run, this returns the sum of your x and y arguments.</p>

<br>

<p>So that's it for our Introduction to JavaScript Functions! In the next article I'll talk about leveling up our functions using things like scope, function expressions, and defining methods.</p>

<br>

<p><i>- Avery Ramirez</i></p>