<div id="readability-page-1" class="page"><div><h2 id="table-of-contents">Table of Contents</h2>
<ul>
<li><a href="#%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%ED%95%A8%EC%88%98%EB%8A%94-%EC%9D%BC%EA%B8%89-%EA%B0%9D%EC%B2%B4%EB%8B%A4">자바스크립트의 함수는 일급 객체다</a></li>
<li><a href="#%ED%95%A8%EC%88%98%EB%A5%BC-%EC%84%A0%EC%96%B8%ED%95%98%EB%8A%94-6%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95">함수를 선언하는 6가지 방법</a>
<ul>
<li><a href="#1-named-function-declaration-%EB%AA%85%EB%AA%85-%ED%95%A8%EC%88%98-%EC%84%A0%EC%96%B8">1. named function declaration (명명 함수 선언)</a></li>
<li><a href="#2-anonymous-function-expression-%EC%9D%B5%EB%AA%85-%ED%95%A8%EC%88%98-%ED%91%9C%ED%98%84">2. anonymous function expression (익명 함수 표현)</a></li>
<li><a href="#3-named-function-expression-%EB%AA%85%EB%AA%85-%ED%95%A8%EC%88%98-%ED%91%9C%ED%98%84">3. named function expression (명명 함수 표현)</a></li>
<li><a href="#4-immediately-invoked-expression-%EC%A6%89%EC%8B%9C-%EC%8B%A4%ED%96%89-%ED%91%9C%ED%98%84">4. Immediately-invoked expression (즉시 실행 표현)</a></li>
<li><a href="#5-function-constructor">5. function constructor</a></li>
<li><a href="#6-arrow-function-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98">6. arrow function (화살표 함수)</a>
<ul>
<li><a href="#%EB%A6%AC%ED%84%B4">리턴</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#this">this</a></li>
</ul>
<h2 id="자바스크립트의-함수는-일급-객체다">자바스크립트의 함수는 일급 객체다</h2>
일급객체의 정의는 다음과 같다.
<ol>
<li>모든 요소는 함수의 실제 매개변수가 될 수 있다.</li>
<li>모든 요소는 함수의 반환 값이 될 수 있다.</li>
<li>모든 요소는 할당 명령문의 대상이 될 수 있다.</li>
<li>모든 요소는 동일 비교의 대상이 될 수 있다.</li>
</ol>
자바스크립트에서 함수는, 다음 모두를 충족 시키므로 일급 객체라고 볼 수 있다.
<h2 id="함수를-선언하는-6가지-방법">함수를 선언하는 6가지 방법</h2>
<h3 id="1-named-function-declaration-명명-함수-선언">1. named function declaration (명명 함수 선언)</h3>
<pre><code>function hello() {
 // ...
}
</code></pre>
가장 대중적인 방법이다. 함수의 이름이 <code>hello</code>가 된다. 이미 여러차례 싸질러 놨듯, 호이스팅 되기 때문에 이 함수는 어느 스코프에서든 호출 할 수 있는 함수가 된다.
<h3 id="2-anonymous-function-expression-익명-함수-표현">2. anonymous function expression (익명 함수 표현)</h3>
<pre><code>var hello = function () {
 //...
}
</code></pre>
이름이 없는 함수를 변수에 담은 방식이다. 이름이 없는 함수긴 한데, 자바스크립트 엔진이 이름을 변수명으로 추정하여 넣는다.
<pre><code>var hello = function () {
 //...
}

hello.name

// &gt; "hello"
hello

// &gt; ƒ () {
// //...
// }
</code></pre>
변수 할당은 호이스팅 되지 않으므로, 할당 된 이후에만 실행 가능하다.
<h3 id="3-named-function-expression-명명-함수-표현">3. named function expression (명명 함수 표현)</h3>
<pre><code>var hello = function originalName() {
 // ...
}
</code></pre>
2와 거의 동일하다. 다른 점은 함수 이름이 명확하게 선언되어 있으므로 JS 엔진에 의해 추론되지 않는 다는 것이다.
<h3 id="4-immediately-invoked-expression-즉시-실행-표현">4. Immediately-invoked expression (즉시 실행 표현)</h3>
<pre><code>var hello = (function () {
 //...
})()
</code></pre>
즉시 실행 함수로, 클로져를 활용할 수 있다. 내부 함수는 변수나 다른 함수등을 쓸 수 있지만,이 함수 밖에서는 완전히 캡슐화되어 접근 할 수 없다. 가장 흔해 빠진 예제 중 하나로는 카운터가 있다.
<pre><code>var myCounter = (function (initialValue = 0) {
 let count = initialValue
 return function () {
 count++
 return count
 }
})(1)

myCounter() // 2
myCounter() // 3
myCounter() // 4
</code></pre>
외부 함수에서 넘겨준 1을 가지고, 내부에서 처리를 하여 리턴하고 있다.
<h3 id="5-function-constructor">5. function constructor</h3>
<pre><code>var hello = new Function()
</code></pre>
아마도 이런식으로 함수를 쓸일은 거의 없을 것이다.
<pre><code>const adder = new Function('a', 'b', 'return a + b')
adder(2, 6)
// 8
</code></pre>
이는 <code>eval()</code>을 사용하는 것과 같기 때문에 굉장히 위험하다. 그리고 이 생성자는 전역 범위로 한정된 함수만 생성할 수 있다.
<h3 id="6-arrow-function-화살표-함수">6. arrow function (화살표 함수)</h3>
<pre><code>var hello = () =&gt; {
 //...
}
</code></pre>
그리고 요즘들어 많이 쓰이고 있는 화살표 함수다. 몇가지 다른게 있다면
<ul>
<li><code>constructor</code>로 쓰일 수 없다.</li>
<li><code>prototype</code>을 가지고 있지 않는다.</li>
<li><code>yield</code> 키워드를 허용하지 않으므로 generator를 쓸 수 없다.</li>
<li><code>this</code>도 다르다.</li>
</ul>
<h4 id="리턴">리턴</h4>
<pre><code>const f1 = (x, y, z) =&gt; x + y + z

const f2 = (x, y, z) =&gt; {
 return x + y + z
}
</code></pre>
위 <code>f1</code> <code>f2</code>는 값이 같다. object를 바로 리턴하려면 괄호를 씌우면 된다.
<pre><code>const f3 = (x, y, z) =&gt; ({x, y, z})
</code></pre>
<h2 id="this">this</h2>
근데 이 얘기는 내가 너무 많이 떠든거 같다. <a href="https://yceffort.kr/2020/05/difference-between-function-and-arrow#1-this%EC%99%80-arguments%EC%9D%98-%EC%B0%A8%EC%9D%B4">https://yceffort.kr/2020/05/difference-between-function-and-arrow#1-this%EC%99%80-arguments%EC%9D%98-%EC%B0%A8%EC%9D%B4</a></div></div>

yceffort

거의 모든 것이라고 했지만 사실 그렇진 않음 어그로임

자바스크립트 함수를 선언하는 여섯가지 방법

댓글