Skip to content

Instantly share code, notes, and snippets.

@acidtone
Last active March 1, 2023 20:17
Show Gist options
  • Save acidtone/6b27ecd6f5cdb05e57f93a5f137dcb2f to your computer and use it in GitHub Desktop.
Save acidtone/6b27ecd6f5cdb05e57f93a5f137dcb2f to your computer and use it in GitHub Desktop.
JS Activity: Refactor into a pure function

JS Activity: Refactor into pure functions

The following files contain code that runs in the global scope of the file on hard-coded variables. Refactor each of these files so that the code is reusable and portable using a pure function.

Pure function
A function that takes arguments as the only inputs and returns the result as its only output. Pure functions don't make any changes to variables outside of the function or store internal variables as state (aka. side-effects).

Instructions

For ONE of the .js files in this Gist, refactor the following code into a function so that it:

  1. accepts the variables (defined at the top of the script) as a parameter(s);
    • Note: the variable(s) defined at the top of each script should remain outside the declared function.
  2. returns the result outside of the function using a return statement;
  3. logs the returned result to the console from outside the function.

You may need to remove irrelevant <script> elements in the provided index.html file.

Bonus Activities

  • Using the window.prompt() method, define your arguments based on user input;
    • Note: prompt() will convert numbers to strings. Keep this in mind when performing arithmetic.
  • Use Number.prototype.toFixed() to round numbers as needed.
  • Once you're done with your chosen .js file, repeat the process for the rest of the files.
let string = "mIsSIssIPPi";
// Refactor the following code into a function so that it:
// 1. accepts the string variable as a parameter;
// 2. returns a capitalized version of the string;
// 3. logs the returned string to the console, from outside the function.
string = string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
// This console log should log the returned value from outside the function
console.log(string);
const subTotal = 40;
// Refactor the following code into a function so that it:
// 1. accepts the subTotal variable as a parameter;
// 2. returns a complete sentence containing the total (subTotal plus 5% GST);
// 3. logs the returned sentence to the console, from outside the function.
const total = subTotal * 0.05 + subTotal;
// This console log should log the returned value from outside the function
console.log(`$${subTotal} plus GST is $${total}.`);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Refactor into Functions</title>
<script src="capitalize.js" type="module"></script>
<script src="to-celcius.js" type="module"></script>
<script src="num-squared.js" type="module"></script>
<script src="gst-calculator.js" type="module"></script>
<script src="tip-calculator.js" type="module"></script>
</head>
<body>
<h1>Open the web console to see some messages.</h1>
</body>
</html>
const num = 4;
// Refactor the following code into a function so that it:
// 1. accepts a the num variable as a parameter;
// 2. squares the num and returns it as a complete sentence;
// 3. logs the returned squared num to the console, from outside the function.
const numSquared = num * num;
// This console log should log the returned value from outside the function
console.log(`${num} squared is ${numSquared}.`);
const billTotal = 40;
const tipRate = 0.18;
// Refactor the following code into a function so that it:
// 1. accepts subTotal and tipRate as parameters;
// 2. returns the billTotal, tipPercentage and tip as a complete sentence;
// 3. logs the returned sentence to the console, from outside the function.
const tip = billTotal * tipRate;
const tipPercentage = `${tipRate * 100}%`
// This console log should log the returned value from outside the function
console.log(`${tipPercentage} tip on $${billTotal} is $${tip}.`);
const tempF = 72;
// Refactor the following code into a function so that it:
// 1. accepts tempF as a parameter;
// 2. returns the temperature in Celcius as a complete sentence;
// 3. logs the returned sentence to the console, from outside the function.
const tempC = (5 / 9) * (tempF - 32);
// This console log should log the returned value from outside the function
console.log(`${tempF} degrees Fahrenheit is ${tempC} degrees Celcius`);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment