<div id="readability-page-1" class="page"><div><div><h2 id="eb95">함수</h2><div><a href="https://blog.jeongwoo.in/?source=post_page-----1174b71cdb3d--------------------------------" 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>의 스터디 2장 준비하면서 정리한 글 공유한다.<ul><li id="6b63">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="1fcb">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></ul><h2 id="e85c">3.1 함수의 매개변수 기본값</h2><h2 id="944f">3.1.1 ES5의 매개변수 기본값</h2>timeout, callback을 선택적 매개변수로 사용하고 싶을때 아래와 같이 할 수 있다.<pre>function makeRequest(url, timeout, callback) { timeout = timeout || 2000; callback = callback || function(){}; // 함수의 나머지 부분 }</pre>논리연산자 OR(||)은 좌측 첫 번째 값을 불린값으로 변환하여 false이면 연산자 우측의 값을 반환한다. 그러나 이 방식은 timeout에 0이 전달되는 경우 0은 불린값 변환시 false이므로 2000으로 변경되는 문제가 있다.그런 경우 typeof 를 사용하여 인자의 타입을 확인하는 것이 더 안전하다.<pre>function makeRequest(url, timeout, callback) { timeout = (typeof timeout !== "undefined") ? timeout : 2000; callback = (typeof callback !== "undefined") ? callback : function(){}; // 함수의 나머지 부분 }</pre>더 안전해졌지만, 너무 많은 코드가 필요하다.<h2 id="1f0f">3.1.2 ES6의 매개변수 기본값</h2><pre>function makeRequest(url, timeout = 2000, callback = function(){}) { // 함수의 나머지 부분 }</pre>훨씬 간결해졌다.<pre>makeRequest("/foo"); // timeout, callback 기본값 사용 makeRequest("/foo", undefined); // timeout, callback 기본값 사용 makeRequest("/foo", null); // callback 기본값 사용</pre>세 번째 호출에서 null은 유효한 값으로 간주하여 timeout의 매개변수 기본값은 사용되지 않는다.<h2 id="cd25">3.1.3 매개변수 기본값이 arguments 객체에 미치는 영향</h2>매개변수 기본값이 존재할때 arguments 객체는 다르게 동작한다. ⇒ ES6 non-strict 모드에서 arguments 객체는 매개변수가 변경되면 함께 변경된다.<pre>function mixArgs(first, second) { console.log(first === arguments[0]); console.log(second === arguments[1]); first = "c"; second = "d"; console.log(first === arguments[0]); console.log(second === arguments[1]); } mixArgs("a", "b"); // 출력결과 true, true, true, true</pre>그러나 ES5 strict 모드는 arguments 객체는 매개변수의 변경을 반영하지 않는다.<pre>function mixArgs(first, second) { "use strict"; console.log(first === arguments[0]); console.log(second === arguments[1]); first = "c"; second = "d"; console.log(first === arguments[0]); console.log(second === arguments[1]); } mixArgs("a", "b"); // 출력결과 true, true, false, false</pre>ES6에서 arguments객체는 ES5의 strict 모드와 동일하게 동작하고 매개변수 기본값이 존재는 arguments객체를 매개변수로부터 분리한다.<pre>function mixArgs(first, second = "b") { console.log(arguments.length); console.log(first === arguments[0]); console.log(second === arguments[1]); first = "c"; second = "d"; console.log(first === arguments[0]); console.log(second === arguments[1]); } mixArgs("a"); // 출력결과 1 // 하나의 인자만 전달되었으므로 true // first는 arguments[0]과 같다 false // arguments[1]은 undefined false, false // 변경해도 arguments는 영향을 받지 않는다.</pre><h2 id="a613">3.1.4 매개변수 기본값 표현식</h2>함수의 실행 결과도 매개변수 기본 값으로 사용할 수 있다.<pre>function getValue() { return 5; } function add(first, second = getValue()) { return first + second; } console.log(add(1,1)); // 2 console.log(add(1)); // 6</pre>getValue()는 자바스크립트 엔진에 의해 함수선언이 처음 해석될 때가 아니라 두 번째 인자 없이 add()를 호출할때만 호출된다는 것을 명심하자.주의) 괄호를 빠드리고 second = getValue 와 같이 전달하면 함수 호출의 결과값 대신 함수의 참조만 전달하게 될것.흥미로운 것은 매개변수의 기본값으로 앞서서 선언한 매개변수를 사용할 수도 있다.<pre>function add(first, second = first){ return first + second; } console.log(add(1, 1)); // 2 console.log(add(1)); // 2</pre>하나의 인자만 전달해도 모든 인자가 같은 값이 된다. 더 나아가<pre>function getValue(value) { return value + 5; } function add(first, second = getValue(first){ return first + second; } console.log(add(1, 1)); // 2 console.log(add(1)); // 7</pre>다만, 앞에 정의된 인자에서 뒤의 인자를 참조할 수는 없다.<pre>function add(first = second, second){ return first + second; } console.log(add(1, 1)); // 2 console.log(add(undefined, 1)); // 에러발생</pre>이 이유를 이해하기 위해 TDZ(temporal dead zone)를 다시 살펴보자.<h2 id="030d">3.1.5 TDZ에서의 매개변수 기본값</h2>let, const와 마찬가지로 매개변수 기본값 역시 접근할 수 없는 TDZ를 갖는다. 각 매개변소는 let 선언과 유사하기 초기화 이전에 접근하면 에러가 발생하는 새로운 식별자 바인딩을 만든다.<pre>function getValue(value) { return value + 5; } function add(first, second = getValue(first){ return first + second; } console.log(add(1, 1)); // 2 console.log(add(1)); // 7</pre>add(1, 1)과 add(1)를 호출하면 매개변수 값을 만들기 위해 실제로는 아래와 같은 코드를 실행한다.<pre>// add(1, 1) let first = 1; let second = 1;// add(1) let first = 1; let second = getValue(first);</pre>add() 함수를 처음 실행하면 first와 second는 매개변수 고유의 TDZ에 추가된다.(let 동작 방식과 유사)first는 항상 먼저 초기화 되기 때문에 second는 first를 사용할 수 있지만 반대의 경우는 아니다.<pre>function add(first = second, second){ return first + second; } console.log(add(1, 1)); // 2 console.log(add(undefined, 1)); // 에러발생</pre>add(undefined, 1)호출시 실제로 다음 코드와 같이 동작한다.<pre>// add(undefined, 1) let first = second; let second = 1;</pre>first가 초기화 될때 아직 second는 초기화 되지 않았기 때문에 에러가 발생. 그 시점에 second는 TDZ내에 있으므로 second 에 대한 모든 참조는 에러를 발생시킨다.<h2 id="09a3">3.2 이름을 명시하지 않은 매개변수 다루기</h2>자바스크립트 함수는 함수 정의에 명시된 매개변수 개수만큼만 매개변수를 전달하도록 제한하지 않는다. 그래서 명시된 것보다 적거나 많은 매개변수를 함수에 전달할 수 있다.<h2 id="4eb6">3.2.1 ES5에서 이름을 명시하지 않은 매개변수</h2><pre>function pick(object) { let result = Object.create(null); // 두 번째 매개변수에서 시작 for (let i = 1; len = arguments.length; i &lt; len; i++){ result[arguments[i]] = object[arguments[i]]; } return result; }let book = { title: "Understanding ECMAScript 6", author: "Nicholas C. Zakas", year: 2016 }let bookData = pick(book, "author", "year");console.log(bookData.author); // "Nicholas C. Zakas" console.log(bookData.year); // 2016</pre>Underscore.js 라이브러리의 pick() 메서드를 흉내낸것으로 지정된 프로퍼티 부분집합으로 이뤄진 원본 객체의 복사본을 반환한다. 이 함수는 유의할 사항이 두 가지 있다.<ul><li id="f917">매개변수를 하나 이상 처리할 수 있다는 것이 명확하지 않다.</li><li id="9f61">복사할 프로퍼티 찾을때 탐색을 0이 아니라 1부터 시작해야 한다.</li></ul>ES6에서는 이런 문제를 해결하기 위해 <code>나머지 매개변수</code>가 도입되었다.<h2 id="4b3d">3.2.2 나머지 매개변수</h2><code>나머지 매개변수</code>는 매개변수 앞에 세 개의 점(…)을 붙여서 나타낸다.<pre>function pick(object, ...keys) { let result = Object.create(null); // 두 번째 매개변수에서 시작 for (let i = 0; len = keys.length; i &lt; len; i++){ result[keys[i]] = object[keys[i]]; } return result; }</pre>두 가지 제한사항<ul><li id="d324">반드시 하나여야 하고 마지막 위치에서만 사용할 수 있다. function pick(object, …keys, last){ … }</li><li id="84ab">객체 리터럴 setter에는 사용할 수 없다.</li></ul><pre>let object = { set name(...value) { // 문법 에러 // 동작 } }</pre>객체 리터럴 setter는 하나의 인자만 받도록 제한되어있다. <code>나머지 매개변수</code>는 인자를 무한으로 받을 수 있으므로 setter에는 사용할 수 없다.<h2 id="c294">3.3 Function 생성자의 확장된 역할</h2>Function 생성자는 새로운 함수를 동적으로 작성하게 해준다. 하지만 거의 사용되지는 않는다. 전달하는 인자는 함수 매개변수와 함수 내부의 실행문이다.<pre>const add = new Function("first", "second", "return first + second"); console.log(add(1, 1)); // 2</pre><h2 id="a94b">3.4 전개 연산자</h2>전개 연산자(spread operator)는 나머지 매개변수와 밀접하게 연관되어 있다. 나머지 매개변수와 반대로 배열을 나누어 함수에 개별적인 인자로 전달한다. 최대값을 구하는 Math.max를 활용하여 배열의 최대값을 구하려면 어떻게 할까.<pre>let values = [25, 50, 75, 100]; console.log(Math.max.apply(Math, values)); // 100</pre>apply 메서드를 통해 잘 구해지지만, 어렵게 느껴진다. 문법이 코드의 목적을 흐리기 때문이다.ES6 전개연산자는 이런 상황을 쉽게 해결한다.<pre>let values = [25, 50, 75, 100]; console.log(Math.max(...values)); // 100 // Math.max(25, 50, 75, 100) 과 동일console.log(Math.max(...values, 125)); // 125</pre><h2 id="a3f8">3.5 name 프로퍼티</h2>자바스크립트에서는 다양한 함수 정의 방법 때문에 함수를 식별하는것이 어려운 일이다. 익명함수 표현식 때문에 더욱 디버깅이 까다로워짐. 이러한 이유로 ES6에서는 모든 함수에 name 프로퍼티를 추가했다.<pre>function doSomething() {}const doAnotherThing = function(){};console.log(doSomething.name); // "doSomething" console.log(doAnotherThing.name); // "doAnotherThing"</pre><h2 id="c5a9">3.5.2 특별한 name 프로퍼티의 예</h2><pre>let doSomething = function doSomethingElse() {} let person = { get firstName(){ return "Nicholas" }, sayName: function(){ console.log(this.name); } }console.log(doSomething.name); // doSomethingElse =&gt; 변수이름보다 함수표현식이 더 우선 console.log(person.sayName.name); // sayNamelet descriptor = Object.getOwnPropertyDescriptor(person, "firstName"); console.log(descriptor.get.name); // get firstName // getter 함수는 다른 함수랑 구분되게 보이도록 되어있는듯. // bind() 를 사용한 함수는 bind 가 붙음 // Object.getOwnPropertyDescriptor()는 객체의 속성에 대한 설명자를 가져오는 데 사용되는 JavaScript의 메서드입니다. // 설명자에는 쓰기 가능, 열거 가능, 구성 가능 여부 및 해당 값과 같은 속성에 대한 정보가 포함됩니다.</pre></div></div>

Stories by Jeong Woo Ahn on Medium

Jeongwoo Ahn

함수
책 모던 자바스크립트의 스터디 2장 준비하면서 정리한 글 공유한다.
1장 정리글 — 모던 자바스크립트 1장 — 블록바인딩
2장 정리글 — 모던 자바스크립트 2장 — 문자열과 정규표현식
3.1 함수의 매개변수 기본값
3.1.1 ES5의 매개변수 기본값
timeout, callback을 선택적 매개변수로 사용하고 싶을때 아래와 같이 할 수 있다.
function makeRequest(url, timeout, callback) {
 timeout = timeout || 2000;
 callback = callback || function(){};
 // 함수의 나머지 부분
}
논리연산자 OR(||)은 좌측 첫 번째 값을 불린값으로 변환하여 false이면 연산자 우측의 값을 반환한다. 그러나 이 방식은 timeout에 0이 전달되는 경우 0은 불린값 변환시 false이므로 2000으로 변경되는 문제가 있다.
그런 경우 typeof 를 사용하여 인자의 타입을 확인하는 것이 더 안전하다.
function makeRequest(url, timeout, callback) {
 timeout = (typeof timeout !== "undefined") ? timeout : 2000;
 callback = (typeof callback !== "undefined") ? callback : function(){};
 // 함수의 나머지 부분
}
더 안전해졌지만, 너무 많은 코드가 필요하다.
3.1.2 ES6의 매개변수 기본값
function makeRequest(url, timeout = 2000, callback = function(){}) {
 // 함수의 나머지 부분
}
훨씬 간결해졌다.
makeRequest("/foo"); // timeout, callback 기본값 사용
makeRequest("/foo", undefined); // timeout, callback 기본값 사용
makeRequest("/foo", null); // callback 기본값 사용
세 번째 호출에서 null은 유효한 값으로 간주하여 timeout의 매개변수 기본값은 사용되지 않는다.
3.1.3 매개변수 기본값이 arguments 객체에 미치는 영향
매개변수 기본값이 존재할때 arguments 객체는 다르게 동작한다. ⇒ ES6 non-strict 모드에서 arguments 객체는 매개변수가 변경되면 함께 변경된다.
function mixArgs(first, second) {
 console.log(first === arguments[0]);
 console.log(second === arguments[1]);
 first = "c";
 second = "d";
 console.log(first === arguments[0]);
 console.log(second === arguments[1]);
}mixArgs("a", "b");
// 출력결과 true, true, true, true
그러나 ES5 strict 모드는 arguments 객체는 매개변수의 변경을 반영하지 않는다.
function mixArgs(first, second) {
 "use strict";
 console.log(first === arguments[0]);
 console.log(second === arguments[1]);
 first = "c";
 second = "d";
 console.log(first === arguments[0]);
 console.log(second === arguments[1]);
}mixArgs("a", "b");
// 출력결과 true, true, false, false
ES6에서 arguments객체는 ES5의 strict 모드와 동일하게 동작하고 매개변수 기본값이 존재는 arguments객체를 매개변수로부터 분리한다.
function mixArgs(first, second = "b") {
 console.log(arguments.length);
 console.log(first === arguments[0]);
 console.log(second === arguments[1]);
 first = "c";
 second = "d";
 console.log(first === arguments[0]);
 console.log(second === arguments[1]);
}mixArgs("a");
// 출력결과 
1 // 하나의 인자만 전달되었으므로
true // first는 arguments[0]과 같다
false // arguments[1]은 undefined
false, false // 변경해도 arguments는 영향을 받지 않는다.
3.1.4 매개변수 기본값 표현식
함수의 실행 결과도 매개변수 기본 값으로 사용할 수 있다.
function getValue() {
 return 5;
}function add(first, second = getValue()) {
 return first + second;
}console.log(add(1,1)); // 2
console.log(add(1)); // 6
getValue()는 자바스크립트 엔진에 의해 함수선언이 처음 해석될 때가 아니라 두 번째 인자 없이 add()를 호출할때만 호출된다는 것을 명심하자.
주의) 괄호를 빠드리고 second = getValue 와 같이 전달하면 함수 호출의 결과값 대신 함수의 참조만 전달하게 될것.
흥미로운 것은 매개변수의 기본값으로 앞서서 선언한 매개변수를 사용할 수도 있다.
function add(first, second = first){
 return first + second;
}console.log(add(1, 1)); // 2
console.log(add(1)); // 2
하나의 인자만 전달해도 모든 인자가 같은 값이 된다. 더 나아가
function getValue(value) {
 return value + 5;
}function add(first, second = getValue(first){
 return first + second;
}console.log(add(1, 1)); // 2
console.log(add(1)); // 7
다만, 앞에 정의된 인자에서 뒤의 인자를 참조할 수는 없다.
function add(first = second, second){
 return first + second;
}console.log(add(1, 1)); // 2
console.log(add(undefined, 1)); // 에러발생
이 이유를 이해하기 위해 TDZ(temporal dead zone)를 다시 살펴보자.
3.1.5 TDZ에서의 매개변수 기본값
let, const와 마찬가지로 매개변수 기본값 역시 접근할 수 없는 TDZ를 갖는다. 각 매개변소는 let 선언과 유사하기 초기화 이전에 접근하면 에러가 발생하는 새로운 식별자 바인딩을 만든다.
function getValue(value) {
 return value + 5;
}function add(first, second = getValue(first){
 return first + second;
}console.log(add(1, 1)); // 2
console.log(add(1)); // 7
add(1, 1)과 add(1)를 호출하면 매개변수 값을 만들기 위해 실제로는 아래와 같은 코드를 실행한다.
// add(1, 1)
let first = 1;
let second = 1;
// add(1)
let first = 1;
let second = getValue(first);
add() 함수를 처음 실행하면 first와 second는 매개변수 고유의 TDZ에 추가된다.(let 동작 방식과 유사)
first는 항상 먼저 초기화 되기 때문에 second는 first를 사용할 수 있지만 반대의 경우는 아니다.
function add(first = second, second){
 return first + second;
}console.log(add(1, 1)); // 2
console.log(add(undefined, 1)); // 에러발생
add(undefined, 1)호출시 실제로 다음 코드와 같이 동작한다.
// add(undefined, 1)
let first = second;
let second = 1;
first가 초기화 될때 아직 second는 초기화 되지 않았기 때문에 에러가 발생. 그 시점에 second는 TDZ내에 있으므로 second 에 대한 모든 참조는 에러를 발생시킨다.
3.2 이름을 명시하지 않은 매개변수 다루기
자바스크립트 함수는 함수 정의에 명시된 매개변수 개수만큼만 매개변수를 전달하도록 제한하지 않는다. 그래서 명시된 것보다 적거나 많은 매개변수를 함수에 전달할 수 있다.
3.2.1 ES5에서 이름을 명시하지 않은 매개변수
function pick(object) {
 let result = Object.create(null);
 // 두 번째 매개변수에서 시작
 for (let i = 1; len = arguments.length; i < len; i++){
 result[arguments[i]] = object[arguments[i]];
 }
 return result;
}
let book = {
 title: "Understanding ECMAScript 6",
 author: "Nicholas C. Zakas",
 year: 2016
}
let bookData = pick(book, "author", "year");
console.log(bookData.author); // "Nicholas C. Zakas"
console.log(bookData.year); // 2016
Underscore.js 라이브러리의 pick() 메서드를 흉내낸것으로 지정된 프로퍼티 부분집합으로 이뤄진 원본 객체의 복사본을 반환한다. 이 함수는 유의할 사항이 두 가지 있다.
매개변수를 하나 이상 처리할 수 있다는 것이 명확하지 않다.
복사할 프로퍼티 찾을때 탐색을 0이 아니라 1부터 시작해야 한다.
ES6에서는 이런 문제를 해결하기 위해 나머지 매개변수가 도입되었다.
3.2.2 나머지 매개변수
나머지 매개변수는 매개변수 앞에 세 개의 점(…)을 붙여서 나타낸다.
function pick(object, ...keys) {
 let result = Object.create(null);
 // 두 번째 매개변수에서 시작
 for (let i = 0; len = keys.length; i < len; i++){
 result[keys[i]] = object[keys[i]];
 }
 return result;
}
두 가지 제한사항
반드시 하나여야 하고 마지막 위치에서만 사용할 수 있다. function pick(object, …keys, last){ … }
객체 리터럴 setter에는 사용할 수 없다.
let object = {
 set name(...value) { // 문법 에러
 // 동작
 }
}
객체 리터럴 setter는 하나의 인자만 받도록 제한되어있다. 나머지 매개변수는 인자를 무한으로 받을 수 있으므로 setter에는 사용할 수 없다.
3.3 Function 생성자의 확장된 역할
Function 생성자는 새로운 함수를 동적으로 작성하게 해준다. 하지만 거의 사용되지는 않는다. 전달하는 인자는 함수 매개변수와 함수 내부의 실행문이다.
const add = new Function("first", "second", "return first + second");
console.log(add(1, 1)); // 2
3.4 전개 연산자
전개 연산자(spread operator)는 나머지 매개변수와 밀접하게 연관되어 있다. 나머지 매개변수와 반대로 배열을 나누어 함수에 개별적인 인자로 전달한다. 최대값을 구하는 Math.max를 활용하여 배열의 최대값을 구하려면 어떻게 할까.
let values = [25, 50, 75, 100];
console.log(Math.max.apply(Math, values)); // 100
apply 메서드를 통해 잘 구해지지만, 어렵게 느껴진다. 문법이 코드의 목적을 흐리기 때문이다.
ES6 전개연산자는 이런 상황을 쉽게 해결한다.
let values = [25, 50, 75, 100];
console.log(Math.max(...values)); // 100
// Math.max(25, 50, 75, 100) 과 동일
console.log(Math.max(...values, 125)); // 125
3.5 name 프로퍼티
자바스크립트에서는 다양한 함수 정의 방법 때문에 함수를 식별하는것이 어려운 일이다. 익명함수 표현식 때문에 더욱 디버깅이 까다로워짐. 이러한 이유로 ES6에서는 모든 함수에 name 프로퍼티를 추가했다.
function doSomething() {}
const doAnotherThing = function(){};
console.log(doSomething.name); // "doSomething"
console.log(doAnotherThing.name); // "doAnotherThing"
3.5.2 특별한 name 프로퍼티의 예
let doSomething = function doSomethingElse() {}
let person = {
 get firstName(){
 return "Nicholas"
 },
 sayName: function(){
 console.log(this.name);
 }
}
console.log(doSomething.name); // doSomethingElse => 변수이름보다 함수표현식이 더 우선
console.log(person.sayName.name); // sayName
let descriptor = Object.getOwnPropertyDescriptor(person, "firstName");
console.log(descriptor.get.name); // get firstName 
// getter 함수는 다른 함수랑 구분되게 보이도록 되어있는듯.
// bind() 를 사용한 함수는 bind 가 붙음
// Object.getOwnPropertyDescriptor()는 객체의 속성에 대한 설명자를 가져오는 데 사용되는 JavaScript의 메서드입니다. 
// 설명자에는 쓰기 가능, 열거 가능, 구성 가능 여부 및 해당 값과 같은 속성에 대한 정보가 포함됩니다.
1장 정리글 — 모던 자바스크립트 1장 — 블록바인딩
2장 정리글 — 모던 자바스크립트 2장 — 문자열과 정규표현식

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

댓글