DEV Community

Jacques Williams
Jacques Williams

Posted on

FUNctions!

Hello! My name is Jacques and today we're going to be talking about the blueprints to our code - functions!

So what are functions? Well functions are blocks of code that once executed, will perform a specific action. They are typically defined by their return statements. However, that does not mean your function won't do anything if a return statement is not included.

So how are functions made? Well, functions are made by first declaring the function keyword, followed by a parenthesis, and then an open and closing body {} using the curly brace symbol like so:

function printName() {
console.log("Jacques");
}

Now that we made a function called printName which is designed to, in theory, print my name, we want to see if it will work now. In order to do so, We invoke aka "call" the function by referencing it's name, followed by parenthesis. Like so:

printName(); //logs "Jacques" to the screen

Think of the parenthesis as the way to actually activate your named function. Without it, you're just referencing a function body aka a function definition. So for example, if I were to try:

console.log(printName); // logs the entire function instead of the console.log aka result within the function

The thing that makes functions so awesome is that they allow for a more broad/dynamic approach to real problems that we may encounter. For example, if I wanted my printName function to print anyone's name besides Jacques every time, it would not work based on how it's currently built. This is where those parenthesis come in! The parenthesis serves as a placeholder for any amount of variables (aka parameters) that we want to replace later on with actual argument(s) for the function. So, instead of having nothing in the parenthesis of our printName function, we can do this:

function printName2(name) {
console.log(name);
return name;
};

Now, once we try to call this printName2 function we created, we can pass in what's called an argument for the "name" parameter to see if it will log whatever name we pass in, instead of logging "Jacques" specifically each time we invoke it. Let's try the name "Nico" this time to see if it works!

printName2("Nico"); //logs Nico and the return value for the function is also Nico since we're returning the given name as well.

Remember, functions are defined by their return statement. Without them, the actions we perform within might not stick per say. Once a function returns, it will stop the function's execution to return that specific value. Without it, your function just won't return anything. The console however, can always print a result that you specify.

Great! So to test out this 2nd printName function, we can try passing someone else's name besides "Nico". Let's try "Sara" instead.

printName2("Sara") //Logs Sara to the console

What about "Buzz LightYear"?

printName2("Buzz LightYear") //Logs Buzz LightYear to the console

In essence, the true beauty with functions is not only can they resolve to a specific value once they return, but you can also use a function within *another * function as well! Sounds intimidating, but don't be afraid! For now, let's create another function that checks if the given parameter/argument is a string to follow along!

function isString(value) {
//check if the datatype of our value is not a string,
if (typeof value !== "string") {
//if not, console.log false!
console.log(false)
//return false also
return false;
}
// otherwise, return true if it is a string!
return true;
}

Now let's try invoking our isString(value) function with a number as our value.

isString(9); //logs false and the return value of the function is false since 9 is a number and not a string! The first condition was met.

Now Here's where the fun comes in. In a perfect world, name will always be a string. However, we don't live in a perfect world! Some people actually have numbers for names. So now, let's try using this function inside of ANOTHER "printName" function to check if the "name" argument we give it is a string.

function printName3(name){
/notice we're calling the isString() function to check if the name passed in is a string or not./
if(isString(name) === false){
//if the name is NOT a string,
console.log("That is not a name dude!");
}
/here, we're calling our printName2 function which simply prints and returns the name that's passed in as our final return value./
return printName2(name);
};
printName3(9); //"That is not a name dude!"
printName3("Jacob"); //"Jacob"

If we call printName3 with a number argument for example, the console will log the message "That is not a name dude!" since 9 is not a string datatype. However, if the name "Jacob" was passed in as an argument, the first condition fails allowing us to call the printName2 function on "Jacob" instead. Jacob will then log to the console!

In short, functions are really beneficial to our coding life. They are reusable blueprints that can even help condense our code. If you find yourself repeating the same logic over and over in your code, consider putting that logic inside of a function that can be called at any point to get the same result. FUNctions!

Top comments (0)