From 4575343f4231ea07ee36192fb255224931bc2104 Mon Sep 17 00:00:00 2001 From: bboyeong <63862534+2kkeullim@users.noreply.github.com> Date: Fri, 6 Oct 2023 12:59:02 +0900 Subject: [PATCH] =?UTF-8?q?[ko]=20Functions/default=5Fparameters=20?= =?UTF-8?q?=EC=86=8C=EC=8A=A4=20=EC=BB=A4=EB=B0=8B=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=EB=B0=8F=20=EB=B2=88=EC=97=AD=20=EC=B5=9C=EC=8B=A0=ED=99=94=20?= =?UTF-8?q?(#15540)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [feat] default_parameters 문서 최신화 * Update files/ko/web/javascript/reference/functions/default_parameters/index.md --------- Co-authored-by: boyeong_ban Co-authored-by: Sungwoo Park --- .../functions/default_parameters/index.md | 155 ++++++++++-------- 1 file changed, 84 insertions(+), 71 deletions(-) diff --git a/files/ko/web/javascript/reference/functions/default_parameters/index.md b/files/ko/web/javascript/reference/functions/default_parameters/index.md index 039cba18e67a51..63932c50fb0cee 100644 --- a/files/ko/web/javascript/reference/functions/default_parameters/index.md +++ b/files/ko/web/javascript/reference/functions/default_parameters/index.md @@ -1,27 +1,29 @@ --- title: 기본값 매개변수 slug: Web/JavaScript/Reference/Functions/Default_parameters +l10n: + sourceCommit: 9ebec1107f78b1e7ba6b23340d32ccc62f703d72 --- {{jsSidebar("Functions")}} -기본값 함수 매개변수 (**default function parameter**)를 사용하면 값이 없거나 `undefined`가 전달될 경우 이름붙은 매개변수를 기본값으로 초기화할 수 있습니다. +기본값 함수 매개변수 (**default function parameter**)를 사용하면 값이 전달되지 않거나 `undefined`인 경우 명명된 매개변수를 기본값으로 초기화할 수 있습니다. {{EmbedInteractiveExample("pages/js/functions-default.html")}} ## 구문 -```js -function fnName(param1 = defaultValue1, ..., paramN = defaultValueN) { ... } +```js-nolint +function fnName(param1 = defaultValue1, /* …, */ paramN = defaultValueN) { + // … +} ``` ## 설명 JavaScript에서, 함수의 매개변수는 `{{jsxref("undefined")}}`가 기본입니다. 그러나, 일부 상황에서는 다른 기본 값을 설정하는 것이 유용할 수 있습니다. 이때가 바로 기본값 매개변수가 필요할 때 입니다. -과거에 기본값 설정을 위한 일반적인 방법은 함수 내부(body)에서 매개변수 값을 검사해 `undefined`인 경우 값을 할당하는 것이었습니다. - -다음 예제에서, `multiply`호출시 `b`에 할당된 값이 없다면, `b` 값은 `a*b`를 평가할 때 `undefined`일 거고 `multiply` 호출은 `NaN`이 반환됩니다. +다음 예제에서 `multiply`가 호출될 때 `b`에 대한 값이 제공되지 않으면 `a * b`를 평가할 때 `b`의 값은 `undefined`가 되고 `multiply`는 `NaN`을 반환합니다. ```js function multiply(a, b) { @@ -32,7 +34,7 @@ multiply(5, 2); // 10 multiply(5); // NaN ! ``` -이를 방지하기 위해서, 아래 두번째 줄과 같이 `multiply` 함수가 오직 한 개의 인수만 있다면 `b`를 `1`로 설정하는 방식을 사용하곤 했습니다. +과거에 기본값을 설정하는 일반적인 방법은 함수 본문에서 매개변수 값을 테스트하고 `undefined`인 경우 값을 할당하는 것이었습니다. 다음 예제에서는 `multiply`가 하나의 인수로만 호출되는 경우 `b`가 `1`로 설정됩니다. ```js function multiply(a, b) { @@ -44,7 +46,7 @@ multiply(5, 2); // 10 multiply(5); // 5 ``` -ES2015의 기본값 매개변수로 함수 내부 에서의 검사는 더 이상 필요치 않습니다. 이제, 간단히 함수 머리(head)에서 `b`의 기본값으로 `1` 로 설정할 수 있습니다: +기본 매개변수를 사용하면 함수 내부의 검사는 더 이상 필요하지 않습니다. 이제 함수 머리(head)에서 `b`에 `1`을 기본값으로 지정할 수 있습니다. ```js function multiply(a, b = 1) { @@ -56,28 +58,69 @@ multiply(5); // 5 multiply(5, undefined); // 5 ``` +매개변수는 여전히 왼쪽에서 오른쪽으로 설정되어 나중에 기본값이 없는 매개변수가 있더라도 기본값을 덮어씁니다. + +```js +function f(x = 1, y) { + return [x, y]; +} + +f(); // [1, undefined] +f(2); // [2, undefined] +``` + +> **참고:** 첫 번째 기본 매개변수와 그 이후의 모든 매개변수는 함수의 [`length`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/length)에 영향을 미치지 않습니다. + +기본 매개변수 생성자는 함수 본문에서 생성된 범위의 상위인 자체 범위에서 동작합니다. + +즉, 이전 매개변수는 이후 매개변수의 생성자에서 참조할 수 있습니다. 그러나 함수 본문에 선언된 함수와 변수는 기본값 매개변수 생성자에서 참조할 수 없으며, 이를 시도하면 런타임 {{jsxref("ReferenceError")}}가 발생합니다. 여기에는 함수 본문에서 [`var`](/ko/docs/Web/JavaScript/Reference/Statements/var)로 선언된 변수도 포함됩니다. + +예를 들어, 다음 함수는 기본 매개변수 값에 함수 본문의 하위 범위에 대한 접근 권한이 없기 때문에 호출될 때 `ReferenceError`를 발생시킵니다. + +```js example-bad +function f(a = go()) { + function go() { + return ":P"; + } +} + +f(); // ReferenceError: go가 정의되지 않았습니다. +``` + +이 함수는 매개변수 `a`의 값을 출력하는데, 변수 `var a`는 매개변수 목록의 상위 범위가 아닌 함수 본문에 대해 생성된 범위에만 올라가기 때문에 `b`에는 값이 표시되지 않습니다. + +```js example-bad +function f(a, b = () => console.log(a)) { + var a = 1; + b(); +} + +f(); // undefined +f(5); // 5 +``` + ## 예제 -### `undefined` vs. 다른 거짓같은 값(falsy values) 전달하기 +### `undefined` vs 다른 거짓같은 값(falsy values) 전달하기 -아래 예제중 두 번째 호출에서, 설사 두 번째 인수를 호출할 때 명시해서 `undefined` (`null` 혹은 {{glossary("falsy")}} 값이 아니긴 하지만 )로 설정하더라도 , `num` 인수의 값은 여전히 기본값입니다. +아래 예제중 두 번째 호출에서, 첫 번째 인수가 명시적으로 `undefined`(`null` 또는 다른 {{glossary("falsy")}} 값은 아니지만)로 설정되어 있어도 여전히 `num` 인수의 값은 여전히 기본값입니다. ```js function test(num = 1) { console.log(typeof num); } -test(); // 'number' (num 은 1로 설정됨) -test(undefined); // 'number' (num 이 역시 1로 설정됨) +test(); // 'number' (num은 1로 설정됨) +test(undefined); // 'number' (num이 역시 1로 설정됨) -// 다른 falsy values로 테스트 하기: -test(""); // 'string' (num 은 ''로 설정됨) -test(null); // 'object' (num 은 null로 설정됨) +// 다른 falsy values로 테스트 하기 +test(""); // 'string' (num은 ''로 설정됨) +test(null); // 'object' (num은 null로 설정됨) ``` ### 호출 시 평가 -기본 인수는 _호출_ _시_ 에 평가됩니다, 그래서 Python의 경우 와는 달리, 함수가 호출될 때마다 새로운 객체가 생성됩니다. +기본 인수는 호출 시에 평가됩니다. 그래서 Python과 달리 함수가 호출될 때마다 새 객체가 생성됩니다. ```js function append(value, array = []) { @@ -89,7 +132,7 @@ append(1); // [1] append(2); // [2], [1, 2]가 아니라 ``` -이는 심지어 함수 및 변수에도 적용됩니다: +이는 심지어 함수와 변수에도 적용됩니다. ```js function callSomething(thing = something()) { @@ -106,27 +149,26 @@ callSomething(); // 1 callSomething(); // 2 ``` -### 앞쪽 매개변수는 뒷쪽의 매개변수 기본값에 사용할 수 있습니다 +### 이전 매개 변수는 이후 매개 변수의 기본값으로 사용할 수 있습니다 -매개 변수가 여러개일 때 앞쪽에( 왼쪽 부분) 정의된 매개변수는 뒷쪽에 정의된 매개변수의 기본값에 바로 사용할 수 있습니다. +앞서 정의한 매개변수(왼쪽)는 나중에 정의한 매개변수의 기본값으로 사용할 수 있습니다. ```js -function greet(name, greeting, message = greeting + " " + name) { +function greet(name, greeting, message = `${greeting} ${name}`) { return [name, greeting, message]; } -greet("David", "Hi"); // ["David", "Hi", "HiDavid"] +greet("David", "Hi"); // ["David", "Hi", "Hi David"] greet("David", "Hi", "Happy Birthday!"); // ["David", "Hi", "Happy Birthday!"] ``` -이 기능은, 얼마나 많은 경계 조건(edge case)를 다룰수 있는지 보여주는, 아래 예제로 거의 설명 가능합니다. +이 기능은 다음과 같이 대략적으로 계산할 수 있으며, 이는 처리되는 경계 조건(edge case)의 수를 보여줍니다. ```js function go() { return ":P"; } -// 함수 정의가 간단해짐 function withDefaults( a, b = 5, @@ -139,11 +181,9 @@ function withDefaults( return [a, b, c, d, e, f, g]; } -// 함수 정의가 길고 장황함 function withoutDefaults(a, b, c, d, e, f, g) { switch (arguments.length) { case 0: - a; case 1: b = 5; case 2: @@ -156,13 +196,10 @@ function withoutDefaults(a, b, c, d, e, f, g) { f = arguments; case 6: g = this.value; - default: } return [a, b, c, d, e, f, g]; } -// 아래와 같이 함수 호출하면 동일한 결과를 보임 - withDefaults.call({ value: "=^_^=" }); // [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] @@ -170,57 +207,30 @@ withoutDefaults.call({ value: "=^_^=" }); // [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] ``` -### 유효범위 효과 (Scope Effects) - -한개 이상의 매개변수에 기본값이 지정되면 특별히 매개변수 목록내의 식별자들(identifiers) 대상으로, [두번째 스코프](https://tc39.es/ecma262/#sec-functiondeclarationinstantiation) (Environment Record) 가 생성됩니다. - -이 말은 함수 내부에 선언된 함수와 변수들은 매개변수 기본값 초기화시에 참조할 수 없다는 말입니다; 그렇게 하려고 하면 실행시간 에러인 {{jsxref("ReferenceError")}} 를 유발합니다. - -이 말은 또한 함수 내부에서 `var` 로 선언된 변수는 동일한 이름을 가진 매개변수를 가리게 되는, 중첩 `var` 선언 으로 인한 일반적인 동작이 일어나지 않는다는 말입니다. - -아래 함수는 호출되면 `ReferenceError` 를 발생시킵니다. 매개변수 기본값이 함수 내부의 자식 유효범위를 참조할 수 없기 때문입니다. +### 기본값이 할당된 구조화된 매개변수 -```js example-bad -function f(a = go()) { - // `f`가 호출 되면 `ReferenceError` 발생 - function go() { - return ":P"; - } -} -``` +[구조 분해 할당](/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) 구문을 사용하여 기본값 할당을 사용할 수 있습니다. -...그리고 아래 함수는 `undefined` 를 프린트 하는데, `var a` 가 함수 내부 대상의 유효범위내에서만 효과를 가지기 때문입니다. ( 매개변수 목록이 대상인 부모 스코프가 아니라) - -```js example-bad -function f(a, b = () => console.log(a)) { - var a = 1; - b(); // `undefined`를 인쇄하는데, 매개변수 기본값이 자체 스코프에 있기 때문입니다 -} -``` - -### 기본값 매개변수 뒤쪽의 기본값 없는 매개변수 - -매개변수는 여전히 왼쪽에서 오른쪽으로 설정됩니다. 아래 예제에서 뒷쪽에 기본값이 없는 매개변수가 있지만 기본값 매개변수를 덮어씁니다. +이를 수행하는 일반적인 방법은 빈 객체/배열을 구조 분해된 매개변수의 기본값으로 설정하는 것입니다.(예: `[x = 1, y = 2] = []`) 이렇게 하면 함수에 아무 것도 전달하지 않고도 해당 값이 미리 채워져 있을 수 있습니다. ```js -function f(x = 1, y) { - return [x, y]; +function preFilledArray([x = 1, y = 2] = []) { + return x + y; } -f(); // [1, undefined] -f(2); // [2, undefined] -``` +preFilledArray(); // 3 +preFilledArray([]); // 3 +preFilledArray([2]); // 4 +preFilledArray([2, 3]); // 5 -### 기본값 할당 있는 해체된 매개변수 - -기본값 할당을 {{jsxref("Operators/Destructuring_assignment", "destructuring assignment", "", 1)}} 표기와 함께 사용할 수 있습니다: - -```js -function f([x, y] = [1, 2], { z: z } = { z: 3 }) { - return x + y + z; +// 객체에서도 동일하게 작동합니다. +function preFilledObject({ z = 3 } = {}) { + return z; } -f(); // 6 +preFilledObject(); // 3 +preFilledObject({}); // 3 +preFilledObject({ z: 2 }); // 2 ``` ## 명세서 @@ -233,4 +243,7 @@ f(); // 6 ## 참조 -- [Original proposal at ecmascript.org](http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values) +- [함수](/ko/docs/Web/JavaScript/Guide/Functions) +- [함수](/ko/docs/Web/JavaScript/Reference/Functions) +- [나머지 매개변수](/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters) +- [Nullish coalescing operator (`??`)](/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing)