Table Of Contents
Functions
A fundamental building block for Javascript programs. The most common feature in all programming languages. What exactly is a function in technical terms? a function is a block of code that is defined once and can be executed or invoked numerous times. Another quick note is functions are also objects, meaning they can be manipulated by other programs too.
We can declare a function by using the function keyword, following by a name of our liking, followed by a pair of opening and closing parentheses, a space for between the parameters and the curly braces with zero or more statements inside.
function buzz() { }
There is another way of declaring functions in modern javascript, and thats with the arrow function. Which actually looks like an arrow, but does have its own section that we will get too since it has limitations.
() => {}
Inside of the parentheses we can include identifiers or in other words parameters, these parameters act as local variables for the body of the function. To get a value out of those variables we can simply invoke our function by including some values or in technical terms arguments. We use these arguments to compute a value and return that value part of the invocation.
If a function is assigned to a property of an object, that function becomes a method of that object. This is where things start to get a bit more complex since we are now invoking on or through an object, as where the object becomes the context of the this keyword. The this keyword is a while other article to discuss about so we will skip that for now, but it's something good to note down about when creating methods for objects. With that being said we are also allowed to simply assign a function to a variable and pass them to other functions. Since functions are objects like we mentioned before, you can set properties on them and invoke methods on them too.
Traditional Functions
The function keyword is the only way to declare a function. We can also declare function expressions which pretty much a function stored inside a variable. For example
Function declaration
function printName(str) {
return "Hello " + str
}
console.log(printName('oscar')) // output "Hello oscar"
Function expression
let addUp = function(a,b) {
return a + b
}
console.log(addUp(1,2)) // output 3
One of the major differences between a function declaration and function expression is the function name, which in function expressions can be left out to create anonymous functions. By default functions return undefined if there is no specific return statement with any value to return. One other thing to note about functions is that they can be conditionally declared too inside if/else statements, but typically has inconsistent results so it's not a very good pattern to use.
A cool feature that comes with declaration functions is hoisting, you are able to use your function before you declare it.
printHello(); // logs 'Hello'
function printHello() {
console.log('Hello');
}
Function expressions on the other hand are NOT hoisted. So you can not use your function expression before you create them.
Arrow Functions
We were introduced into arrow functions in ES6, it's a nice compact alternative to a traditional function expression, but has limitations and can't be used in all situations. It does not have bindings like this or super keywords and not suitable for call, apply, or bind methods, cant be used as constructors either.
Let's break down a declared function into a arrow function
function(name) {
return 'Hello ' + name;
}
We start off by removing the function keyword and leave the arguments, and add an arrow between the arguments and curly braces.
(name) => {
return 'Hello ' + name;
}
next we will remove the curly braces and return statement. The return statement is automatically implied.
(name) => 'Hello ' + name;
and for the last step we can remove the parantheses since we only have a single argument being passing into the parameters.
name => 'Hello ' + name;
As we mentioned before, it is highly recommended that we don't use arrow functions are methods to avoid bugs or any other issues, arrow functions are best for non-method functions.
Conclusion
I hope by the end of this article you managed to learn how to create and understood what is going on in every line of code. It is very important to understand how your code fully works, not only does it help you become a better developer but can also help you use the tools you are working with more efficient.
These articles are mostly intended for personal use on becoming a better programmer, writer, and grow my programming skills. Feel free to drop any feedback or corrections that you believe that should be made to help me and others. Thank you for your time for sticking this far!
Top comments (6)
well put @cleveroscar 👏👏
there's a typo it should be "if/else".
I believe I spaced it out just for readability, but good catch! Thank you for that!
I didn't mean about spaces.. It's misspelled as esle.. instead of else
Two heads are always better than one! I made sure to fix that typo.
@cleveroscar I did learn somethign new. It would be nice if you can put more research on why function expressions are not a drop-in replacement for function declarations. More on the technical side.
It would be my pleasure!