Declaring Functions:
functions can declared by using the function keyword, followed by the name you wish to give a function, parenthesis, and curly braces like so:
function namedFunction () {}
inside the parenthesis, you can add parameters. the names of these parameters can be anything but they should represent the data that you'd expect someone to input into this function if they were using it. Let's say we were creating a function to find the area of a rectangle, which is length times width. We can add two parameters named len and wid. like so:
function rectangleArea (len, wid){}
now inside your curly braces is where our code will go.
function rectangleArea (len, wid){
return len * wid;
}
And there you have it! We have successfully declared a function.
Anonymous functions:
Functions don't necessarily need names. Instead, we can assign the function to a variable in a method called a function expression. Take our previous example, instead of naming it, we could have instead assigned it to a variable like so:
var area = function(len, wid){
return len * wid
}
Anonymous functions can be useful if you don't need to reference it later on. However, you can still provide a name so that it can be easily called for future uses.
Calling Functions:
Whether or not the function is named, we can still call them in a similar fashion. We just need to enter the name of the function, or the name of the variable if it was declared anonymously, as a keyword followed by the arguments. arguments are what we input in the parenthesis of the function, they take the place of the parameters we discussed earlier and can be any datatype, be it simple (like strings & numbers) or complex (like arrays and objects).
rectangle(3, 4) // calling the rectangle function will return 12
area(5, 4) // calling the function expression will return 20
Function Scope
Now its time to talk about scope- and no, i'm not talking about the mouthwash brand. function scopes define the limits of what can reach the variables inside of a function and also what variables that same function can reach outside of itself. First, you should understand that global scope, which is the window that encompasses all of your code. Any variable declared in the global scope can be accessed within any function or code block.
//global window
var x = 20;
//function within the global window
function logX(){
//function will try to access x from inside its own scope
console.log(x)
}
//calling the function
logX();// 20
In the example above, the function is able to access the variable x, which was defined outside of its own function scope. It is successful because variables defined in the global scope can be accessed from anywhere.
now lets see what happens when we do the opposite- try to access a variable inside a function's scope from the global window.
function logX(){
//same function but we declared a variable y inside
var y = 10;
console.log(x) //=> 20
}
//trying to access the variable y outside of the function scope
console.log(y);// y is not defined
As you can see, we get a reference error: y is not defined. This is because the variable y is inside of a specific function's scope, and therefore can only be accessed within that function.
The image above should demonstrate the boundaries scopes can set. The formatting is very similar to that of a nested russian doll.
What we Learned:
Functions can be declared - with a name or anonymously with a function expression
When calling a function, you can do so by calling the function name or the variable that the function expression is assigned to.
Function scopes define what variables can be accessed and from where
Conclusion:
To summarize, functions are the building blocks of our code. Without them, nothing would get done, literally! Being able to create your own functions and be able to use them anywhere in your code is the first step to becoming a successful programmer.
Functions can become much more complicated, but what we learned today will be a great starting point for understanding future topics. Stay tuned for more to come!
Top comments (0)