Hello everyone, this is my very first technical blog post ever, so I will do my best to explain this topic the best I could. I am currently a student in a front-end web development bootcamp. I wanted to dedicate my first blog post to the basic and fundamental concept that I struggled with as a coding newbie: Functions.
First, let's define what a function is in Javascript. According to Mozilla.org, a function is, "a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output."
In simpler terms, a function is a block of code that executes a task. It takes in arguments, and passes bits of code into the function (inside the curly braces) to execute whatever is inside the function.
Are you still confused? Let's take a closer look at the syntax of a function.
function variableName(parameter){
//written code to be executed when function is called
}
To create a function, you start by typing in the keyword function.
function
Then you are going to need to declare a variable name after the function keyword. If it's more than one word, make sure to camel case it (e.g., camelCase, first word is lowercased with no space, and first letter of second word is uppercased)! Then after you name the variable, there needs to be a set a parenthesis and curly braces. Inside the parenthesis are what you'd call values. Then after parenthesis comes a set of curly braces. Whatever lies in between the curly braces are the written code to be executed. For example, let's start with:
function greetHello(){
//code to execute when function is called.
}
The variable name is greetHello. Currently, there is nothing inside the curly braces, so the function isn't going to do anything. There are no values or arguments inside the parenthesis, but that is totally okay. You could even have more than one values, and you'll see in another example.
If I want a function to work, we need to have bits of code to work with. For example, I want to use console.log to print out a message, and insert it in between the curly braces.
function greetHello(){
console.log("Hello")
}
To execute the function, I need to call the function outside of the curly braces.
function greetHello(){
console.log("Hello")
}
greetHello()
After you've called the function greetHello(), if you look at the web console, you will see "Hello" being outputted due to what is written inside the braces.
Let's take a look at another example:
This time, we'll work with numbers and have two values in our parameters.
Remember, we first need to write the function keyword and a variable. Since we'll have two values, they need to be separated by commas, (a, b):
function sum(a, b)
The variable is sum followed by the parameters. After you have the function, variable and parameters, you then need to add curly braces for the bits of code that you want the function to execute.
function sum(a, b){
}
Currently, there's nothing in between the curly braces for the function to work, so in order for us to determine if the function is working, we can use console.log(). If you did not know already, console.log() is also a function, and it print out any message or information into the web console.
function sum(a, b){
console.log()
}
To find the sum of the two values inside our parameters, you would need to write it as console.log(a + b), like a simple addition equation, but what is a and b? In this example, we can assign any number to those values. First, to find the sum, we have to "call" the function itself, but remember important to write it outside of the function, or outside of the curly braces. For this example, we will assign a = 1 and b = 2
function sum(a, b){
console.log(a + b)
}
sum(1, 2)
After you have assigned values to the variables, the next thing is to check the value of the sum in the console. It will print out:
3
You've successfully called the function sum, and received 3 is your output. This is just a couple of easy examples of how functions work, and it can get really complex, especially when you're working with other data types. I hope this made sense and is helpful!
Resources:
MDN contributors, "Functions." , Developer.mozilla.org, Jul 22, 2023, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions#predefined_functions,
Top comments (1)
great