Monthly Archives: September 2013

Javascript fundamentals: Scope

Scope, then. Not just the thing on top of a sniper rifle – it’s something that can trip you up in sometimes subtle and seemingly devious ways in JavaScript. This post will get you on your way to understand what it is.

TLDR; Summary

Scope determines which parts of your code can access other bits. This is largely controlled by using the ‘var’ keyword when declaring a variable, and where that keyword is used (inside a function, outside a function et) determines the scope. A variable with ‘global scope’ can be accessed by any part of your code.

That wasn’t particularly short. Got anything shorter?

Scope in JavaScript can be tricky until you ‘get it’. I’ll help you get it.

Go on then, what is ‘scope’. What does that mean?

In JavaScript, you can declare variables. You do it something like this:

var myVariable = "some text";

You might also have seen a variable declared like this – without ‘var’:

myVariable2 = "some more text";

I know that. So what?

That var keyword – that can be the source of lots of pain. Luckily, there are some simple rules:

  • If you omit the ‘var’ keyword when declaring a variable, and there isn’t already a global variable with the same name in your code, that variable will have ‘global scope’ – meaning any part of your code can access and modify that variable.
  • If you do include the ‘var’ keyword, the scope of the variable will be determined by which part of your code you’ve declared it in.

That second bit was… vague.

Luckily that’s also quite simple. JavaScript has ‘function-level scope’. That means that if you declare a variable using the ‘var’ keyword, and you do it inside a function, generally speaking only code within that function can access and modify it. Unless you pass it around to other functions, but we won’t worry about that right now. Fancy some examples?

Yeeaaaaaah boooyyyy.

// Welcome to some code examples.

/* Both of these variables are Global.
 The first one is using the 'var' keyword, but it's not declared in a function.
 This means it's global. */

var myGlobalVariable1 = true;

/* This one hasn't used var, and there isn't a pre-existing variable with the same name.
 This means it's global. */

myGlobalVariable2 = true;

function myFunction() {

  /* We haven't used the var keyword here. There is a pre-existing variable with the same name.
   This means the pre-existing variable just gets updated. */

  myGlobalVariable2 = false;

  /* We've used the var keyword. We're inside a function.
   This means this variable has local scope to this function. */

  var myLocalVariable1 = true;

}

// What happens when you try to access the local variable declared inside the above function?
console.log(myLocalVariable1);
// ...it doesn't work.

That’s the basics. Play around with some code (by far the best way to learn), and bear in mind those rules.

Those of you who might be reading this and thinking “Hang on, you lying bastard, there are plenty of exceptions to what you’ve said above! TWAT” – you’re right. There are. But this is for beginners. If you find a beginner, help them out. When they’ve figured it out, you can bore them to death with the exceptions.

Javascript fundamentals

I thought I’d write a series of blog posts around Javascript. It’s a funny bugger of a language, but I really enjoy using it.

I’ll assume the reader has some knowledge of the fundamentals of programming (variables, functions/methods, C-like syntax).

Something I found quite irritating when I was learning JavaScript is that it’s practically impossible to find a concise, and beginner-friendly explanation for something. Scope, closures, objects – all of those things are explained in millions of different ways, nearly all of which don’t make sense to a relative beginner.

I consider that my challenge – explaining this stuff in an accurate, concise, and easy to understand way. You can let me know if I’ve failed.

I’ll tag these posts (unsurprisingly) as JavaScript.

Evenin’.

Hello! It’s been a while since I’ve blogged, so I thought I’d get cracking again.

If you’re interested in web development, gaming, or dogs, hopefully at various points there will be something to interest you. If there isn’t, well – go and explore. There’s plenty of tubes to find things in.

I’m James, I’m a web developer. I work for a technology company who makes whizzy things. I find blogging to be a good way to remember things I’ve found useful that I’d otherwise forget.

That’s it for now. Bye!