The “FIRST-CLASS” citizens of JavaScript: FUNCTIONS Part 1

Handy Articles for Beginners: Functions Part-1

There are many topics and concepts to cover about functions, so I’ll divide them in parts. Today’s topics will be basics of functions: parameter, argument, and the difference between console.log() method and return statement.

Functions are the MOST IMPORTANT one code unit in JavaScript. They are considered first-class citizens in JavaScript due to their unique capabilities, such as being able to be assigned to variables or arrays, passed as arguments to other functions, and returned as values from functions. Moreover, functions can also be created on the fly using anonymous functions, which gives developers great flexibility and versatility. They are “reusable” block of codes and we can call them multiple times. They also let us to break down our codes into smaller pieces and manage the order of statements needed to be executed. All these features make functions an essential and powerful tool for developers to write clean, efficient, and effective JavaScript code.

I love the way my instructor defines functions with only three words: INPUT-ACTION-OUTPUT! I advise you to remember functions with those three words.

Functions take INPUTs (aka parameter/s), then put those inputs in ACTION (execution of task/s) and return a value as OUTPUT.

The most common way to write functions is using the keyword “function” that is followed by the name of the function, pair of parentheses that accommodate parameters, and the curly braces holds the function body.

Let's see an example of a function format.

function nameOfMyFunction(parameter) { 
  console.log(parameter);
} 
nameOfMyFunction(argument);

-Xtra info- The function I created is named "nameOfMyFunction", which follows the camelCase naming convention. This is a best practice commonly used by developers in most programming languages. For example, myGreetingsForUsers is easier to read than mygreetingsforusers. Further discussion can be found at TechTerms.com[1]

A parameter is a NAMED variable that is passed to a function and is used to import arguments into functions. An argument is the real value that we will get as an output which replaces the parameter. In other words, our parameter is assigned value of our argument. We import our argument into functions with parameters by invoking our function.

What does INVOKING our function means? Well, simply put, it is telling our function to do the action and give us the output. Invoking a function is like making a call to a friend. You dial their number (call the function), and they answer (the function executes). Further in formation can be found at this website that have resources for developers written by developers [2].

Syntax to "invoke" or "execute" or "call" a function is adding a pair of parentheses () after its name. Your argument/s goes inside the parentheses.

• nameOfMyFunction(argument);

Let’s write a function called greet. I want my function to greet the user when username is provided. So, I need to have a parameter for my function which will import my argument (the username).

function greet(name){ 
  console.log('Hello, ' + name)
}
greet('Anna'); 
// -> output in my console: Hello, Anna

Notice that our parameter is name, and our argument is Anna.

Below you can see the screenshot of my VS Code and the console.

I will kindly ask you to practice upcoming examples with me. You can use your vs code and your browser, or you can simply use online node.js through this link. https://replit.com/new/nodejs

-Xtra info- It is always a good idea to name your function and its parameter/s related to the execution of it. When you have long and complicated codes, function names will be helpful to remember the tasks. It will also increase the readability for you and other developers.

Functions can have one or more parameters and arguments. Let’s write another function called add. I want my function to add two parameters (numbers) together and return the sum.

function add(num1, num2) { 
  return num1 + num2;
}
add(1, 2)
// -> output in my console: 3

Notice that our parameters are num1, num1, and our arguments are 1, 2.

There is a difference between ‘console.log()’ and ‘return’. Let’s examine it with examples.

function sayHello(){ 
   console.log('Hello world!');
}
sayHello();
//If we invoke our function above in our console, we’ll get:
// Hello world! 
// undefined




function sayHello(){ 
   return ('Hello world!');
}
sayHello();
//If we invoke our function above in our console, we’ll get: 
// Hello world! 
//We’ll NOT get undefined.

-Before I explain the difference, notice that I didn’t declare any parameter for my sayHello function. I don’t need a parameter or an argument in these functions because I told JavaScript ‘exactly’ what to do, inside the function body between the curly braces: greet the user with string of “Hello world”.-

As we see in the examples, console.log() logs the output and also logs ‘undefined’ whereas return gives us only the output without ‘undefined’.

The console.log() method only logs the output to the web console. It spits out what is inside the parentheses, so to speak. When we use console.log, our function does not return a value. Therefore, it returns 'undefined' because there is no value defined other than just logging the data to the console.

The ‘return’ statement returns a value to us. In the greet function, we return a value of ‘Hello world!’. The ‘undefined’ value is defined. Therefore, we don’t get undefined in our console when we use return because return statement refers to the result of doing an action with the given statement.

I could use a parameter and argument if the username will change.

function sayHello(username) {
  console.log('Hello ' + username);
}
sayHello('Daniel')
//If we invoke our function above in our console, we’ll get:
// Hello Daniel! 
// undefined

sayHello('Jessica')
// Hello Jessica!
// undefined




function sayHello(username) {
  return('Hello ' + username);
}
sayHello('Daniel')
// Hello Daniel! 
// We’ll NOT get undefined.

sayHello('Jessica')
// Hello Jessica!
// We’ll NOT get undefined.

Let’s compare console.log and return with one last example.

function add(num1, num2) {
  console.log(num1 + num2); 
}
add(4, 5)
// 9
// undefined


function add(num1, num2) {
  console.log(num1 + num2); 
  return "check this out"
}

add(4, 5)
// 9
// check this out (instead of undefined because we used return statement)

Stay tuned for Part-2 which will be about common way of writing functions!

Keep coding and have a great day!
Bouquet

References:

[1] - TechTerms.com 'camelCase'
[2] - MDN Function.prototype.call()