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();

'Yuki'
'Kasugai'
'Japan'

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();

'Yuki'
undefined
undefined

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();

'Yuki'
'Kasugai'
'Japan'

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();

'Yuki'

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();

ReferenceError: j is not defined

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);

Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}

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();

Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}

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);

Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}

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();

{name: Window, myFunc: ƒ}

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();

{name: Window, myFunc: ƒ, age: ƒ}

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);

myFirstObject {name: 'yuki', id: 100}

reference link2
reference link3