Reading Time: 5 mins
Functions… Assemble!
What has the snark of Tony Stark, rage of Bruce banner and the mystery of Black Widow got to do with an object orientated language like JavaScript? A lot more than you think…
As part of studying my FrontEnd Techdegree with Teamtreehouse, I’ve been looking at JavaScript (JS) functions over the last couple of weeks…
Now a ‘function’ is a set of statements (instructions which the browser will follow), which is designed to perform a particular task.
The beauty of a function is that once we have written it once, then all we have to do is ‘call’ the function, (activate it by using the function name) and it will do everything that you have to ask it to do without writing it all again which saves tons of time and avoids you repeating yourself loads and loads of time.
By just typing “sayHello()”, the whole function can executed without typing any additional code…
The best analogy that I can give is sending my nephew to buy groceries: Imagine that my 17 year-old nephew is staying with me over the Summer holidays and before I go to work, I tell him that he will need to buy eggs, bacon and milk from the local supermarket when I text him later in the day. I tell him the directions and how much each item will cost. My nephew memorises the instructions and waits for my text. Later in the day, all I would have to do is send a text saying “buy groceries” and my nephew grudgingly will get up, to the store and get the items that I requested. I wouldn’t have to ring him and repeat all the instructions again and we can enjoy a lovely english breakfast tomorrow morning!
Sweet. All was going well until my Techdegree threw me for a loop with this challenge…
Now this section of code will hen executed, will make the browser pop up either the name ‘Lilah’ or ‘George’ The 1st part of the code is a function that has a variable (which is a container) for the name ‘Lilah’. The next line creates an alert box which will display whatever is in that container (which is ‘Lilah’).
But outside that function we also have a variable called ‘person’ but this one contains the name ‘George’. So pop quiz hotshot, when the code runs, what names will appear and in what order?
You guessed it?
It would be Lilah, George and Lilah and here’s why:
1) “greeting();” jumps into the ‘function greeting’ and looks for the variable inside that function and creates a pop-up bar with the name ‘Lilah’.
2) On the next line, “alert(person)” can’t access that function (I’ll explain later) so it looks elsewhere for “var person” and finds one that contains “George”
3) Repeats Step 1.
It may seem easy now but when I first encountered this problem it was driving me crazy as I couldn’t figure it out. Shouldn’t it be all ‘Lilah’ or all ‘George?’
But Treehouse didn’t leave me hanging as they explained a little thing called ‘JavaScript Scopes’.
JavaScript Scopes
In JavaScript, a scope defines what a variables that you have access to and this has massive effect on how your programs run. They come in 2 basic flavours: The ‘Lilah’ variable is an example of a ‘Local Scope’ and ‘George’ variable is an example of a ‘Global’ scope.
Local Scopes
Variables that created within a JS function, become ‘local’ to that function. What that means is that local scopes can only be accessed within that function – basically a local function lives in it’s own universe as it may. You can only change anything in that function when you jump into that ‘universe’. Because it lives in its own ‘universe’, you can use variables with the same names in different functions.
Global Scopes
A variable declared outside of a function becomes global. That means that all the scripts and functions on a web page can access it. This is a much wider ‘universe’ and many more factors can affect it.
Now there’s a very special condition to this: If within a function, the ‘var’ keyword has not been added to the variable, it automatically becomes ‘global’.
i.e if our function was written like this:
function greeting() {
person = ‘Lilah’;
alert(person);
}
it would no longer be a ‘local’ function and this will completely change the result of our programs.
Anyway back to our example.
It was really tough to get my head around this until I had the genius idea to relate it to movie universes… Now we all know that Spiderman belongs to Marvel Comics which is also the home of The Avengers, Doctor Strange, Ant-Man and Guardians of The Galaxy. But why was it only in 2015, did we see Spiderman join the The Avengers in 2016’s “Captain America: Civil War?”
This was because SONY studios owned the Spidey’s movie rights from 2001 to 2016 when they did a co-licensing deal with Marvel. SONY’s spiderman movies are an example of a ‘local scope’ and the Marvel Cinematic Universe (MCU) is an example of a ‘global scope’.
Local Spiderman
Although Spidey operated in New York like The Avengers, he could never rub shoudlers with any of them because they could never step into his ‘world’. Any of Spidey’s city destroying battles did not have an effect on any of the comics nor the MCU films.
Like a local variable, Spiderman could only deal with the characters related directly to him and thus did not have the chance to crossover.
Global Avengers
Whereas like a global variable, the MCU holds most of the film rights to it’s most iconic characters which means they exist in a bigger ‘universe’. The MCU not only ties into the movies, but the TV shows, comics and games meaning that what happens in one medium has a direct effect in what happens in another.
A great example is after The Avengers defeated Loki and his alien army in the first Avengers film in New York, TV shows like ‘Agents of Shield’, ‘Daredevil’ and ‘Luke Cage’ showed the aftermath of the battle and how city was permanently changed.
And to take it even deeper, when Spiderman crossed over into the MCU universe is an example of how when the ‘var’ keyword is not declared in a local function, it can become ‘global’ and be accessed by all. In “Captain America: Civil War”, Spidey was a pivotal player in the battle and was a firm fan favourite!
This is all a bit of fun but it really helped me get my head around scopes and I hope that it helps you too!
What do you think? Can you you think of any better examples? As always, leave your comments below or tweet me @karlwebdev!
See you next Thursday!