<div id="readability-page-1" class="page"><div><div><h2 id="ffb9">함수</h2><div><a href="https://blog.jeongwoo.in/?source=post_page-----103e10334e6b--------------------------------" rel="noopener ugc nofollow"><div aria-hidden="false"><img alt="Jeong Woo Ahn" src="https://miro.medium.com/v2/resize:fill:88:88/2*5-DkBQYvxo0TLldXjX88Og.png" width="44" height="44" loading="lazy" data-testid="authorPhoto"></div></a></div></div>책 <a href="https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=122260559" rel="noopener ugc nofollow" target="_blank">모던 자바스크립트</a>의 스터디 3장 준비하면서 정리한 두번 째 글을 공유한다.<ul><li id="e783">1장 정리글 — <a href="https://blog.jeongwoo.in/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%ED%84%B0%EB%94%94-1%EC%9E%A5-40a98d6d9b0d" rel="noopener ugc nofollow" target="_blank">모던 자바스크립트 1장 — 블록바인딩</a></li><li id="dcd3">2장 정리글 — <a href="https://medium.com/@jeongwooahn/%EB%AA%A8%EB%8D%98%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%ED%84%B0%EB%94%94-2%EC%9E%A5-6e32c2756dfb" rel="noopener">모던 자바스크립트 2장 — 문자열과 정규표현식</a></li><li id="7608">3장(1) 정리글 — <a href="https://blog.jeongwoo.in/%EB%AA%A8%EB%8D%98%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%ED%84%B0%EB%94%94-3%EC%9E%A5-1174b71cdb3d" rel="noopener ugc nofollow" target="_blank">모던자바스크립트 스터디 3장(1) — 함수</a></li></ul><h2 id="d418">3.7 블록 레벨 함수</h2>ECMAScript5 strict 모드는 블록 내부에서 함수 선언(블록 레벨 함수)을 할 때마다 에러를 발생시킨다.<pre>"use strict" if (true) { // ES5에서는 문법 에러가 발생, ES6에서는 발생하지 않음 function doSomething(){ // 비어있음 } }</pre>반면 ES6 에서는 doSomething() 함수를 <code>블록 레벨 선언</code>으로 간주하여, 정의한 것과 같은 블록 내에서 접근할 수 있고 호출할 수있다.<blockquote><code>블록 레벨 선언</code>은 주어진 스코프 밖에서는 접근할 수 없는 바인딩을 선언하는 것이다. — via 3p 1.2 블록-레벨선언</blockquote><pre>"use strict" if (true) { console.log(typeof doSomething); // function function doSomething(){ // 비어있음 } doSomething(); } console.log(typeof doSomething); // undefined</pre>그런데 doSomething는 정의된 블록의 최상단으로 호이스팅된다!! 그래서 함수 선언 이전에 typeof doSomething을 실행해도 “function”이 반환된다. if 블록 이후에서는 더 이상 존재하지 않는다.<h2 id="3793">3.7.1 블록 레벨 함수의 사용 시기</h2>블록 레벨 함수는 블록 레벨 선언으로 간주되므로 함수가 정의된 블록을 벗어나면 제거된다는 점에서 let 함수 표현식과 유사하다. 차이점은 블록 레벨 함수는 정의된 블록 최상단으로 호이스팅 된다는 것이다.<pre>"use strict" if (true) { console.log(typeof doSomething); // 에러 발생 let doSomething = function(){ // 비어있음 } doSomething(); } console.log(typeof doSomething); // 위 에러때문에 실행되지 않음</pre>첫 typeof doSomething 이 실행될때 TDZ 안에 doSomething() 이 있으므로 코드 실행이 멈춘다.<h2 id="84d7">3.7.2 Non-Strict 모드의 블록 레벨 함수</h2>ES6 non-strict 모드에서는 블록 레벨 함수 선언이 (블록의 상단이 아니라) 둘러싼 함수나 전역 환경의 최상단까지 호이스팅 한다.<pre>// ES6 non-strict if (true) { console.log(typeof doSomething); // function function doSomething (){ // 비어있음 } doSomething(); } console.log(typeof doSomething); // function</pre>var 변수 선언과 마찬가지로 최상단(전역 스코프)으로 호이스팅된다. 왜? ES6 이전에 만들어진 var와 함수선언식은 함수와 글로벌 단 두가지 스코프만이 존재.<h2 id="2b63">3.8 화살표 함수</h2>기존 함수와 다른점<ul><li id="2de0">this, super, arguments, <a href="http://new.target/" rel="noopener ugc nofollow" target="_blank">new.target</a> 의 값은 그 화살표 함수를 가장 근접하게 둘러싸고 있는 함수에 의해 정의된다.</li><li id="1fca">new를 사용할 수 없음 == 생성자로 사용될 수 없음.</li><li id="f4af">프로토타입이 없음.</li><li id="3eda">this를 변경할 수 없음.</li><li id="8853">arguments 객체 없음.</li><li id="6b53">같은 이름의 매개변수를 중복하여 사용할 수 없음.</li></ul><h2 id="f474">3.8.1 화살표 함수 문법</h2><pre>// 인자가 하나면 간단히 작성가능 let reflect = value =&gt; value;// 사실상 같은 코드let reflect = function(value){ return value; }// 인자가 두 개 이상이면 let sum = (num1, num2) =&gt; num1 + num2;// 인자가 없다면 반드시 빈 괄호를 사용해야만 한다 let getName = () =&gt; "Nucholas";// 객체 리터럴을 반환하는 경우 괄호로 감싸야 한다. let getTempItem = id =&gt; ({ id: id, name: "Temp"});// 한 줄 이상의 표현식은 중괄호를 써야 한다. let sum2 = (num1, num2) =&gt; { return num1 + num2; }// 아무것도 하지 않는 함수도 역시 중괄호를 써야 한다. let sum3 = () =&gt; {}</pre>3.8.2 즉시 실행 함수 표현식 만들기<pre>let box = function(padding) { let width = 0; return { getBoxWidth: function(){ return padding + width + padding; }, setObjectWidth: function(w){ width = w * 10; } } }(10);box.setObjectWidth(10); console.log(box.getBoxWidth()); // 120</pre>화살표 함수로 즉시 실행 함수 만들려면<pre>let box = ((padding) =&gt; { // 내용 같음 })(10)</pre>함수 정의 부분을 괄호로 한번 감싸야 한다.<h2 id="2dd4">3.8.3 No this 바인딩</h2>같은 함수에서도 this 값은 호출되는 맥락에 따라 변경될 수 있기 때문에 가장 흔하게 에러가 발생하는 부분이다.<pre>let PageHandler = { id: "123456", init: function(){ document.addEventListener("click", function(event){ this.doSomething(event.type); // 에러 발생 }, false) }, doSomething: function(type){ console.log(`Handling ${type} for ${this.id}`); } }</pre>(addEventListener의 세번째 파라미터에 대해 더 알고 싶다면, <a href="https://velog.io/@proshy/JS%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%A0%84%ED%8C%8C-%EC%BA%A1%EC%B3%90%EB%A7%81-%EB%B2%84%EB%B8%94%EB%A7%81" rel="noopener ugc nofollow" target="_blank">클릭</a>)addEventListener에 등록된 <code>listener</code> 의 this.doSomething의 this는 PageHandler 가 바인딩 되는 대신 이벤트의 대상이 되는 객체를 참조하기 때문에 동작을 예상하기 힘들다.<pre>let PageHandler = { id: "123456", init: function(){ document.addEventListener("click", (function(event){ this.doSomething(event.type); // 에러 발생하지 않음 }).bind(this), false) }, doSomething: function(type){ console.log(`Handling ${type} for ${this.id}`); } }</pre>잘 동작하지만 어색하다. 더 나은 방법은 화살표 함수를 사용하는 것이다.<pre>let PageHandler = { id: "123456", init: function(){ document.addEventListener("click", (event) =&gt; { this.doSomething(event.type); // 에러 발생하지 않음 }, false) }, doSomething: function(type){ console.log(`Handling ${type} for ${this.id}`); } }</pre>화살표 함수는 자채 실행 문맥을 가지지 않기 때문에 외부 함수의 this를 상속 받는다.만약 화살표 함수가 최상단 스코프에 정의 되었다면, 여기서의 문맥은 항상 전역 객체다.화살표 함수의 문맥은 바뀔 수 없다. 문맥을 수정하는 메소드를 사용하더라도 절대 바뀌지 않는다.<h2 id="a445">3.8.4 화살표 함수와 배열</h2><pre>let result = values.sort(function(a, b){ return a - b; });// 좀 더 간결해진다. let result2 = values.sort((a, b) =&gt; a - 1);</pre><h2 id="1bf7">3.8.5 No arguments 바인딩</h2>화살표 함수는 arguments 객체를 가지고 있지 않지만, 둘러싼 함수의 arguments 객체에 접근할 수 있다.<pre>function wrapper() { return () =&gt; arguments[0] } let arrowFunc = wrapper(5); console.log(arrowFunc()); // 5</pre><h2 id="1f4c">3.8.6 화살표 함수 식별하기</h2><pre>// 화살표 함수도 함수이다. let comparator = (a, b) =&gt; a - b; console.log(typeof comparator); // function console.log(comparator instanceof Function); // true// call, apply, bind 사용은 가능 console.log(comparator.call(null, 1, 2)); // -1 console.log(comparator.apply(null, [1, 3])); // -2 let comparator2 = comparator.bind(null); console.log(comparator2(1, 4)) // -3</pre><h2 id="bfa9">3.9 꼬리 호출 최적화</h2>꼬리 호출은 함수가 다른 함수의 마지막에 호출될 때를 말한다.<pre>function doSomething(){ return doSomethingElse(); // 꼬리 호출 }</pre>함수 호출을 나타내기 위해 호출 스택에 새로운 스택 프레임을 만들고 추가한다.GPT의 쉬운 비유<blockquote>당신이 집 안의 한 방에서 다른 방으로 이사한다고 상상해 보십시오. ES5에서는 새 방으로 이동할 때마다(함수 호출) 방문한 각 방에 발자국(스택 프레임)이 남습니다. 단지 방을 통과해서 최종 목적지(테일 콜)에 도달했다고 해도 각 방에는 발자국이 남을 것입니다.</blockquote><h2 id="26ea">3.9.1 ES6 꼬리 호출의 차이점</h2>ES6의 strict 모드에서 다음 조건을 만족하면 새로운 스택 프레임을 만드는 대신 현재 스택 프레임을 지우고 재사용한다.<ul><li id="126f">꼬리 호출이 현재 스택 프레임의 변수에 접근하지 않음</li><li id="f0f8">꼬리 호출을 만드는 함수가 꼬리 호출 반환 후 남은 작업이 없음</li><li id="5230">꼬리 호출의 결과가 함수의 값으로서 반환됨</li></ul><pre>"use strict";// 최적화 안됨 - 반환 값 없음 function doSomething(){ doSomethingElse(); }// 최적화 안됨 - 반환 후 추가 작업 있음 function doSomething(){ return 1 + doSomethingElse(); }// 최적화 안됨 - 마지막 위치가 아닌 곳에서 호출 function doSomething(){ let result = doSomethingElse(); return result; }// 최적화 안됨 - 클로저를 사용하는 경우 function doSomething(){ var num = 1, func = () =&gt; num; return func(); }</pre><h2 id="1f68">3.9.2 꼬리 호출 최적화를 이용하는 방법</h2>최적화는 내부적으로 동작하므로 대부분 고민할 필요가 없다. 꼬리호출 최적화는 주로 크게 영향을 미치는 재귀 함수에 사용한다.<pre>function factorial(n) { if(n &lt;= 1) { return 1; } else { // 최적화되지 않음 - 반환 후 곱셈을 해야 함. return n * factorial(n-1); } }console.log(factorial(3)) // 3 * 2 * 1 = 6</pre>만약 n이 매우 크면 호출 스택 크기는 늘어날 것이고 스택 오버 플로를 발생시킬 수도 있다.최적화를 위해 마지막 함수 호출 . 후곱셈을 하지 않아야 한다.<pre>function factorial(n, p = 1) { if(n &lt;= 1) { return 1 * p; } else { let result = n * p; return factorial(n-1, result); } }console.log(factorial(3)) // 6</pre>p는 이전 곱셈 결과를 가지고 있어서 함수 호출 없이 다음 결과를 계산할 수 있다. 이렇게 변경하면 ES6 엔진이 최적화를 수행할 수 있다.</div></div>

Stories by Jeong Woo Ahn on Medium

Jeongwoo Ahn

함수
책 모던 자바스크립트의 스터디 3장 준비하면서 정리한 두번 째 글을 공유한다.
1장 정리글 — 모던 자바스크립트 1장 — 블록바인딩
2장 정리글 — 모던 자바스크립트 2장 — 문자열과 정규표현식
3장(1) 정리글 — 모던자바스크립트 스터디 3장(1) — 함수
3.7 블록 레벨 함수
ECMAScript5 strict 모드는 블록 내부에서 함수 선언(블록 레벨 함수)을 할 때마다 에러를 발생시킨다.
"use strict"
if (true) {
 // ES5에서는 문법 에러가 발생, ES6에서는 발생하지 않음
 function doSomething(){
 // 비어있음
 }
}
반면 ES6 에서는 doSomething() 함수를 블록 레벨 선언으로 간주하여, 정의한 것과 같은 블록 내에서 접근할 수 있고 호출할 수있다.
블록 레벨 선언은 주어진 스코프 밖에서는 접근할 수 없는 바인딩을 선언하는 것이다. — via 3p 1.2 블록-레벨선언
"use strict"
if (true) {
 console.log(typeof doSomething); // function
 function doSomething(){
 // 비어있음
 }
 doSomething();
}console.log(typeof doSomething); // undefined
그런데 doSomething는 정의된 블록의 최상단으로 호이스팅된다!! 그래서 함수 선언 이전에 typeof doSomething을 실행해도 “function”이 반환된다. if 블록 이후에서는 더 이상 존재하지 않는다.
3.7.1 블록 레벨 함수의 사용 시기
블록 레벨 함수는 블록 레벨 선언으로 간주되므로 함수가 정의된 블록을 벗어나면 제거된다는 점에서 let 함수 표현식과 유사하다. 차이점은 블록 레벨 함수는 정의된 블록 최상단으로 호이스팅 된다는 것이다.
"use strict"
if (true) {
 console.log(typeof doSomething); // 에러 발생
 let doSomething = function(){
 // 비어있음
 }
 doSomething();
}console.log(typeof doSomething); // 위 에러때문에 실행되지 않음
첫 typeof doSomething 이 실행될때 TDZ 안에 doSomething() 이 있으므로 코드 실행이 멈춘다.
3.7.2 Non-Strict 모드의 블록 레벨 함수
ES6 non-strict 모드에서는 블록 레벨 함수 선언이 (블록의 상단이 아니라) 둘러싼 함수나 전역 환경의 최상단까지 호이스팅 한다.
// ES6 non-strict
if (true) {
 console.log(typeof doSomething); // function
 function doSomething (){
 // 비어있음
 }
 doSomething();
}console.log(typeof doSomething); // function
var 변수 선언과 마찬가지로 최상단(전역 스코프)으로 호이스팅된다. 왜? ES6 이전에 만들어진 var와 함수선언식은 함수와 글로벌 단 두가지 스코프만이 존재.
3.8 화살표 함수
기존 함수와 다른점
this, super, arguments, new.target 의 값은 그 화살표 함수를 가장 근접하게 둘러싸고 있는 함수에 의해 정의된다.
new를 사용할 수 없음 == 생성자로 사용될 수 없음.
프로토타입이 없음.
this를 변경할 수 없음.
arguments 객체 없음.
같은 이름의 매개변수를 중복하여 사용할 수 없음.
3.8.1 화살표 함수 문법
// 인자가 하나면 간단히 작성가능
let reflect = value => value;
// 사실상 같은 코드
let reflect = function(value){
 return value;
}
// 인자가 두 개 이상이면
let sum = (num1, num2) => num1 + num2;
// 인자가 없다면 반드시 빈 괄호를 사용해야만 한다
let getName = () => "Nucholas";
// 객체 리터럴을 반환하는 경우 괄호로 감싸야 한다.
let getTempItem = id => ({ id: id, name: "Temp"});
// 한 줄 이상의 표현식은 중괄호를 써야 한다.
let sum2 = (num1, num2) => {
 return num1 + num2;
}
// 아무것도 하지 않는 함수도 역시 중괄호를 써야 한다.
let sum3 = () => {}
3.8.2 즉시 실행 함수 표현식 만들기
let box = function(padding) {
 let width = 0;
 return {
 getBoxWidth: function(){
 return padding + width + padding;
 },
 setObjectWidth: function(w){
 width = w * 10;
 }
 }
}(10);
box.setObjectWidth(10);
console.log(box.getBoxWidth()); // 120
화살표 함수로 즉시 실행 함수 만들려면
let box = ((padding) => {
 // 내용 같음
 })(10)
함수 정의 부분을 괄호로 한번 감싸야 한다.
3.8.3 No this 바인딩
같은 함수에서도 this 값은 호출되는 맥락에 따라 변경될 수 있기 때문에 가장 흔하게 에러가 발생하는 부분이다.
let PageHandler = {
 id: "123456",
 init: function(){
 document.addEventListener("click", function(event){
 this.doSomething(event.type); // 에러 발생
 }, false)
 },
 doSomething: function(type){
 console.log(`Handling ${type} for ${this.id}`);
 }
}
(addEventListener의 세번째 파라미터에 대해 더 알고 싶다면, 클릭)
addEventListener에 등록된 listener 의 this.doSomething의 this는 PageHandler 가 바인딩 되는 대신 이벤트의 대상이 되는 객체를 참조하기 때문에 동작을 예상하기 힘들다.
let PageHandler = {
 id: "123456",
 init: function(){
 document.addEventListener("click", (function(event){
 this.doSomething(event.type); // 에러 발생하지 않음
 }).bind(this), false)
 },
 doSomething: function(type){
 console.log(`Handling ${type} for ${this.id}`);
 }
}
잘 동작하지만 어색하다. 더 나은 방법은 화살표 함수를 사용하는 것이다.
let PageHandler = {
 id: "123456",
 init: function(){
 document.addEventListener("click", (event) => {
 this.doSomething(event.type); // 에러 발생하지 않음
 }, false)
 },
 doSomething: function(type){
 console.log(`Handling ${type} for ${this.id}`);
 }
}
화살표 함수는 자채 실행 문맥을 가지지 않기 때문에 외부 함수의 this를 상속 받는다.
만약 화살표 함수가 최상단 스코프에 정의 되었다면, 여기서의 문맥은 항상 전역 객체다.
화살표 함수의 문맥은 바뀔 수 없다. 문맥을 수정하는 메소드를 사용하더라도 절대 바뀌지 않는다.
3.8.4 화살표 함수와 배열
let result = values.sort(function(a, b){
 return a - b;
});
// 좀 더 간결해진다.
let result2 = values.sort((a, b) => a - 1);
3.8.5 No arguments 바인딩
화살표 함수는 arguments 객체를 가지고 있지 않지만, 둘러싼 함수의 arguments 객체에 접근할 수 있다.
function wrapper() {
 return () => arguments[0]
}let arrowFunc = wrapper(5);
console.log(arrowFunc()); // 5
3.8.6 화살표 함수 식별하기
// 화살표 함수도 함수이다.
let comparator = (a, b) => a - b;
console.log(typeof comparator); // function
console.log(comparator instanceof Function); // true
// call, apply, bind 사용은 가능
console.log(comparator.call(null, 1, 2)); // -1
console.log(comparator.apply(null, [1, 3])); // -2
let comparator2 = comparator.bind(null);
console.log(comparator2(1, 4)) // -3
3.9 꼬리 호출 최적화
꼬리 호출은 함수가 다른 함수의 마지막에 호출될 때를 말한다.
function doSomething(){
 return doSomethingElse(); // 꼬리 호출
}
함수 호출을 나타내기 위해 호출 스택에 새로운 스택 프레임을 만들고 추가한다.
GPT의 쉬운 비유
당신이 집 안의 한 방에서 다른 방으로 이사한다고 상상해 보십시오. ES5에서는 새 방으로 이동할 때마다(함수 호출) 방문한 각 방에 발자국(스택 프레임)이 남습니다. 단지 방을 통과해서 최종 목적지(테일 콜)에 도달했다고 해도 각 방에는 발자국이 남을 것입니다.
3.9.1 ES6 꼬리 호출의 차이점
ES6의 strict 모드에서 다음 조건을 만족하면 새로운 스택 프레임을 만드는 대신 현재 스택 프레임을 지우고 재사용한다.
꼬리 호출이 현재 스택 프레임의 변수에 접근하지 않음
꼬리 호출을 만드는 함수가 꼬리 호출 반환 후 남은 작업이 없음
꼬리 호출의 결과가 함수의 값으로서 반환됨
"use strict";
// 최적화 안됨 - 반환 값 없음
function doSomething(){
 doSomethingElse();
}
// 최적화 안됨 - 반환 후 추가 작업 있음
function doSomething(){
 return 1 + doSomethingElse();
}
// 최적화 안됨 - 마지막 위치가 아닌 곳에서 호출
function doSomething(){
 let result = doSomethingElse();
 return result;
}
// 최적화 안됨 - 클로저를 사용하는 경우
function doSomething(){
 var num = 1,
 func = () => num;
 return func();
}
3.9.2 꼬리 호출 최적화를 이용하는 방법
최적화는 내부적으로 동작하므로 대부분 고민할 필요가 없다. 꼬리호출 최적화는 주로 크게 영향을 미치는 재귀 함수에 사용한다.
function factorial(n) {
 if(n <= 1) {
 return 1;
 } else {
 // 최적화되지 않음 - 반환 후 곱셈을 해야 함.
 return n * factorial(n-1);
 }
}
console.log(factorial(3)) // 3 * 2 * 1 = 6
만약 n이 매우 크면 호출 스택 크기는 늘어날 것이고 스택 오버 플로를 발생시킬 수도 있다.
최적화를 위해 마지막 함수 호출 . 후곱셈을 하지 않아야 한다.
function factorial(n, p = 1) {
 if(n <= 1) {
 return 1 * p;
 } else {
 let result = n * p;
 return factorial(n-1, result);
 }
}
console.log(factorial(3)) // 6
p는 이전 곱셈 결과를 가지고 있어서 함수 호출 없이 다음 결과를 계산할 수 있다. 이렇게 변경하면 ES6 엔진이 최적화를 수행할 수 있다.
1장 정리글 — 모던 자바스크립트 1장 — 블록바인딩
2장 정리글 — 모던 자바스크립트 2장 — 문자열과 정규표현식
3장(1) 정리글 — 모던자바스크립트 스터디 3장(1) — 함수

모던자바스크립트 스터디 3장(2)

댓글