DEV Community

Brian Barbour
Brian Barbour

Posted on • Updated on

Var and Function Scope In Javascript

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Latest comments (5)

Collapse
 
jijii03 profile image
lincey.J

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.

Collapse
 
donovantaitt profile image
Donovan Taitt

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!

Collapse
 
jijii03 profile image
lincey.J

thanks for the advice it help a lot!

Thread Thread
 
donovantaitt profile image
Donovan Taitt

No problem!

Collapse
 
abbyrjones72 profile image
Abby Jones

Nice intro to scope!