Functions are one of the fundamental building blocks in JavaScript. A function is basically a set of statements that performs a task or calculates a value. Let me show you a couple of examples.
So, I'm going to declare a function using the function keyword.
Now, we need to give it a name. Let's call that greet.
After that, we need to add parenthesis. That's part of the syntax for declaring functions and then curly braces.
Now, what we have here inside the curly braces is what we refer to as the body of this function. And this is where we add all these statements to define some kind of logic in our application. For example, the logic for this function should be to display a message on the console.
So, here we can add console.log('Hello World');
Now note that here we have a statement. So, we terminated with a semicolon but when we are declaring a function, we don't need to add semicolon at the end because we are not declaring it like a variable like this.
OK. This is a function declaration.
So now we have a function. We can call this function like this.
So, we add the name of the function and parenthesis again, and then semicolon to indicate that this is a statement.
Save the changes.
Now we have hello world on the console.
Announcement: If you are interested in joining 500+ learners learning coding daily for free, consider following me on X here
But that's pretty boring.
Let me show you how to make this more interesting. Our functions can have inputs and these inputs can change how the function behaves. So, let's say instead of displaying Hello World, we want to display the name of the person here, like Hello John. So we can add a variable here in between parentheses.
We refer to this variable as a parameter. So, this greet function has one parameter called name.
And essentially, name is like a variable that is only meaningful inside of this function.
So, inside of this function, we can work with this name variable, but it will not be accessible outside of this function.
The name is an input to this function. So instead of displaying Hello World, we can display Hello then add a plus here to concatenate two strings so we can add name after.
Now when calling the great function, we need to pass a value for the name variable or name parameter more accurately.
So we can pass John here.
Now we refer to this as an argument. So John is an argument to the greet function and name is a parameter of the greet function.
It's one of the things that a lot of programmers don't know. They don't know the difference between a parameter and an argument. So, a parameter is what we have here at the time of declaration,
But the argument is the actual value with supply for that parameter.
OK. Now let's save the changes.
So, we have Hello John.
Now, we can reuse this function but with a different input. So, we can copy this line here and change on to Mary.
Save the changes.
Now, we have two different messages on the console.
Now, a function can have multiple parameter. So here we can separate parameters using a comma. So, let's add another parameter like last name.
Now we can change our console.log.
Now when calling this greet function, we should pass another argument for the last name. But, let's see what happens if we don't do this.
So, I'm going to save the changes.
See what we got.
As I told you before, the default value of variables in JavaScript is undefined. So, because we did not pass a value for the last name, by default it's undefined.
So, I'm going to pass another argument here.
And we don't need the second call to the greet function.
Save the changes.
Now we have Hello John Smith
Top comments (0)