DEV Community

Danish Saleem
Danish Saleem

Posted on

JavaScript for Beginners - Chapter 7: Functions

Another chapter in the JavaScript for beginners’ series! In this chapter we cover functions, what they are used for and how to write them.

Functions

A function is a way to encapsulate a portion of your code so a specific action can be reused and called on to run at a specific time.

Declaration

An example of what the syntax to declare a function looks like.

function showMessage() {
  alert("Hello World!");
}
showMessage();
Enter fullscreen mode Exit fullscreen mode

Naming

Since functions are actions their name is usually a verb. Keep the names brief but accurate to describe what the function does.

showMessage(); // Shows a message

getAge(); // Returns the age

calcSum(); // Calculates the sum and returns the result

createForm(); // Creates and returns a form

checkPermission(); // Check a permission, returns true/false
Enter fullscreen mode Exit fullscreen mode

Arguments

A function can require you to pass some arguments (agrs) which act as variable within the function. This allows for better reusability.

function calcAge(currentYear, birthYear) {
  return currentYear - birthYear;
}

const myAge = calcAge(2021, 1989); // Output: 32

const johnAge = calcAge(2021, 1975); // Output: 46
Enter fullscreen mode Exit fullscreen mode

Local Variables

A variable declared inside a function will only be visible within the function scope.

function showMessage() {
  let message = "Hello World!"; // Local variable

  alert(message);
}

showMessage(); // Output: Hello World!

alert(message); // Output: Error! - Variable is local to the function
Enter fullscreen mode Exit fullscreen mode

Return a Value

A function can return a value - usually one generated or manipulated by the function code.

const movieAgeLimit = 13;

function checkAge(age) {
  if (age >= movieAgeLimit) {
    return true;
  } else {
    return false;
  }
  // Alternative: return age >= movieAgeLimit
}

const hasAccess = checkAge(18);

if (hasAccess) {
  alert("Enjoy the movie");
} else {
  alert("You are not old enough for this movie");
}
Enter fullscreen mode Exit fullscreen mode

Call another Function

It can also be used to perform an action or call another function

const yourName = prompt("What is your name?");

function showWelcomeMessage(name) {
  alert(`Welcome ${name}`);
}

showWelcomeMessage(yourName);
Enter fullscreen mode Exit fullscreen mode

Summary

  • Function names tend to be verbs to easily describe what the function does.
  • Arguments are values you can pass to be used within a function.
  • Local Variables declared within a function are only visible within the function scope.
  • A function can return a value or call another function / action.
  • Use functions to store reusable code that can be called as and when needed.

Let's connect 💜

You can follow me on Twitter, Instagram & GitHub

If you like this post. Kindly support me by Buying Me a Coffee

Buy Me a Coffee

Discussion (0)