Functions & Methods

What are functions

functions are one of the most important parts of coding in any programming language. They fall under the objects section which we know are: arrays, object literals, functions, dates, etc..
Functions are like a box with some code in it. The function can activate whenever some certain thing happens. You can call a function to turn on as many times as you want.

Function Declarations & Expressions

Lets start off by making our own function

function greet(){
console.log('Hello there!');
}

Starting off we can see the functions name is 'greet'. Important thing to note is everything in the {} is the code, the curly braces tell where the block of code is. inside the block of code its just saying to put out 'Hello there!',
But if you type that in you wont see it anywhere. we need to call the function so it runs.

greet();

The brackets call the function and the word 'greet' tells that the greet function is the one called.
Once the function is called it shows up in the console
Something you may not know is we can call a function using a variable

const speak = function(){
console.log("What's up")
};

Here you can see the constant 'speak' has a value of a function. So whenever the function is called it will put out the function which will say "What's up" and to call this function is the same way we do with any other function

speak();

Functions are read out before anything else in the JavaScript so it knows to use it later, unless you make a function that is the value to a variable then it will read it in the order give.

Arguments & Parameters

Sometimes we have to pass values into functions. So lets say you want to say hi to someone using their first name. well lets see how that would look

const greet =function(name){
console.log(`Hello ${name}`)
}
greet()

This comes out as 'Hello undefined'. which is not a name (yet) so what we have to do is pass a value into the function to do this is pretty simple

greet('james')

By putting the name in greet we make the variable 'name' = 'james'. The variable will not work outside the function unless you give it an outer value
we can put in multiple values but it gets a bit strange

const greet =function(name, time){
console.log(`Hello ${name} it is ${time}`)
}
greet('james', 'morning')

Multiple variables are read from left to right. so in the function() you have to see the order of variables and give values as needed. The order of variables does not affect anything within the {} because that is the block of code that will be output
another way of setting values in functions is with equals

const greet =function(name = 'james', time = 'night'){
console.log(`Hello ${name} it is ${time}`)
}
greet()

if you give value to

greet()

it will replace whatever value you may have put into the function

Returning Values

We can have functions return values. We can also give functions values to store and used later. An example is it storing measurements of some object. so lets find the area of a circle

const calcArea = function(radius){
let area = 3.14 * radius**2;
console.log(area)
}
calcArea(5);

With some math we can see the area is 78.5 but lets go over what we told the code to do. First we said that the function will output the area. then we told it the area is 3.14 times the radius to the power of 2
and in the bottom we said the area was 5
The problem is that the area only works within the function despite it being a const
So in order to bring it back we use the keyword return and our code looks like this

const calcArea = function(radius){
let area = 3.14 * radius**2;
return area
}
const area = calcArea(5);

now in the system it knows what the area is. In the constant area we know that it will equal the calcArea
it is much easier to directly return the variable by cutting out some fat and having a smooth function like so

const calcArea = function(radius){
return 3.14 * radius**2;
}
const area = calcArea(5);
console.log(area)

Arrow Functions

arrow functions are just like a better way of making functions. lets take our area calculator function and make it into a arrow function

const calcArea = (radius) => {
return 3.14 * radius**2;
};
const area = calcArea(5);
console.log(area)

as you can see there are a lot of elements removed. the '=>' is our arrow in arrow function. in this code we are saying the same as the original. what is 3.14 times the radius to the power of 2. we can simplify this even more so. if you have only one parameter (variable) you can take away the parenthesis. if there is more than one variable or less than one variable you have to have the parentheses

const calcArea = radius => {
return 3.14 * radius**2;
};
const area = calcArea(5);
console.log(area)

since we only have one return in there we can make it even shorter to a point where the function takes one line

const calcArea = radius => 3.14 * radius**2;
const area = calcArea(5);
console.log(area)

and there it is. in calc area, function radius, 3.14 * radius**2.
this is a much easier way of making functions and it cuts down on a lot of space that might be hard to read.

Functions vs Methods

The difference between a method and a function is the way they are defined
lets start off with a simple arrow function and store its results

const = greet = () => 'hello';
let resultOne = greet();
console.log(resultOne);

Lets compare this to a method which uses dot notation

const name = 'james'

let resultTwo = name.toUpperCase()
console.log(resultTwo)

this is still a function telling it to say name which is 'james' and put it into uppercase
you can see that dot notation is much simpler where instead of a full equation for a function we just state what it needs to do.
in both cases we use parenthesis and in both a command is made

Foreach Method & Callbacks

We can make a function that has a function within it. this is called a callback function
lets see an example

const myFunc = (callbackFunc) => {
//this is where we tell it to do something
let value = 50;
callbackFunc(value);
};

myFunc(function(value){
console.log(value)
});

so as you can see we have created our function 'myFunc' and called it back in myFunc() but we're passing in a function as an argument. and telling it to output the value.
lets turn our callback function into a arrow callback function so that there is less clutter

const myFunc = (callbackFunc) => {
//this is where we tell it to do something
let value = 50;
callbackFunc(value);
};

myFunc(value{ console.log(value) });

Lets use methods for a moment. I'm going to create an array of strings and run the forEach method on it which will iterate

(i looked it up it means to read over and over)

the list

let things = ['book', 'car', 'shoe', 'cup', 'doll']

things.forEach(function(){
console.log('something')
});

what this will do is when the array is read over for every item read the function will go once. there are 5 things in this array so it will say 'something' 5 times
if we put our array in as the variable of the function instead it will read out every thing individualy

let things = ['book', 'car', 'shoe', 'cup', 'doll']

things.forEach(function(things){
console.log(things)
});

this can also be turned into a arrow function and can have more than one variable for the function much like things we've already gone over