Getting Out Of ReferenceError Because of Scope in Javascript

Ever stuck in ReferenceError?

Basic knowledge of javascript is highly recommended, before proceeding with this content. However, there’s always something to take out of this content even if you are a beginner.

with that in mind, we can go straight to understanding what this content is all about.

Back to the big question, Ever stuck in ReferenceError?

Well, every one of us somehow has seen this error before for some reason,

my focus is going to be on the most common cause of this error which is SCOPE.

What is a scope?

Scope in javascript is referred to space or an environment where a variable is declared.

simple as that, an analogy to demonstrate this will be having a backpack with different kinds of writing materials such as books, pens, etc,

Think of the backpack as the environment and all the items it contains as variables, functions, etc.

Types of scope

There are three types of scope in javascript, they are namely:

Global scope.

• They can be reached anywhere in the code.

• They are top-level code in the call stack.

const role = "developer";

console.log(role)

the above code is an example of global scope. This will work fine because it exists within the global scope.

Function scope.

In Javascript, every function creates scope, and the variables within them can only be accessed within them and from the not outside. This will produce a ReferenceError.

which was the question asked at the beginning of this content, to understand this, have a look at this code snippet.

const jobDesc = (exp) => {
  const yearExp = 7;
  let skill = "Node";
  const remote = true;
  if (yearExp !== exp) {
    return `your experience is ${exp}, and you are not a fit`;
  } else {
    return "congratulations your a fit";
  }
};

console.log(skill) // Uncaught ReferenceError: skill is not defined

When we tried to access the variable skill,and got a ReferenceError

Block scope.

This applies to ES6 only, in ES6 block also creates scope, variables are only accessible inside the block they are declared. i.e everything in the curly braces such as an if statement, for loops.

if(age >= 19 && age <=21){
  const party = true;
}

console.log(party) // Uncaught ReferenceError: party is not defined

In ES6 all functions are now blocked scope in strict mode.

This is quite a lot to take in, so let me go over everything. We defined scope as space or environment where variables are declared.

There are 3 types of scope, global, function, and blocked scope. Variables declared on the global scope are accessed everywhere. The function scope creates its own scope, variables declared in function scope are only accessed inside the function scope. Lastly, ES6 creates its own blocked scope, everything wrapped within curly braces (e.g if statement for loops, etc) are blocked scope and can’t be accessed outside the block.

If you find this helpful please leave a comment let me know your thoughts. Happy coding guys look forward to reading your comments.