What are "Scope" and "This" Keyword in JavaScript?
Tags: javascript, beginners
Published: 2022-10-06 03:39:10

# 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.

```JavaScript
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. 

```JavaScript
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.
```JavaScript
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.
```JavaScript
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.
```JavaScript
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](https://www.freecodecamp.org/news/scope-and-closures-in-javascript/)

___

# 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](https://www.w3schools.com/js/js_this.asp#:~:text=What%20is%20this%3F,this%20refers%20to%20the%20object.) 


###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.
```JavaScript
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. 
```JavaScript
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. 
```JavaScript
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).
```JavaScript
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).
```JavaScript
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).
```JavaScript
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](https://www.sejuku.net/blog/29389)
[reference link3](https://www.youtube.com/watch?v=gvicrj31JOM)