{"data":{"site":{"siteMetadata":{"title":"lastrites2018","author":"lastrites2018","siteUrl":"https://lastrites2018.netlify.com","comment":{"disqusShortName":"","utterances":"lastrites2018/gatsby-first-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"3a55660d-155d-59b0-84ff-49daaa7c3c38","excerpt":"","html":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">기존 자바스크립트 클로저 스코프 설명은 너무 상세하게 설명하기 때문에 오히려 초심자에겐 힘들다<span class=\"token punctuation\">.</span> 간단한 설명 <span class=\"token punctuation\">:</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">outer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">var</span> a <span class=\"token operator\">=</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n    console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>a<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token comment\">// a가 어떤 값인지 찾는 것이 scope</span>\n\n    <span class=\"token keyword\">function</span> <span class=\"token function\">inner</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">var</span> a <span class=\"token operator\">=</span> <span class=\"token number\">2</span><span class=\"token punctuation\">;</span>\n        console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>a<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n    <span class=\"token function\">inner</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token function\">outer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token comment\">// 표가 생기는데, 표가 scope!</span>\n<span class=\"token comment\">// 자바스크립트는 함수단위로 scope가 생성.</span>\n\n<span class=\"token keyword\">var</span> d <span class=\"token operator\">=</span> <span class=\"token string\">'X'</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// global scope</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">outer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">var</span> a <span class=\"token operator\">=</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">var</span> b <span class=\"token operator\">=</span> <span class=\"token string\">'B'</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token keyword\">function</span> <span class=\"token function\">inner</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">var</span> a <span class=\"token operator\">=</span> <span class=\"token number\">2</span><span class=\"token punctuation\">;</span>\n        console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>a<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>b<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// B</span>\n        <span class=\"token comment\">// 여기서 a를 찾는 것이 scope</span>\n    <span class=\"token punctuation\">}</span>\n    <span class=\"token keyword\">return</span> inner<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token keyword\">var</span> someFun <span class=\"token operator\">=</span> <span class=\"token function\">outer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token function\">someFun</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token operator\">-</span><span class=\"token operator\">></span>\nouter가 실행된 다음에도 outer 내부의 변수 b에 접근 가능해\n<span class=\"token constant\">B</span>가 찍힘<span class=\"token punctuation\">.</span>\n\n<span class=\"token comment\">// 뭔가 찾을때 들여다 보는 표가 scope.</span>\n<span class=\"token comment\">// inner의 표에서 scope를 찍음.</span>\n<span class=\"token comment\">// console.log(b);에서 inner에서 b가 없기 때문에, 다음에 찾는 표는 outer(); 왜냐하면 inner가 생성된 곳이 outer 범위 안에 있기 때문에.</span></code></pre></div>","frontmatter":{"title":"closure & scope chain(코드종 강의)","date":"August 26, 2018"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/til/20180826 closure & scope chain(코드종 강의)/","previous":{"fields":{"slug":"/til/20180826 poiemaweb.com 공부 시작 - 자료형과 변수/"},"frontmatter":{"title":"poiemaweb.com 공부 시작 - 자료형과 변수","category":"TIL"}},"next":{"fields":{"slug":"/til/20180827 자바스크립트의 나쁜 점들/"},"frontmatter":{"title":"자바스크립트의 나쁜 점들","category":"development"}}}}