MarceloVarela22377

Posted on Jan 18, 2021

So Functions and Methods are the Same?

#css #html #javascript #webdev

The Prologue ... Duh! Doh! Duh!

That was supposed to be like that scary beat drop from the movies... nevermind.

Hello and Welcome, my name is Marcelo Varela, and I'm here to guide you in your journey to being a coding master through these blogs. If you see one of my blogs that triggers curiosity or one that you think can help you in a crunch, don't hesitate to check it out!! In this blog I'm going to let you in on a little secret in JavaScript! That secret is... and you'll know why by the end of this blog.

Lets first learn about some functions and some different types of them.

Functions

Ok lets hop right into this cart on drive into functions.

First off we got to learn what a function is. So what is a function? __A function in programming is a block of code that can be used throughout the entire code. But there is a catch to this, first lets tell you the 4 different types of ways to write a function.

1. Function Declerations

Ok so as we end the first lap the #1 car (Declarations) are your basic functions that can be placed anywhere in the code and be activated if called upon like shown here

racer1();

function racer1(){
  console.log("Im going for 1st place in today's race");
}

racer1();

Both the racer1 above the function and below it will work and return the indicated portion to the console/terminal.

2. Function Expressiosns

Here is where that exception from earlier comes in as the #2 car (Expression) finishes lap 2.

In this type of function it MUST be written above or before the calling of the function. If the function in this form is put below the calling, an error will occur in the console/terminal. An example of how to write the Function Expression is shown below:

const racer2 = function(){
  console.log('Should I try to pass Mickelson on the next turn' );
}

racer2();

If the function is not above the calling in this format of the function, then it will error in the console/terminal

3. Function Arrows

Trying to pass car #2 on the final turn of lap 3 is car #3 (Arrows).

Function Arrows are just another way to write your functions, they must be placed before the calling just like Expressions like shown below.

let racer2Name = Clyde;
const racer3 = () => 'Im going to pass', ${racer2Name}, ', I know it';
console.log(racer3)

Keep in mind that these are just multiple ways to write functions. I could've used any if the previous functions to get the same result in the console/terminal if I just rewrote the code inside the function to the specific formats.

Methods

As were nearing the end of lap 4 car #4 (Methods) has decided to come up from behind and show he is also able to keep up with the group.

So... ready for the secret I said at the beginning of the blog? Well here it is: Methods... ae just another way to wrote functions. :):) All they do is just give the function an ability or a certain thing to do when entered into the console/terminal. Examples include .length , .toUpperCase. Here is an example of a method.


let name = Kirito 
racer4 = name.toUpperCase();
console.log(racer4);

.forEach Method

Another notable method is the .forEach. This method will, when called upon, log all available lists of terms that are available in the function. Here is an example of how you would this:

let mainCharecters = ['Kirito', 'Clyde', 'Natsu', 'Gon', 'Kiliua', 'Asuna', 'Lucy']

const powerMode = (mainCharacters, index) => {
  console.log('${index} - My name is ${mainCharacters}')
}
mainCharacters.forEach(powerMode);

The End... Vrrm! Vrrm! Vrrm!

Do you hear this one, the noise effect I mean. Ok well I guess I might as well tell you how the race ended. It was a four way tie. Each of the cars or Functions reached the best function at the same time. Meaning they are all important to use and that none are more important then the other. In the end not comes to preference on which and when to use them.

For review in this blog I covered for you:

What Functions are,
the 4 types of functions: Decelerations , Expressions, Arrows, and Methods,
and a specific type of method known as .forEach.

Thanks again for popping in and checking out this blog. If you want to talk you can interact with me in the comments and we an talk. If you have tips or questions, lmk in the comments and ill try my best to answer questions. Have a great day or evening!!! See you in the npxt one!!!

Resources

Top comments (2)

Rico Brase • Jan 18 '21

Great post!

When I'm explaining the difference between functions and methods, I always add, that methods are specific functions running in the context of an object.

Let's imagine, we want to let a user say hello:

// Function

const user = {
    name: "Firstname Lastname"
};

function sayHelloFunction(user) {
    console.log(`Hello, my name is ${user.name}!`);
}

// Somewhere in your code:
sayHelloFunction(user);

// ----------------------------//

// Method
class User {
    constructor(name) {
        this.name = name;
    }

    sayHelloMethod() {
        console.log(`Hello, my name is ${this.name}!`);
    }
}

const user = new User("Firstname Lastname");

// somewhere in your code:
user.sayHelloMethod();

Note, that we don't have to pass a user to the method, since we provided that information implicitly through the context of the user-object, on which the method is called.

Lathifahdhiya • Jan 18 '21

Wow, thank you for this! I’m pretty new in JavaScript and it’s great to know all kinds of ways to write functions.

DEV Community