JavaScript Functions - JargonScript
What are functions ?
as MDN describes,
Functions are one of the fundamental building blocks in JavaScript. A function is a JavaScript procedure—a set of statements that performs a task or calculates a value.
To use a function, you must define it somewhere in the scope from which you wish to call it.
Simply, a function is a piece of code which is a sequence of statements that can be executed over and over. We use functions to do a repetitive task to ease our development.
How to Define Functions ?
There commonly 2 ways to define functions in JavaScript.
But they have common meaning whatsoever, a function has a name, parameters, and body. the body may and may not have a return statement.
If the body doesn't have a return statement, undefined is returned by default.
Function Declaration
Function Expression
Difference between Function Declaration and Expression.
In my opinion, hoisting is the only factor I'd pick for choosing one or another syntax when coding.
Hoisting
When JavaScript compiles the code, variable declarations using var keyword and Function Declaration are lifted to the start of their functional/local scope.
The lifting up is a conceptual term of saying they get memory allocation during the start of execution.
Think of Hoisting as a way to treat older citizens of JavaScript world.
They get the memory before anyone else.
Lets Unbox Functions shall we?.
We are going to take help from Hypothetical YouTube Channel.
We are going to unbox functions.
YouTube captions will be right below the text starting with YT.
Whenever we invoke a function, it creates an execution context.
YT - Whenever we order product to unbox, it comes in a delivery box.
To Invoke a function it needs to be in scope.
YT - To Start the unboxing we need a package in our hands.
When we call a function, it gets pushed into a stack and we call that ( .... wait for it ) the Call Stack.
YT - : lame joke: and we place the delivery box on the shelf. That shelf is called "Call Stack"
What the heck is Execution Context ?
This is the environment where the function gets executed, which has all the data about variables and the functions that it has access to.
YT - The delivery box contains all the things we need to review, it can contain another delivery box inside it which are all labeled and tells us what "this" box is.
Execution context is made up of
Variable Environment - Variables which are passed to function or defined inside it .
Lexical Environment - Keeps variables in key value pairs and a link to parent lexical environment.
This Keyword - Reference to the object calling the Current Function.
Mr Call Stack
MDN tells us this
A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc.
1. When a script calls a function, the interpreter adds it to the call stack and then starts carrying out the function.
2. Any functions that are called by that function are added to the call stack further up, and run where their calls are reached.
3.When the current function is finished, the interpreter takes it off the stack and resumes execution where it left off in the last code listing.
4.If the stack takes up more space than it had assigned to it, it results in a "stack overflow" error.
A call-stack is a structure that keeps track of all the function executions and current execution context.
Whenever we call a function, we put it in the call stack and if our function calls another function we put it on the top of the current function.
JavaScript being single threaded can handle one operation at a time.
YT - When we have a box on the shelf and we open it. If that box contains another box inside it. We open that box first and then get back to the other items of the box.
One thing at a time for our YouTube Host.
This Amazing YouTube video from Colt Steele https://www.youtube.com/watch?v=W8AeMrVtFLY explains that explains call-stack.
