DEV Community

Cover image for Functions and Methods
RyanEtten21127
RyanEtten21127

Posted on

Functions and Methods

What are Functions and Methods?

Functions define a block of code that you can use any time we want. A function is called when something invokes it. The cool thing about functions is that you can define the code once and executing it multiple times. A method is a function, but the way that you execute it is different. There are a few topics that we need to go over for functions and methods.

Function Declarations and Expressions

First of all, functions will not run unless we actually call the function, so please remember to call it before executing a function. Declared functions are saved for later use and will be executed later in your code.

function greet(){
  console.log('hello there');
}
Enter fullscreen mode Exit fullscreen mode

An expression is when you set a variable equal to something (could be a function or any other tool). You have to use semicolons after each expression.

const speak = function(){
  console.log('good day!')
};
Enter fullscreen mode Exit fullscreen mode

Arguments and Parameters

Arguments take any value of a function and stores into another variable. The order of the arguments MUST match the order of the arguments. You can also define values inside of the parameters.

const speak = function(team = 'red sox', wins = 60){
   console.log(`the ${team} have ${wins} wins`);
}
Enter fullscreen mode Exit fullscreen mode

Returning Variables

The way that returning values work is that it stores the output value inside a new constant.

const calcArea = function(side){
  return side**2;
};

const area = calcArea(5);
console.log(area);
Enter fullscreen mode Exit fullscreen mode

Arrow Functions

Arrow Functions are a simpler way of writing regular functions. The first difference is if there is only one parameter, you don’t need to put parentheses inside the parameter. Also, if there is a single return line, you can remove the “return” keyword as well as the curly braces and move the text next to the arrow. This is an example of using an arrow function to find the area of a square:

const calcArea = side => side**2
Enter fullscreen mode Exit fullscreen mode

Functions vs Methods

There are a few differences between functions and methods. A function is a group of reusable code which can be called anywhere in the browser. This gets rid of the need for writing the same code repeatedly. Whereas a method is actually an object reference to a function.

Function:

const greet = () => 'hello';

let result = greet();
console.log(result);
Enter fullscreen mode Exit fullscreen mode

Methods:

let result = name.toUpperCase();
console.log(result);
Enter fullscreen mode Exit fullscreen mode

Foreach Method and Callbacks

The forEach method calls a function once for each element in an array. Callbacks passes a function as an argument and it defines the function and call it back to the main function.

let teams = ['red sox', 'heat', 'dolphins', 'hurricanes', 'saints'];

const logTeam = (team, index) => {
  console.log(`this team is ${team}`);
}

teams.forEach(logTeam);
Enter fullscreen mode Exit fullscreen mode

Conclusion

Functions and Methods are used to perform multiple tasks for minimal lines of code. If it weren't for functions, every command would be so manual and repetitive. In fact, I don't think it would even be possible to navigate anything on the web if functions were not invented. I learned so much about functions and methods over the past month and I cannot wait to get started on some projects.

Top comments (0)