“The best thing about JavaScript is its implementation of functions. It got almost everything right. But, as you should expect with JavaScript, it didn’t get everything right.”
— Douglas Crockford
I want to briefly introduce you to functions and basic ways to use them. This is to get you comfortable with their syntax and usage, and will help explain other concepts in the upcoming lessons.
a function by any other name would smell as sweet
What the heck is a function? Well you could make an educated guess and according to the name it has some sort of functionality, which means a range of operations that can be performed by the computer. That’s correct! A function is a piece of code we can execute, and what kind of code is completely up to you and your project. Functions are important because they are reusable; you can run the same series of computations or manipulations on multiple different arguments.
anatomy of a function:
function functionName() {
// code to execute
}A function can be as simple as printing a value to your console, or something much more complex. Let’s start with the former.
lightblue — this is our function declaration
green — this is our function name
pink — this is our first parameter. you can have zero parameters, or you can have many. just make sure the amount makes sense based on the code you’re executing
yellow — our second parameter. parameters in the function code are just placeholders for our real values (you can see that inside of lines 5 & 6)
purple — those values are our arguments for executing our function
red — invoking the function with number arguments
navy — invoking the function with string arguments
important verbiage:
Since a function is something that can be executed, it’s ready to run and is waiting for us to let it loose. We must invoke a function to utilize it. That’s as simple as calling the function with the parenthesis. It will look like this myNewFunc(); and if there were any parameters included in the original declaration, then you’ll want to add the corresponding arguments here.
You will hear the word “method” used a lot, and I’ve even used it in the previously lessons. A method is a function that can be performed on objects.
let’s practice making some more functions!
one quick thing to note before we move on: functions need the return keyword at the end to know what values to send back and to stop running. a return statement will not print to our console automatically, so remember to log your function calls if you want to see what the output is.
copy the code below and paste into your pen, replace // insert code here with your code. you can check your work by seeing if you get the same numbers as // should print if correct
function subtrackTheseNums(num1, num2){
// insert code here
}function multiplyTheseNums(num1, num2){
// insert code here
}function divideTheseNums(num1, num2){
// insert code here
}console.log(subtrackTheseNums(50, 100)); // should print -50
console.log(multiplyTheseNums(3, 9)); // should print 27
console.log(divideTheseNums(80, 4)); // should print 20
we don’t have to limit ourselves to numbers
JS has built in methods
I used a method (which is just a premade function) called toUpperCase() that creates a new string where every letter is capitalized. Here is a list of the methods for strings and documentation on how to use them. W3School is a website you will become very familiar with, if you’re not already. And in general, you will have to read (even decipher sometimes) documentation.
to practice some some functions and methods go to this codepen, and press “Fork”
there are other ways we can structure our functions
The other way you will see is an “arrowhead” function or sometimes called a “fat arrow.” note: there is a small difference between this and the traditional declaration which we will save for the discussion on scope.
const arrowheadFunc = () => {
// code to execute
}All functions must have their code wrapped within curly brackets, and must have parentheses, even if there are no parameters, and a descriptive name (ending with Func is not a convention or something you should do all the time, I’m just doing it for the sake of clarity in the lessons).
Which one should you write your code with? It’s your choice. There are many different ways to do a lot of things in JS. I like the function keyword declaration because I like seeing the type immediately, but the arrowhead is more appropriate in many cases. I will try to represent both evenly.
here’s some practice:
how old are you in dog years?
temperature conversion
thank you so much again for reading these. i spend a lot of time second guessing my life path. i get overwhelmed and scared by all these new and foreign concepts i’m learning in software development. i keep hoping that one day i’ll wake up confident and assured that i know what i’m doing. and i do have moments where i feel more than competent, i actually feel in control. writing these lessons is one way that i can gain access to that feeling. i hope i’m helping someone else feel like they’re actually steering the ship and not just along for a ride.
