Skip to content

Instantly share code, notes, and snippets.

@joannasese
Last active August 23, 2023 15:43
Show Gist options
  • Save joannasese/ca271b0e124ebbbbc016ae9f40cdfa76 to your computer and use it in GitHub Desktop.
Save joannasese/ca271b0e124ebbbbc016ae9f40cdfa76 to your computer and use it in GitHub Desktop.
Functions: programs within programs
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Functions: programs within programs!">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Functions: programs within programs!</title>
</head>
<body>
<script id="jsbin-javascript">
Write a bunch of stuff about functions.
</script>
<script id="jsbin-source-javascript" type="text/javascript">Write a bunch of stuff about functions.</script></body>
</html>
/*
FUNCTIONS
Earlier we said that a function is a block of reusable code that is useful when you want to run different values through the same code.
Think of them as recipes. Functions prevent you from needing to write out the recipe every time an ingredient changes.
The two phases to using functions: First we must declare/define the function?
To declare a function, you use the keyword function. Here's the syntax:
*/
function (parameter1, parameter2){
code to be executed
};
/*
The parameters go between the parentheses. The code to be executed goes between the curly brackets. It's good practice to give your parameters
names that indicate what they should be.
If we run the function below, it will default to undefined.
*/
console.log((function (){}));
/*
1a. Named Functions
Named functions make more sense to me because they have names. But the important part to remember is this:
Named functions are HOISTED TO THE TOP OF THEIR SCOPE, meaning they can be invoked before they are defined. I find this to be bananas.
Here's an example:
*/
function functionName (number1, number2){
return number1 * number2
};
// Above, functionName would make more sense if it were called "multiply," so let's do that instead.
function multiply(number1, number2){
return number1 * number2
};
// BUT WAIT. Since function multiply is named, let's show an instance in which the function is invoked before is it defined.
var total = multiply(5, 9); // here, the multiply function is invoked/called/applied even though we haven't declared it yet!
console.log(total); // prints 45
function multiple (numberOne, numberTwo){
return numberOne * numberTwo
};
/*
1b. Anonymous Functions
Anonymous functions are unnamed. IMO, anonymous functions just show up out of no where. Below is the example provided in Greenlight.
*/
function printAlteredString(string, alterString){
console.log(alterString(string));
}
printAlteredString('hello', function(str) {
return str.toUpperCase();
}
);
//prints "HELLO"
/*
This is super confusing, and hopefully future me won't find this confusing. But let's start with where the anonymous function is.
function printAlteredString is a named function with parameters "string" and "alterString."
When we invoked printAlteredString,
we set the string parameter = 'hello'
and
we set the alterString parameter to ... AN ANONYMOUS FUNCTION function(str)! The anonymous function is called and then passed through our first function,
printAlteredString. I KNOW. It's very nesting doll.
The original function console.logged (alterString(string)) where alterString is a function that makes a string uppercase and string is 'hello'.
So the original function takes 'hello' and makes it 'HELLO' with the .toUpperCase() bit.
//Next we can execute (or invoke or call) a function by plugging in values for the parameters.
What’s the difference between a function’s parameters and arguments PASSED to a function?
Function's parameters are like unassigned variables. Arguments are the parameters assigned a value. Arguments are also known as inputs.
What’s the syntax for a NAMED function?
function divide (parameter1, parameter2){
code to be executed, like parameter 1 / parameter 2
};
How do we assign a function to a variable?
Functions can OPTIONALLY take inputs and OPTIONALLY return a single value, how do we specify inputs, and how do we return a value?
function divide (parameter1, parameter2){
return parameter1 / parameter2
};
var quotient = divide(6, 3);
console.log(quotient)
or
console.log(quotient(6, 3);
NOTE: Primitive (simple) values are passed to a function BY COPY, complex by reference. Try it!
Scope: Functions can see and modify variables in parent or global scopes. The inverse is NOT true.
Closures: Functions form closures around the data they house. If an object returned from the Function and is held in memory somewhere (referenced), that closure stays ALIVE, and data can continue to exist in these closures! (See: our meeting-room app for an example!) (ALSO, see: Understanding JavaScript Closures with Ease)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment