# JavaScript

### Functions

In JavaScript there are 2 main types of functions you need to know. **Declaration** or **function expression**. 

#### Declared functions

Declared functions are as follow. \[ **they are only for execution when invoked** ] will not automatically execute. //semicolons are used to separate executable JavaScript statements. 

```javascript
function functionName(parameters){ 
  return a * b;
}
```

#### Function Expressions 

![Expression meaning. Reference: JavaScript Expressions and Statements \[ Madu M \]](https://1016642613-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLICeMp-ugVlUqxbbIS%2F-MPhjXgVBjtZ-r4opb6z%2F-MPhmH10gz9f0fwr2PEW%2Fimage.png?alt=media\&token=d2f29ec3-c235-437d-b9cb-c6883fba9cbb)

Function expressions can be **stored in a variable and they are defined using an expression**. This type of function is also called **anonymous function** (**a function without a name**)

```javascript
var x = function(a,b){return a * b}; //ends with semicolon as it is part of executable statement
var z = x(5, 6); //wiill return 30 
```

#### The Function() Constructor

In previous examples, JavaScript functions are defined with the function **keyword**. But functions can also be built with **function constructor** called **Function()** 

```javascript
var myFunction = new Function("a", "b", "return a * b");
var myFunction2 = Function("c", "d", "return c * b"); //can omit the "new" keyword.
var x = myFunction(4, 3);
var y = myFunction2(4, 3);

console.log(x == y); //This will be true.
```

#### Function Hoisting 

Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope. So the variable can be defined after being called. Functions can also be called first before declaring them. 

```javascript
myFunction(5);

function MyFunction(y){
  return y*y;
}
```

#### Self-Invoking Functions or Immediately Invoked Function Expression. 

A self-invoking expression is i**nvoked (started) automatically**, without being called. Function expressions will **execute automatically if the expression is followed by ()**.

*\*Note: You cannot self-invoke a function declaration.* You have to add **parentheses around the function to indicate that it is a function expression**:

```javascript
(function(){
 var x = "Hello";
})();
```

#### **Arrow Functions**

It allows a **short syntax for writing function expressions**. You don't need **function** keyword the **return** keyword and the **curly brackets**. 

### Callbacks

Callbacks are functions passed as an argument to another function. 

```javascript
function SayHi(name){
  console.log("Hello " + name);
}

function CallbackTest(firstname, lastname, callback){
  fullname = firstname + lastname
  callback(fullname)
} 

CallbackTest("Simple", "Guy", SayHi); //this will print Hello SimpleGuy
```

Instead of passing the name of a function, you can pass a whole function. \[function expression] 

```javascript
setTimeout(function(){console.log("Hello!");}, 3000); //Returns Hello! after 3 seconds
```

Another example of opening a file. And only displaying it after the file has fully loaded. 

```javascript
function myDisplayer(some);
  console.log(some);

function getFile(callBack){
  let req = new XMLHttpRequest();
  req.open('GET', "longtext.txt");
  req.onload = function(){          //this is  an anonymous function inside an object
    if (req.status == 200){
      callBack(this.responseText); //you can use this keyword here as it is inside an object, and we know what object the key word is referring to
    } else{
      callBack("Error: " + req.status);
    }
  }
  req.send();
}
```