DEV Community

Yuki Kasugai
Yuki Kasugai

Posted on • Updated on

What are "Scope" and "This" Keyword in JavaScript?

What is "scope"?

The scope is the area in code from where a variable can be accessed.
In JavaScript, there are two types of scope: Global scope and Local scope. Local Scope can be further divided into two types of scope: Function scope and Block scope.

  • Global Scope;

    Global variables are those declared outside of a block {}

  • Local Scope;

    Local variables are those declared inside of a block {}

    • Function Scope
    • Block Scope

Global Scope

Global variables are those declared outside of a block {}.

In JavaScript, it is necessary that all codes are stored in the object and the object which is at the top of the hierarchy is the global object. Declaring a variable in Global Scope means that a property is attached to the global object. JavaScript runs on the web browser so the window object could be the global object.

var a = 'Yuki';
let b = 'Kasugai';
const c = 'Japan';

function callMyname1 (){
  console.log(a);
  console.log(b);
  console.log(c);
}
callMyname1();
Enter fullscreen mode Exit fullscreen mode
'Yuki'
'Kasugai'
'Japan'
Enter fullscreen mode Exit fullscreen mode

I tried to see properties in the window object (= Declaring variables in Global Scope) then, but I can only access var variable.

var a = 'Yuki';
let b = 'Kasugai';
const c = 'Japan';

function callMyname2 (){
  console.log(window.a);
  console.log(window.b);
  console.log(window.c);
}
callMyname2();
Enter fullscreen mode Exit fullscreen mode
'Yuki'
undefined
undefined
Enter fullscreen mode Exit fullscreen mode

It means that var is globally scoped and attached to the window object, on the other hand, let and const are globally scoped but not attached to the window object.

Local Scope

Local variables are those declared inside of a block {}. It can be further divided into two types of scope: Function scope and Block scope.

Function Scope

In the following code, Both 3 variables:var let const and each console.log are declared inside of a block {}. I can access 3 variables.

function callMyname3 (){
  var d = 'Yuki';
  let e = 'Kasugai';
  const f = 'Japan';
  console.log(d);
  console.log(e);
  console.log(f);
}
callMyname3();
Enter fullscreen mode Exit fullscreen mode
'Yuki'
'Kasugai'
'Japan'
Enter fullscreen mode Exit fullscreen mode

Block Scope

In the following code, 3 variables var let const are declared in a curly brace {} which is inside of a block{}, and each console.log is outside of a curly brace which is inside of a block{}. Then, I can only access var variable.

function callMyname4 (){
  if(true){
    var g = 'Yuki';
    let h = 'Kasugai';
    const i = 'Japan';
  }
  console.log(g);
  console.log(h);
  console.log(i);
}
callMyname4();
Enter fullscreen mode Exit fullscreen mode
'Yuki'
Enter fullscreen mode Exit fullscreen mode

It means that var variable is a Function scope and let and const variable are Block scope.
I tried to write console.log(j) outside of a block{}(= outside of the function) then I can not access it for sure.

function callMyname5 (){
  if(true){
    var j = 'Yuki';
    let k = 'Kasugai';
    const l = 'Japan';
  }
}
console.log(j);
callMyname5();
Enter fullscreen mode Exit fullscreen mode
ReferenceError: j is not defined
Enter fullscreen mode Exit fullscreen mode

I summarized those topics in a table.

Keyword Scope Hoisting Can be reassigned Can be redeclared
var Globally scoped & Function Scope Yes Yes Yes
let Globally scoped & Block Scope No Yes No
const Globally scoped & Block Scope No No No

reference link1


What is "this" keyword?

In JavaScript, the this keyword refers to an object. Which object depends on how this is being invoked (used or called).
The this keyword refers to different objects depending on how it is used
By W3schools

Alone

On global level, the keyword 'this' refers to global window object.
First, I write console.log(this) on global scope in the following code, then the result refers to window object.

console.log(this);
Enter fullscreen mode Exit fullscreen mode
Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}
Enter fullscreen mode Exit fullscreen mode

In a function

Next, I write console.log(this) in a function, then the result refers to window object as well.

function test(){
  console.log(this);
}

test();
Enter fullscreen mode Exit fullscreen mode
Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}
Enter fullscreen mode Exit fullscreen mode

In an object

In addition, I assign this to a property(name) in an object(myObject1), and the result also refers to window object.

var myObject1 = {
  name: this,
}

console.log(myObject1.name);
Enter fullscreen mode Exit fullscreen mode
Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}
Enter fullscreen mode Exit fullscreen mode

In a method

Lastly, I write console.log(this) in a method(myFunc) of an object(myObject2). Then, the result refers to a function (myObject2).

var myObject2 = {
  name: this,
  myFunc: function(){
    console.log(this);
  }
}

myObject2.myFunc();
Enter fullscreen mode Exit fullscreen mode
{name: Window, myFunc: ƒ}
Enter fullscreen mode Exit fullscreen mode

Even if I add a method(age) later, the result refers to a function (myObject2).

var myObject2 = {
  name: this,
  myFunc: function(){
    console.log(this);
  }
}

myObject2.age = function(){
  console.log(this);
}
myObject2.age();
Enter fullscreen mode Exit fullscreen mode
{name: Window, myFunc: ƒ, age: ƒ}
Enter fullscreen mode Exit fullscreen mode

In a constructor function using the new operator

Moreover, we have to remember if we use constructor function using the new operator, the result refers to the first function(myFirstObject). It means that this in the constructor function refers to the first function(myFirstObject).

function myFirstObject(name,id){
  this.name = name;
  this.id = id;
  }

var mySecondObject = new myFirstObject("yuki",100);

console.log(mySecondObject);
Enter fullscreen mode Exit fullscreen mode
myFirstObject {name: 'yuki', id: 100}
Enter fullscreen mode Exit fullscreen mode

reference link2
reference link3

Top comments (0)