Functions are a way to organize your code in to re-usable chunks.

Same link as Explanation

- __Reusability__: Functions can be grouped together to make a module (or library), and then modules can be imported into your application so you can build awesome apps!

- __Abstraction__: Hide underlying details about how a piece of functionality works under the hood. You can change how things are implemented within the function without other programmers who use your function worrying aobut the exact details of how it was implemented.

And the same link as Explanation

Scopes define the visiblity of declarations of variables and functions.

The top level outside all your functions is called the _global scope_. Values defined in the global scope are accessible from everywhere in the code.

- `var` and `function` declarations are visible with function scope.

- `let` and `const` declarations are visible with block scope.


let villan = "Joker"; // | global scope

// |

function myFunction() { // | | function scope

let hero = "Batman"; // | |

if (hero === "Batman") { // | | | block scope

let coHero = "Robin"; // | | |

console.log(hero); // | | |

console.log(coHero); // | | |

console.log(villan); // | | |

} // | | |

console.log("------") // | |

console.log(hero); // | |

console.log(coHero); // | |

console.log(villan); // | |

} // | |

// |

myFunction(); // |

And the same link as Explanation

What happens if we use the same variable name in different scopes?

function myFunction() {

let hero = "Batman";

if (true) {

let hero = "The Flash";

console.log(hero);

}

console.log(hero);

}

myFunction();

Same link as Explanation