Skip to content

Instantly share code, notes, and snippets.

/index.html

Created December 3, 2016 23:38
Show Gist options
  • Save anonymous/823c14a16e83996c4b7eb78f2bc1a608 to your computer and use it in GitHub Desktop.
Save anonymous/823c14a16e83996c4b7eb78f2bc1a608 to your computer and use it in GitHub Desktop.
Download ZIP
Functions Functions studies // source https://jsbin.com/gisuki
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Functions studies">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Functions</title>
</head>
<body>
<script id="jsbin-javascript">
// -----Functions----- //
"use strict";
name(); // ignore me for now *wink-wink*
/* Functions are first-class objects, "subprograms" and reusable code that be "called" or
"invoked" at later times to produce a value or side-effect. To declare a simple function, first
being with the keyword "function" followed by the name, parentheses, and curly braces. The
function body within the curly braces contains the sequence of statements to be executed when it
is later invoked: */
function name() {
console.log("You invoked the name function!");
}
/* All functions declared in the global scope will hoisted to the very top, meaning that any
existing global functions can be invoked before it is sequentially declared. If you run this
code, the name function will execute on line 3 despite the fact that it was invoked before
the actual function was declared. As line 3 demonstrates, calling a function requires typing
its name followed by parentheses to specify that it is meant to be a function. */
/* Functions can also be assigned to variables: */
var fun1 = function fun1() {
console.log("Hey, look at you, clever one!");
};
fun1(); // the variable name is now the function name, allowing for the usage of an anonymous
// function, but a named function expression works, as well.
/* Within the parentheses of a declared function, any number of parameters can be declared. These
placeholders can be reassigned to any different type of value later when invoking the function.
The values that replace the parameters are called arguments. Parameters should give an idea
of what the argument values will be: */
function sum(num1, num2) {
// two parameters
console.log(num1 + num2);
}
sum(3, 13); // arguments "3" and "13" replace "num1" and num2", returning 16
/* Functions can also be nested within objects: */
var obj = {
nestedFun: function nestedFun() {
console.log("Sup!");
}
};
obj.nestedFun(); // executes the nested function, logging "Sup"!
/* Functions can be nested within other functions! */
function scopedFun(vari) {
var localScoped = vari;
return function () {
return localScoped;
}; // I exist within this function's scope!
}
scopedFun("Oh hey"); // var becomes "Oh hey", which is passed into the nested anonymous function
/* "Closure" refers to being able to reference a specific instance of a local variable within an
enclosed function. The following function nests a function within another function, and the
entire function, along with an inserted argument, is assigned to a variable. Calling that
variable with another argument passes that argument to the embedded function: */
function closureFun(string1) {
return function (string2) {
return string1 + string2;
};
}
var frozen1 = closureFun("Oh hey"); // "Oh hey" is now assigned to the frozen1 variable.
frozen1(", ya dingus"); // this string is passed into the inner function's parameter (string2)
/* Calling the function again will create another instance of the scoped variables with new
results: */
frozen1(", whoah, deja vu"); // "Oh hey" data is still alive through reference
/* The previous functions have had arguments passed of both simple and complex data types. When
passing a simple data type, such as a number or string, the function will receive a hard copy
of the data; complex data, however, is passed by reference--held in memory somewhere and simply
pointed to when needed. The closureFun function is an example of both instances, where the
arguments passed for string1 and string2 are simple data types, but the assignment of closureFun
to the frozen1 variable is done by reference. The function is stored in memory elsewhere and
frozen1 now points to its location. */
</script>
<script id="jsbin-source-javascript" type="text/javascript">// -----Functions----- //
name(); // ignore me for now *wink-wink*
/* Functions are first-class objects, "subprograms" and reusable code that be "called" or
"invoked" at later times to produce a value or side-effect. To declare a simple function, first
being with the keyword "function" followed by the name, parentheses, and curly braces. The
function body within the curly braces contains the sequence of statements to be executed when it
is later invoked: */
function name() {
console.log("You invoked the name function!");
}
/* All functions declared in the global scope will hoisted to the very top, meaning that any
existing global functions can be invoked before it is sequentially declared. If you run this
code, the name function will execute on line 3 despite the fact that it was invoked before
the actual function was declared. As line 3 demonstrates, calling a function requires typing
its name followed by parentheses to specify that it is meant to be a function. */
/* Functions can also be assigned to variables: */
var fun1 = function() {
console.log("Hey, look at you, clever one!");
}
fun1(); // the variable name is now the function name, allowing for the usage of an anonymous
// function, but a named function expression works, as well.
/* Within the parentheses of a declared function, any number of parameters can be declared. These
placeholders can be reassigned to any different type of value later when invoking the function.
The values that replace the parameters are called arguments. Parameters should give an idea
of what the argument values will be: */
function sum(num1, num2) { // two parameters
console.log(num1 + num2);
}
sum(3, 13); // arguments "3" and "13" replace "num1" and num2", returning 16
/* Functions can also be nested within objects: */
var obj = {
nestedFun: function() { console.log("Sup!"); }
}
obj.nestedFun(); // executes the nested function, logging "Sup"!
/* Functions can be nested within other functions! */
function scopedFun(vari) {
var localScoped = vari;
return function() { return localScoped; }; // I exist within this function's scope!
}
scopedFun("Oh hey"); // var becomes "Oh hey", which is passed into the nested anonymous function
/* "Closure" refers to being able to reference a specific instance of a local variable within an
enclosed function. The following function nests a function within another function, and the
entire function, along with an inserted argument, is assigned to a variable. Calling that
variable with another argument passes that argument to the embedded function: */
function closureFun(string1) {
return function(string2) {
return string1 + string2;
}
}
var frozen1 = closureFun("Oh hey"); // "Oh hey" is now assigned to the frozen1 variable.
frozen1(", ya dingus"); // this string is passed into the inner function's parameter (string2)
/* Calling the function again will create another instance of the scoped variables with new
results: */
frozen1(", whoah, deja vu"); // "Oh hey" data is still alive through reference
/* The previous functions have had arguments passed of both simple and complex data types. When
passing a simple data type, such as a number or string, the function will receive a hard copy
of the data; complex data, however, is passed by reference--held in memory somewhere and simply
pointed to when needed. The closureFun function is an example of both instances, where the
arguments passed for string1 and string2 are simple data types, but the assignment of closureFun
to the frozen1 variable is done by reference. The function is stored in memory elsewhere and
frozen1 now points to its location. */</script></body>
</html>
Raw
jsbin.gisuki.js
// -----Functions----- //
"use strict";
name(); // ignore me for now *wink-wink*
/* Functions are first-class objects, "subprograms" and reusable code that be "called" or
"invoked" at later times to produce a value or side-effect. To declare a simple function, first
being with the keyword "function" followed by the name, parentheses, and curly braces. The
function body within the curly braces contains the sequence of statements to be executed when it
is later invoked: */
function name() {
console.log("You invoked the name function!");
}
/* All functions declared in the global scope will hoisted to the very top, meaning that any
existing global functions can be invoked before it is sequentially declared. If you run this
code, the name function will execute on line 3 despite the fact that it was invoked before
the actual function was declared. As line 3 demonstrates, calling a function requires typing
its name followed by parentheses to specify that it is meant to be a function. */
/* Functions can also be assigned to variables: */
var fun1 = function fun1() {
console.log("Hey, look at you, clever one!");
};
fun1(); // the variable name is now the function name, allowing for the usage of an anonymous
// function, but a named function expression works, as well.
/* Within the parentheses of a declared function, any number of parameters can be declared. These
placeholders can be reassigned to any different type of value later when invoking the function.
The values that replace the parameters are called arguments. Parameters should give an idea
of what the argument values will be: */
function sum(num1, num2) {
// two parameters
console.log(num1 + num2);
}
sum(3, 13); // arguments "3" and "13" replace "num1" and num2", returning 16
/* Functions can also be nested within objects: */
var obj = {
nestedFun: function nestedFun() {
console.log("Sup!");
}
};
obj.nestedFun(); // executes the nested function, logging "Sup"!
/* Functions can be nested within other functions! */
function scopedFun(vari) {
var localScoped = vari;
return function () {
return localScoped;
}; // I exist within this function's scope!
}
scopedFun("Oh hey"); // var becomes "Oh hey", which is passed into the nested anonymous function
/* "Closure" refers to being able to reference a specific instance of a local variable within an
enclosed function. The following function nests a function within another function, and the
entire function, along with an inserted argument, is assigned to a variable. Calling that
variable with another argument passes that argument to the embedded function: */
function closureFun(string1) {
return function (string2) {
return string1 + string2;
};
}
var frozen1 = closureFun("Oh hey"); // "Oh hey" is now assigned to the frozen1 variable.
frozen1(", ya dingus"); // this string is passed into the inner function's parameter (string2)
/* Calling the function again will create another instance of the scoped variables with new
results: */
frozen1(", whoah, deja vu"); // "Oh hey" data is still alive through reference
/* The previous functions have had arguments passed of both simple and complex data types. When
passing a simple data type, such as a number or string, the function will receive a hard copy
of the data; complex data, however, is passed by reference--held in memory somewhere and simply
pointed to when needed. The closureFun function is an example of both instances, where the
arguments passed for string1 and string2 are simple data types, but the assignment of closureFun
to the frozen1 variable is done by reference. The function is stored in memory elsewhere and
frozen1 now points to its location. */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment