Skills Based Js Intro To Variables


  • Explain how variables are tied to their contexts
  • Explain how local and global variables differ


In JavaScript, variables become global when they aren't declared with the var keyword. The story is actually a little bit more interesting.

Think of variables as notes on pieces of paper. Local variables are written normally, maybe on a post-it — they're for one person to see. Global variables, contrastingly, are written on billboards in big, bold letters — they're for everyone to see!

Variables in JavaScript have function-level scope, meaning that variables are bound to the function context in which they're declared. An example will make what we mean clearer.

function speaker() {
  var sentence = 'Bird is the word.';


Above is an example of a local variable - it is defined within a function and will not be accessible outside of the function.

If we call speaker() in console, we'll see 'Bird is the word.' logged out — all is well. But if we call console.log(sentence) outside of the speaker function, we'll get an error — the variable sentence is bound to the context of the function speaker.

If, however, we write

function speaker() {
  sentence = 'Bird is the word.';


and run speaker(), we can now call console.log(sentence) outside of the speaker function because we have declared the variable sentence without the var keyword — it's now a global variable.

Same Variable, Different Scopes

Keep in mind too that the same variable name used in different scopes is effectively a different variable. We sometimes refer to repeating a variable name in an inner scope as "shadowing" — it's best to avoid, as you'll quickly see how confusing it can be:

var cuteAnimal = 'quokka';

function makeVariable() {
  var cuteAnimal = 'sugar glider';
  return cuteAnimal;

// 'sugar glider'

// 'quokka'

See? Nothing breaks, but if you have a lot of shadowed variables (or even just a lot of space between a variable's initial declaration and its subsequent change(s)), you're gonna have a bad time.

Changing Variable Values

Local variable assignment can overwrite global variable assignment:

volume = 10; //declares a global variable called volume and sets it to 10

function returnEleven() {
  var volume = 11;  //declares a local variable called volume and sets it to 11
  return volume;

returnEleven(); // returns 11
volume; // the global variable is still 10

function goToEleven(){
  volume = 11;  //changes the global variable to 11
  return volume;

goToEleven(); // returns 11
volume; // the global variable volume has been changed to 11

Notice that in the first function above, a local variable, var volume is declared and assigned to 11, but the global volume remains unchanged.

However, in the second function, the volume variable does not have var in front of it. JavaScript considers this to be a reassignment of the existing volume global variable. Ther esult is that the global volume variable gets reassigned.

Moving in the opposte direction, global variable assignment cannot overwrite local variable assignment, rather it simply reassigns the value of the local variable:

function sayHello() {
  var greeting = "hola";
  greeting = "hello";
  return greeting;

// Returns "hello",
// This demonstrates that the variable greeting is now pointing to the string "hello" instead of "hola"

// ReferenceError: greeting is not defined
// This demonstrates that the variable greeting is still local instead of global

Since greeting = "hello" is in the same scope and follows var greeting = "hola" in sequence, JavaScript understands this to be a reassignment of the local greeting variable.


View Variables on and start learning to code for free.

Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us