<div id="readability-page-1" class="page"><div>자바스크립트의 핵심매커니즘인 Scope를 알아본다.
<blockquote>
현재 실행중인 컨텍스트로, 변수가 저장되는 논리적인 공간
</blockquote>
<code>Scope</code>는 <code>범위</code>라는 사전적인 뜻을 갖고있는 단어다. 
자바스크립트에서 Scope는 <code>변수의 유효범위</code>를 의미하며 다양한 문장으로 정의된다.
<ul>
<li>변수가 생성되는 공간</li>
<li>변수의 유효범위</li>
<li>현재 실행중인 컨텍스트</li>
</ul>
<hr>
<h2 id="종류">종류</h2>
스코프의 종류에대해 정리해본다.
<h2 id="전역스코프">전역스코프</h2>
애플리케이션이 실행되는 즉시 만들어지는 공간이다. 
모든곳에서 접근이 가능하다.
어디서 어떻게 수정되어 더렵혀질지 모르니 전역스코프에 값을 변수를 등록/저장하는 것을 지양하자. 
<code>const</code> 키워드를 이용해서 값의 수정이 불가능하도록 만든다면 사용해도 상관은 없다.
<pre><code>// 전역스코프 생성
var a = 0; // 전역스코프에 저장</code></pre>
<h2 id="지역스코프">지역스코프</h2>
영역을 갖는 스코프들이다.
<h3 id="함수스코프">함수스코프</h3>
함수에 의해서 생성되는 스코프로, 함수가 실행될 때 생성된다. 
함수영역을 기준으로 한다.
<pre><code>function fn() {
 var a = 2; // fn 함수스코프에 저장
}

fn2() // fn 함수스코프 생성</code></pre>
<h3 id="블록스코프">블록스코프</h3>
<code>{}</code>안의 영역을 "블록"이라고 부르는데, 블록영역을 기준으로 하는 스코프다. 
블록안의 코드가 실행될 때 생성이 된다.
블록안에서 <code>let/const</code> 키워드로 선언된 변수들이 블록스코프안에 생성된다. 
ES6 문법을 지원하는 환경에서만 사용이 가능하다.
<pre><code>{
 // 블록스코프 생성
 let a = 10; // 블록스코프에 저장
 const b = 20; // 블록스코프에 저장
 var c = 30; // 전역스코프에 저장
}</code></pre>
<hr>
<h2 id="특징">특징</h2>
스코프에는 몇가지 특징이 있다. 
<h2 id="스코프의-정의와-생성삭제">스코프의 정의와 생성/삭제</h2>
자바스크립트의 스코프는 정의되는 시점과 생성되는 시점이 다르다.
<blockquote>
함수스코프는 함수가 선언될 때 정의된다. 
함수스코프는 함수가 호출(실행)될 때 생성된다. 
함수스코프는 코드의 실행이 끝났을 때 사라진다.
</blockquote>
<pre><code>var x = 10

function fn1() {
 var x = 20;
 fn2();
}

function fn2() {
 console.log(x);
}

fn1(); // 10</code></pre>
<code>fn2</code>의 부모스코프는 <code>f1</code>의 스코프일 것 같은데, 왜 전역스코프의 10이 찍히는 걸까? 
이유는 <code>fn2</code>의 스코프는 <code>fn2</code>가 선언되는 시점에 정의되기 때문이다.
<code>fn2</code>함수가 전역공간에 정의(선언)가 되어있기 때문에, 전역스코프가 부모스코프가 된다.
이렇게 선언과정에서 정의되는 스코프를 <code>렉시컬 스코프</code>라고 부른다. 
반대로 실행되면서 정의되는 스코프를 <code>동적 스코프</code>라고 부른다.
<h2 id="스코프의-중첩-체이닝">스코프의 중첩, 체이닝</h2>
스코프는 중첩이 가능하다. (스코프의 중첩) 
자식스코프는 부모스코프에 접근이 가능하고, 그 역은 불가능하다.
참조하고자하는 변수가 자신의 스코프에 존재하지 않을때, 부모스코프로 올라가 변수의 값을 찾는다. (스코프 체이닝)
<pre><code>var a = 1;

function fn() {
 var b = 2;

 {
 const c = 3;
 console.log(a); // 1
 console.log(b); // 2
 console.log(c); // 3
 }

 console.log(a) // 1
 console.log(b) // 2
 // console.log(c) // ReferenceError: c is not defined
}

