What in the Func is a Function? Quick Overview
A function in JS, and most languages, is a block of code that does something; it can take in data and spit out new creations based on what you feed it through its parameters “()”<-that thing.
To elaborate a little more, a function is a reusable block of code that can be used to perform different, wait for it, Functions, or “Jobs”, or “Tasks”. These jobs can range from restructuring data from an API call to returning a true-false value to rendering HTML on the DOM; functions are the building blocks of a web application in JS.
A Function comes in a few flavors, Function Declarations, Function Expressions, Arrow Functions
Function Declarations which are special functions that are lifted to the top of the “Scope Block” during the compilation of a JS file, so in laymen's terms, a Function declaration doesn't have to worry about being called prior to its declaration, because, in the compilation, it already been defined prior to code execution. (I'm trying to simplify complex topics, bare with me)
Example.
addTwo(2);
function addTwo(x)
{
console.log(x+ 2);
}
//4
On the other hand, Function Expressions and Arrow functions are variables that have been bound to a function, during compilation they are stored in memory as their Left-Hand-Reference, variable names, the compiler does not know what they are doing until after compilation. So, they are simply variables that have been pointed to functions, they can be reassigned and are not function objects themselves. Function expressions are pointers to Function Objects, whereas Function Declarations are Function objects. Confusing, I know.
Example.
addTwo(2);
addThree(3);const addTwo = function(x)
{
console.log(x+2)
}
const addThree = (x)=>
{
console.log(x+3)
}
//ReferenceError: Cannot access 'addTwo' before initialization
//ReferenceError: Cannot access 'addThree' before initialization
Building a Function
a function declaration is made up of a function keyword, a name, two parentheses, and a set of curly brackets. the function keyword signifies that the following code is a function object, the name gives the function an identifier and the parenthesis give space to define arguments, the arguments are undefined variables that take the value of whatever is passed into the parameters of the function when it is being called. This is way more obvious in strongly typed languages.
Example.
//We will decalre a function, name it, and give it arguments
function exampleFunction(arg1,arg2,arg3)
{
console.log(arg1,arg2,arg3)
}
//when data is passed into the function through the parameters like-
exampleFunction("Hello ", 1)
the function with use the passed in data to perform your task
Result // Hello 1 undefinedany arguments that are left empty are defualted to undefined, and if you would like to skip an argument, you cna use the "undefined" keyword to mark the parameter as an undefined value, allowing you to input follow-on arguments.exampleFunction(undefined, undefined, "Hello")
Result // undefined undefined Hello
Returning Value
functions can represent the data they have constructed within their code block, this allows for us to call a function and store its value onto a variable, or to illustrate I will show how a function can be called within a function, this illustrates the fact that on execution the right-hand side of an expression is executed before the execution of assignment to the left-hand side.
//we are going to create a function that returns a string
function myString()
{
return "hello";
}
function printString(arg1)
{
console.log(arg1);
}
//we can use our myString function to represent its return value;printString(myString());Result // hello// or we could store the return value onto a variable
let helloString = myString();
//and then console log the string by passing the value into our //print functionprintString(helloString);Result // hello
When you first start programming in JS, “I feel”, it is extremely important to understand how a function is working and how it is interacting with the other data in your application, this has been an extremely glossed over, an overview of how functions work, but I hope it provides some clarity or maybe provides some sort of ah-ha moment.
Some amazing resources
Kyle Simpson’s book “You Don’t Know JS Yet”
https://rileygelwicks.gitbooks.io/you-dont-know-js/content/index.html
Coding Train YouTube Channel
https://www.youtube.com/watch?v=mrYMzpbFz18
Functional Programming Basics
https://www.youtube.com/watch?v=FYXpOjwYzcs
