"범위"란 무엇입니까?

범위는 변수에 액세스할 수 있는 코드의 영역입니다.
JavaScript에는 전역 범위와 지역 범위의 두 가지 유형의 범위가 있습니다. 로컬 범위는 기능 범위와 블록 범위의 두 가지 유형의 범위로 더 나눌 수 있습니다.

글로벌 범위;

전역 변수는 블록 외부에서 선언된 변수입니다{}.

로컬 범위;

지역 변수는 블록 내부에 선언된 변수입니다{}.

기능 범위

블록 범위

글로벌 범위

전역 변수는 블록 외부에서 선언된 변수입니다{}.

JavaScript에서는 모든 코드가 객체에 저장되어야 하며 계층 구조의 최상위에 있는 객체가 전역 객체입니다. 전역 범위에서 변수를 선언한다는 것은 속성이 전역 개체에 연결됨을 의미합니다. JavaScript는 웹 브라우저에서 실행되므로 window 개체가 전역 개체가 될 수 있습니다.

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

function callMyname1 (){
  console.log(a);
  console.log(b);
  console.log(c);
}
callMyname1();

'Yuki'
'Kasugai'
'Japan'

그런 다음 창 개체(= 전역 범위에서 변수 선언)에서 속성을 보려고 했지만 var 변수에만 액세스할 수 있습니다.

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

즉, var는 전역 범위가 지정되고 창 개체에 연결되는 반면, let 및 const는 전역 범위가 지정되지만 창 개체에 연결되지 않습니다.

로컬 범위

지역 변수는 블록 내부에 선언된 변수입니다{}. 기능 범위와 블록 범위의 두 가지 유형의 범위로 더 나눌 수 있습니다.

기능 범위

다음 코드에서 var let const 및 각각 console.log 3개의 변수는 블록 {} 내부에 선언됩니다. 3개의 변수에 액세스할 수 있습니다.

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

'Yuki'
'Kasugai'
'Japan'

블록 범위

다음 코드에서 3개의 변수 var let const는 블록{} 내부에 있는 중괄호{}에 선언되어 있고 각 변수console.log는 블록 내부에 있는 중괄호 외부에 있습니다. 블록{} . 그러면 var 변수에만 액세스할 수 있습니다.

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

'Yuki'

즉, var 변수는 함수 범위이고 let 및 const 변수는 블록 범위입니다.
블록console.log(j) 외부(=함수 외부)에 쓰기{}를 시도했지만 확실하게 액세스할 수 없습니다.

function callMyname5 (){
  if(true){
    var j = 'Yuki';
    let k = 'Kasugai';
    const l = 'Japan';
  }
}
console.log(j);
callMyname5();

ReferenceError: j is not defined

나는 그 주제들을 표로 요약했다.


예어
범위
게양
재할당 가능
재선언 가능


바르
전역 범위 및 기능 범위
예
예
예

허락하다
전역 범위 및 블록 범위
아니
예
아니

const
전역 범위 및 블록 범위
아니
아니
아니


reference link1

"이" 키워드는 무엇입니까?

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

홀로

전역 수준에서 키워드 'this'는 전역 창 개체를 나타냅니다.
먼저 다음 코드에서 전역 범위에 console.log(this)를 작성하고 결과는 창 개체를 참조합니다.

console.log(this);

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

함수에서

다음으로 함수에 console.log(this)를 작성하면 결과도 창 개체를 참조합니다.

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

test();

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

개체에서

또한 객체(myObject1)의 속성(이름)에 this를 할당하고 그 결과도 윈도우 객체를 참조합니다.

var myObject1 = {
  name: this,
}

console.log(myObject1.name);

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

방법에서

마지막으로 객체(myObject2)의 메소드(myFunc)에 console.log(this)를 씁니다. 그런 다음 결과는 함수(myObject2)를 참조합니다.

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

myObject2.myFunc();

{name: Window, myFunc: ƒ}

나중에 메서드(age)를 추가해도 결과는 함수(myObject2)를 참조합니다.

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

myObject2.age = function(){
  console.log(this);
}
myObject2.age();

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

new 연산자를 사용하는 생성자 함수에서

또한 new 연산자를 사용하여 생성자 함수를 사용하면 결과는 첫 번째 함수(myFirstObject)를 참조한다는 점을 기억해야 합니다. 이는 생성자 함수의 this가 첫 번째 함수(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