{"componentChunkName":"component---src-templates-blog-post-js","path":"/JavaScript/Function_Scope_Block_Scope_and_Lexical_Scope/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"de2f7c8b-a020-5de1-b14f-d9fbe4dc6e60","excerpt":"스코프 (scope) - 범위, 영역 네이버 사전 - 어느 범위까지 참조하는지. 즉, 변수와 매개변수(parameter)의 접근성과 생존기간을 뜻합니다.  - 스코프는 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다. poiemaWeb - 자바스크립트에서 스코프란 어떤 변수들에 접근할 수 있는지를 정의합니다. Quiz) 스코프의 구분 전역 스코프 (Global scope…","html":"<h2 id=\"스코프-scope\" style=\"position:relative;\"><a href=\"#%EC%8A%A4%EC%BD%94%ED%94%84-scope\" aria-label=\"스코프 scope permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>스코프 (scope)</h2>\n<p>- <strong>범위, 영역</strong> [네이버 사전]</p>\n<p>- 어느 범위까지 <strong>참조</strong>하는지. 즉, 변수와 매개변수(parameter)의 <strong>접근성과 생존기간</strong>을 뜻합니다. </p>\n<p>- 스코프는 <strong>참조 대상 식별자</strong>(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다. [poiemaWeb]</p>\n<p>- 자바스크립트에서 스코프란 어떤 변수들에 <strong>접근</strong>할 수 있는지를 정의합니다.</p>\n<p>Quiz)</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">if</span><span class=\"token punctuation\">(</span><span class=\"token boolean\">true</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">let</span> i <span class=\"token operator\">=</span> <span class=\"token number\">10</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>i<span class=\"token punctuation\">)</span> <span class=\"token operator\">??</span></code></pre></div>\n<h2 id=\"스코프의-구분\" style=\"position:relative;\"><a href=\"#%EC%8A%A4%EC%BD%94%ED%94%84%EC%9D%98-%EA%B5%AC%EB%B6%84\" aria-label=\"스코프의 구분 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>스코프의 구분</h2>\n<blockquote>\n<p>전역 스코프 (Global scope)</p>\n</blockquote>\n<p>코드 어디에서든지 참조할 수 있다.</p>\n<blockquote>\n<p>지역 스코프 (Local scope or Function-level scope)</p>\n</blockquote>\n<p>함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있다. 함수 내에서 선언된 매개변수와 변수는 함수 외부에서는 유효하지 않다</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> x <span class=\"token operator\">=</span> <span class=\"token string\">'global'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">function</span> <span class=\"token function\">ex</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">var</span> x <span class=\"token operator\">=</span> <span class=\"token string\">'local'</span><span class=\"token punctuation\">;</span>\n  x <span class=\"token operator\">=</span> <span class=\"token string\">'change'</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token function\">ex</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> \n<span class=\"token function\">alert</span><span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> </code></pre></div>\n<blockquote>\n<p>block-level scope</p>\n</blockquote>\n<p>let과 const로 선언한 변수는 블록이 만든 스코프로 자신과 하위 블록에서만 참조하게 된다.</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript \"><pre class=\"language-javascript \"><code class=\"language-javascript \">function foo() {\n  for(let i = 1; i &lt; 10; i++) {\n    console.log(i) // 1 ~ 10\n  }\n  console.log(i) // i is not defined\n}\n\nfoo();</code></pre></div>\n<h2 id=\"lexical-scoping-어휘적-범위--정적-범위\" style=\"position:relative;\"><a href=\"#lexical-scoping-%EC%96%B4%ED%9C%98%EC%A0%81-%EB%B2%94%EC%9C%84--%EC%A0%95%EC%A0%81-%EB%B2%94%EC%9C%84\" aria-label=\"lexical scoping 어휘적 범위  정적 범위 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>lexical scoping (어휘적 범위 => 정적 범위)</h2>\n<p>스코프는 함수를 <strong>호출</strong> 할때가 아니라 <strong>선언할</strong> 때 생긴다</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> name <span class=\"token operator\">=</span> <span class=\"token string\">'zero'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">function</span> <span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>name<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">wrapper</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  name <span class=\"token operator\">=</span> <span class=\"token string\">'nero'</span><span class=\"token punctuation\">;</span>\n  <span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token function\">wrapper</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> name <span class=\"token operator\">=</span> <span class=\"token string\">'zero'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">function</span> <span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>name<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">wrapper</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">var</span> name <span class=\"token operator\">=</span> <span class=\"token string\">'nero'</span><span class=\"token punctuation\">;</span>\n  <span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token function\">wrapper</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>","frontmatter":{"title":"Function Scope, Block Scope and Lexical Scope","date":"September 16, 2019"}}},"pageContext":{"slug":"/JavaScript/Function_Scope_Block_Scope_and_Lexical_Scope/","previous":{"fields":{"slug":"/JavaScript/Coercion_in_Javascript/"},"frontmatter":{"title":"Coercion In Javascript","category":"JavaScript","draft":false}},"next":{"fields":{"slug":"/JavaScript/Asynchronous_&_RequestAnimationFrame/"},"frontmatter":{"title":"Asynchronous & RequestAnimationFrame","category":"JavaScript","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}