loading...

Var and Function Scope In Javascript

steelvoltage profile image Brian Barbour Updated on ・2 min read

Time to talk scope.

Scope determines visible and accessible variables. Block scope is scope within a set of curly braces. Most programming languages have block scope. That being said, for you Javascript newbies out there, what is function scope and how does it work?

It's okay if you don't know. I didn't at first either. Let me explain.

As the function part of the name implies... anytime we create a var inside of a function, it becomes scoped to the function.

Example time! We just need to make it clearer with code:

function dog () {
  var name = "Fido"
}

console.log(name) //name is not defined

You can't access name outside of the function. Now, let's try it again, with a block.

var dog = true
if (dog) {
  var name = "Fido"
}

console.log(name) // returns Fido

Even through the name variable was declared inside of the block, we can access outside.

How do the let and const keywords play into this? Well, rewinding to our last example, we'll refactor the code a little to see.

const dog = true
if (dog) {
  const name = "Fido"
}

console.log(name) //name is not defined

Note: this would work the exact same way with the let keyword as well.

The variable can't be accessed, as it's scoped to the if statement's block, trapped inside of its curly bracket prison, with no hope of escape. Not like its older brother var, who is free in this instance.

For most seasoned Javascript devs this is probably well known and really basic information.

I learned ES6 variable keywords and got the impression never to touch var. As time went on I stopped seeing it as some forbidden relic of the past. It's a tool, just like all the other keywords in the language.

I've been expanding my knowledge about Javascript, getting down to the nuts and bolts. Part of the journey has been playing with var, to cement the difference in my mind. I think it helps when looking at older code, or code made to be compatible for older browsers.

For the newbies out there, I hope my explanation and examples help you avoid the head scratching var caused me.

Play around with the keyword yourself, get comfortable. Fear not! You'll be crossing its path eventually, better to be prepared as they say.

Check out Hoisting to get a better feel for how that works, I think its a natural progression from understanding var and function scope.

Posted on Jun 10 '19 by:

steelvoltage profile

Brian Barbour

@steelvoltage

Software Engineer at Community Brands and Javascript enthusiast.

Discussion

markdown guide
 
 

i don't know why but a lot of people are using the var... not sure if i should still use it or not ? I'm learning javascript at the moment so i'm a little confuse.

 

Moving forward I would say, don't use var anymore. Ever since 2015, the industry has been moving away from it in favor of let and const. Any time you see var in the wild, it's probably old code examples that haven't been updated in a while. If you're confused when seeing examples online, you can mentally replace them with let. Hope that helps!