JavaScript Basics | Functions cover image

JavaScript Basics | Functions

Jonathan Barrios • September 5, 2020

javascript

Introduction

Welcome to the JavaScript Basics series for beginners. In part 5 of JavaScript Basics, we'll dive into functions, declaring functions, parameters vs. arguments, returning functions, and function expressions. See you there!

Prerequisites

To get the most out of this course, you should know:

In Part 5 of JavaScript Basics, we'll focus on:

In future JavaScript Basics posts, we will:

Note: It takes years of focused practice to become a great JavaScript engineer. This JavaScript Basics course introduces JavaScript fundamentals and will improve your coding skills, but don't expect to transform into a JavaScript expert overnight instantly. Remember, the JavaScript learning journey is a marathon, not a sprint.

Functions

A function is a code snippet that can be called by other code or by itself or a variable that refers to the function. A JavaScript function is an object type, and when assigned to a property of an object, we call it a method. When an object calls functions, we use the this keyword, which becomes the value in the function call context. If this sounds confusing, no worries; we're going to break each concept down one by one from the beginning.

Function Declarations

To define or declare a function, use the function keyword followed by the required name and curly braces. The curly braces denote the scope with zero or more JavaScript statements inside. To call the function, use the name message();.

// Function Declaration
function message() {
  console.log('This is the message.');
}
// Call the function
message();

You can call a function as many times as you like, and we can even pass in parameters to the function. So, for example, let's add a name to our message function when we call it a name argument.

// Function Declaration
function message(name) {
  console.log(name + ' message');
}
// Call the function
message("Jonathan's");
message("Fred's");

Parameters vs. Arguments

Parameters and arguments are interchangeable, but generally, an argument is what you pass in when calling or invoking a function.

In the previous example, Jonathan's is the argument we passed in when invoking the message() function.

The parameter is name, which is inside the message function's parenthesis. That's the difference; it depends on what action you are taking. For example, when defining a function or method, it's called a parameter, and when you're invoking or calling a function, it's called an argument.

Returning Functions

We used console.log to return values in the previous examples, but that is not the best practice. Instead, we can use return as shown in this next example, and we'll use console.log, outside of the function.:

// Function Declaration
function message(name) {
  return name + ' message';
}
// Call the function
console.log(message("Jonathan's"));
console.log(message("Fred's"));

In the following few examples, we'll return functions and pass arguments as defined by our parameters.

Function Expressions

A function expression is a function with a variable assigned to it and can include optional names. Additionally, function expressions are sometimes immediately invoked(IIFE), which we'll cover in the following examples. First, create a variable const = cost and assign it to a function without a name, and pass the price parameter into the function. Then, inside of the curly braces, perform some simple math, as shown.

// Function Expression
const cost = function(price) {
  return price * price;
};
console.log(cost(5));

// With default! New since ES6
const cost = function(price = 10) {
  return price * price;
};
console.log(cost());
console.log(cost(5));

// Immediately Invokable Function Expressions - IIFE
(function() {
  console.log('IIFE executed!');
})();

// Property Methods Sneak Peak(More in OOP)
const todo = {
  add: function() {
    console.log('Add todo..');
  },
  edit: function(id) {
    console.log('Edit post ${id}');
  },
};
todo.add();
todo.edit(22);

Now that you finished part 5 of JavaSctipt Basics, we'll begin learning about JavaScript Objects in Part 6. Follow me on Twitter @_jonathan_codes for more JavaScript Basics and other web development frameworks, databases, and more. As always, Happy coding! 👋🏼