fn();


console.log(a); // 1
// console.log(b); // ReferenceError: b is not defined
// console.log(c); // ReferenceError: c is not defined
</code></pre>
<hr>
<h2 id="참고">참고</h2>
<a href="https://developer.mozilla.org/ko/docs/Glossary/Scope">https://developer.mozilla.org/ko/docs/Glossary/Scope</a> 
<a href="https://poiemaweb.com/js-scope">https://poiemaweb.com/js-scope</a></div></div>

ginameee.log

Jangchun Lee

자바스크립트의 핵심매커니즘인 Scope를 알아본다.
현재 실행중인 컨텍스트로, 변수가 저장되는 논리적인 공간
Scope는 범위라는 사전적인 뜻을 갖고있는 단어다.
자바스크립트에서 Scope는 변수의 유효범위를 의미하며 다양한 문장으로 정의된다.
변수가 생성되는 공간
변수의 유효범위
현재 실행중인 컨텍스트
종류
스코프의 종류에대해 정리해본다.
전역스코프
애플리케이션이 실행되는 즉시 만들어지는 공간이다.
모든곳에서 접근이 가능하다.
어디서 어떻게 수정되어 더렵혀질지 모르니 전역스코프에 값을 변수를 등록/저장하는 것을 지양하자. 
const 키워드를 이용해서 값의 수정이 불가능하도록 만든다면 사용해도 상관은 없다.
// 전역스코프 생성
var a = 0; // 전역스코프에 저장
지역스코프
영역을 갖는 스코프들이다.
함수스코프
함수에 의해서 생성되는 스코프로, 함수가 실행될 때 생성된다.
함수영역을 기준으로 한다.
function fn() {
  var a = 2; // fn 함수스코프에 저장
}
fn2() // fn 함수스코프 생성
블록스코프
{}안의 영역을 "블록"이라고 부르는데, 블록영역을 기준으로 하는 스코프다.
블록안의 코드가 실행될 때 생성이 된다.
블록안에서 let/const 키워드로 선언된 변수들이 블록스코프안에 생성된다.
ES6 문법을 지원하는 환경에서만 사용이 가능하다.
{
  // 블록스코프 생성
  let a = 10; // 블록스코프에 저장
  const b = 20; // 블록스코프에 저장
  var c = 30; // 전역스코프에 저장
}
특징
스코프에는 몇가지 특징이 있다. 
스코프의 정의와 생성/삭제
자바스크립트의 스코프는 정의되는 시점과 생성되는 시점이 다르다.
함수스코프는 함수가 선언될 때 정의된다.
함수스코프는 함수가 호출(실행)될 때 생성된다.
함수스코프는 코드의 실행이 끝났을 때 사라진다.
var x = 10
function fn1() {
  var x = 20;
  fn2();
}
function fn2() {
  console.log(x);
}
fn1(); // 10
fn2의 부모스코프는 f1의 스코프일 것 같은데, 왜 전역스코프의 10이 찍히는 걸까?
이유는 fn2의 스코프는 fn2가 선언되는 시점에 정의되기 때문이다.
fn2함수가 전역공간에 정의(선언)가 되어있기 때문에, 전역스코프가 부모스코프가 된다.
이렇게 선언과정에서 정의되는 스코프를 렉시컬 스코프라고 부른다.
반대로 실행되면서 정의되는 스코프를 동적 스코프라고 부른다.
스코프의 중첩, 체이닝
스코프는 중첩이 가능하다. (스코프의 중첩)
자식스코프는 부모스코프에 접근이 가능하고, 그 역은 불가능하다.
참조하고자하는 변수가 자신의 스코프에 존재하지 않을때, 부모스코프로 올라가 변수의 값을 찾는다. (스코프 체이닝)
var a = 1;
function fn() {
  var b = 2;
  {
    const c = 3;
    console.log(a); // 1
    console.log(b); // 2
    console.log(c); // 3
  }
  console.log(a) // 1
  console.log(b) // 2
  // console.log(c) // ReferenceError: c is not defined
}
fn();
console.log(a); // 1
// console.log(b); // ReferenceError: b is not defined
// console.log(c); // ReferenceError: c is not defined
참고
https://developer.mozilla.org/ko/docs/Glossary/Scope
https://poiemaweb.com/js-scope

Scope

댓글