{"data":{"site":{"siteMetadata":{"title":"lastrites2018","author":"lastrites2018","siteUrl":"https://lastrites2018.netlify.com","comment":{"disqusShortName":"","utterances":"lastrites2018/gatsby-first-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"d2f25b4e-0159-5ac5-bf13-7de2347f09b7","excerpt":"과  의 차이점은 무엇인가요? 을 설명하세요. 와  에서 foo 의 차이가 무엇인지 설명해보세요. ,  ,  의 차이점에 관해서 설명해주세요. 출처 :  Insanehong님 블로그 8. .call과 .apply의 차이점은 무엇인가요? Function.prototype 이 소유한 method 들이다. 이들은 함수와 메서드가 실행될 때 바인딩할 객체를 지정하여 함수가 실행될 때의 context 의 유효범위를 직접 지정하며 this…","html":"<ul>\n<li>\n<p><code class=\"language-text\">.call</code>과 <code class=\"language-text\">.apply</code>의 차이점은 무엇인가요?</p>\n</li>\n<li>\n<p><code class=\"language-text\">Function.prototype.bind</code>을 설명하세요.</p>\n</li>\n<li>\n<p><code class=\"language-text\">function foo() {}</code>와 <code class=\"language-text\">var foo = function() {}</code>에서 foo 의 차이가 무엇인지 설명해보세요.</p>\n</li>\n<li>\n<p><code class=\"language-text\">let</code>, <code class=\"language-text\">var</code>, <code class=\"language-text\">const</code>의 차이점에 관해서 설명해주세요.</p>\n</li>\n</ul>\n<hr>\n<p>출처 : <a href=\"http://insanehong.kr/post/front-end-developer-interview-javascript\">Insanehong님 블로그</a></p>\n<h2 id=\"8-call과-apply의-차이점은-무엇인가요\"><a href=\"#8-call%EA%B3%BC-apply%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94\" aria-label=\"8 call과 apply의 차이점은 무엇인가요 permalink\" class=\"anchor\"><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>8. .call과 .apply의 차이점은 무엇인가요?</h2>\n<p>Function.prototype 이 소유한 method 들이다. 이들은 함수와 메서드가 실행될 때 바인딩할 객체를 지정하여 함수가 실행될 때의 context 의 유효범위를 직접 지정하며 this 를 할당 할 수 있다.</p>\n<p>이들은 호출의 동적인 변화에 따라 각각 다르게 되는데 정적인 호출인 경우 call 을 동적인 호출에서는 apply를 사용하게 된다. 즉 호출 시 동적인 인자 전달 등이 필요할 경우 apply 를 정적으로 고정된 함수를 호출할 경우 call 사용하면 된다.</p>\n<p>bind() 메소드나 동적 callback 을 구현할 때 apply가 사용되는 이유이기도 하다.</p>\n<h2 id=\"9-functionprototypebind을-설명하세요\"><a href=\"#9-functionprototypebind%EC%9D%84-%EC%84%A4%EB%AA%85%ED%95%98%EC%84%B8%EC%9A%94\" aria-label=\"9 functionprototypebind을 설명하세요 permalink\" class=\"anchor\"><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>9. Function.prototype.bind을 설명하세요.</h2>\n<p>8번 문제에서 잠깐 다루었던 내용과 비슷하다. 함수 객체는 실행 시점에서 execution context 를 생성하며 현재의 실행 코드 범위를 뜻하는 this 를 할당하게 된다. 하지만 this 를 동적으로 할당해야 하는 경우가 있다. 특히 다양한 객체에서 동적으로 특정 액션을 할당하여 사용되는 함수의 경우 this 에 할당되는 객체를 예측하기가 힘들다.</p>\n<p>이럴 때 bind 를 이용하여 실행 시점에서 context의 this 를 임의로 할당해 주어 동적인 호출시에도 오류 없이 코드가 동작하게 할수 있다.</p>\n<h2 id=\"13-호이스팅hoisting에-대해서-설명하시오\"><a href=\"#13-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85hoisting%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C-%EC%84%A4%EB%AA%85%ED%95%98%EC%8B%9C%EC%98%A4\" aria-label=\"13 호이스팅hoisting에 대해서 설명하시오 permalink\" class=\"anchor\"><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>13. “호이스팅(Hoisting)“에 대해서 설명하시오.</h2>\n<p>호이스팅은 자바스크립트 엔진이 실행 컨텍스트를 생성하면서 scope 를 정의 할 때 기술된 순서에 상관없이 선언 부에 대한 처리를 해석 우선순위 최우선으로 끌어올려 먼저 해석하는 것을 의미한다.</p>\n<p>쉽게 말해서 코드 작성 순서에 상관없이 선언 구문을 최우선으로 해석한다는 것이다.</p>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">foo<span class=\"token operator\">=</span><span class=\"token string\">'hello'</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>foo<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">var</span> foo<span class=\"token punctuation\">;</span>\n<span class=\"token operator\">></span> hello</code></pre></div>\n<p>이때 주의해야 할 것이 하나 있는데 호이스팅은 선언에만 적용되고 할당구문에는 적용되지 않는다.</p>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>foo<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">var</span> foo<span class=\"token operator\">=</span><span class=\"token string\">'hello world'</span><span class=\"token punctuation\">;</span>\n<span class=\"token operator\">></span>undefined</code></pre></div>\n<p>이처럼 선언과 동시에 값을 할당하는 경우 호이스팅 되지 않으며 해당구문을 만나야만 해석하게 된다.</p>\n<h2 id=\"18-code-classlanguage-textcode와-code-classlanguage-textcode의-차이점은-무엇인가요\"><a href=\"#18-code-classlanguage-textcode%EC%99%80-code-classlanguage-textcode%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94\" aria-label=\"18 code classlanguage textcode와 code classlanguage textcode의 차이점은 무엇인가요 permalink\" class=\"anchor\"><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>18. <code class=\"language-text\">==</code>와 <code class=\"language-text\">===</code>의 차이점은 무엇인가요?</h2>\n<p><code class=\"language-text\">===</code>는 typeof 를 포함한다. 즉, 단순히 값이 같다는 것 외에도 데이터 타입도 같이 검사한다. javascript 에서는 아래와 같은 동작을 하게 됨으로 비교연산시 주의를 요한다.</p>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token string\">'3'</span> <span class=\"token operator\">==</span> <span class=\"token number\">3</span><span class=\"token punctuation\">)</span> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'equal'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">else</span> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'not equal'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token operator\">></span> equal<span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token string\">'3'</span> <span class=\"token operator\">===</span> <span class=\"token number\">3</span><span class=\"token punctuation\">)</span> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'equal'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">else</span> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'not equal'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token operator\">></span> not equal<span class=\"token punctuation\">;</span></code></pre></div>\n<ol start=\"7\">\n<li>다음 코드의 차이점은 무엇인가요?</li>\n</ol>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">function</span> <span class=\"token function\">Person</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token keyword\">var</span> person <span class=\"token operator\">=</span> <span class=\"token function\">Person</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n<span class=\"token keyword\">var</span> person <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Person</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span></code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">function</span> <span class=\"token function\">Person</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> <span class=\"token string\">'hello world'</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>위 코드는 함수 선언이다. 이는 함수 객체 생성을 위한 기본 그릇이 되면 prototype 이 참조할 함수객체의 환경을 담고 있다. global scope 에서는 Person 이라는 함수가 선언되었다는 것만을 저장하면 내부구현 로직은 알지 못한다.</p>\n<p><code class=\"language-text\">var person = Parson();</code> 은 함수 수행에 따른 return 을 변수에 저장한다는 의미이다. 즉 person 에는 ‘hello world’ 가 할당된다.</p>\n<p><code class=\"language-text\">var person = new Person()</code> 은 person 변수에 Person 함수 객체를 생성하여 할당한다는 의미가 된다. 이때 할당되는 객체는 Person 함수의 프로토타입을 기반으로 생성된다.</p>\n<h2 id=\"3-클로져closure는-무엇이며-어떻게왜-사용하는지-설명해주세요\"><a href=\"#3-%ED%81%B4%EB%A1%9C%EC%A0%B8closure%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B4%EB%A9%B0-%EC%96%B4%EB%96%BB%EA%B2%8C%EC%99%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%EC%A7%80-%EC%84%A4%EB%AA%85%ED%95%B4%EC%A3%BC%EC%84%B8%EC%9A%94\" aria-label=\"3 클로져closure는 무엇이며 어떻게왜 사용하는지 설명해주세요 permalink\" class=\"anchor\"><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>3. 클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요</h2>\n<p>클로져를 제대로 이해하기 위해서는 javascript 의 <code class=\"language-text\">scope</code>, <code class=\"language-text\">scope chain</code>, <code class=\"language-text\">context</code> 에 대한 이해가 선행되어야 한다.</p>\n<p>간단히 설명하자면 클로저는 현재의 유효범위를 넘어 scope chain으로 연결되어 있는 객체, 변수등의 참조를 발생시키는 것을 말한다.</p>\n<p>javascript는 실행코드 블럭 단위로 context 를 스텍에 쌓게 되고 push, pop 을 통해 코드블럭이 실행 된다. 이때 각각의 실행 코드블럭이 수행되는 시점에서 실행 환경을 저장하게 되는데 이는 실행 유효범위인 scope 에 의해 결정된다.</p>\n<p>이 scope 는 chain 구조로 연결되어 있어 현재 실행 시점 이전의 scope 를 타고 올라가는 형태로 참조 되기 때문에 현재 scope 에 선언되지 않는 객체참조가 가능하다.</p>\n<p>이는 java 등의 언어만 다루던 사람들에겐 좀 의아한 모습으로 동작한다. local 변수와 global 변수의 경계와 유효범위 설정에 대한 이해를 한번에 무너트려버리기 때문이다.</p>\n<p>javascript를 대충 공부하게 되면 <code class=\"language-text\">undefined</code> 와 <code class=\"language-text\">null</code> 의 차이를 잘 이해하지 못하는 경우도 많다.</p>\n<p>모든 것이 object로 통하는 javascript에서의 <code class=\"language-text\">null</code> 은 값이 아닌 객체 참조의 연결을 해지하는 것을 말한다. 즉 어떤 참조 값이 존재하지 않으므로 비어있는 값을 가진 변수가 되는 것이다.</p>\n<p>undefined는 선언만 되고 특정 값이 할당되지 않는 경우, javascript 엔진에 의해 자동으로 할당되는 값이다. 즉, 특별히 할당된 값이 없는 경우 일반적인 언어처럼 <code class=\"language-text\">null</code>이 아니고 <code class=\"language-text\">undefined</code> 가 할당 된다.</p>","frontmatter":{"title":"IAT interview practice","date":"August 20, 2018"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/til/20180820 IAT interview practice/","previous":{"fields":{"slug":"/til/20180820 What is node + html review/"},"frontmatter":{"title":"What is node + html review","category":"TIL"}},"next":{"fields":{"slug":"/til/20180824 콜백 함수 (코드종  강의)/"},"frontmatter":{"title":"콜백 함수 (코드종 강의)","category":"TIL"}}}}