[ko] Functions/default_parameters 소스 커밋 추가 및 번역 최신화 (#15540)

* [feat] default_parameters 문서 최신화 * Update files/ko/web/javascript/reference/functions/default_parameters/index.md --------- Co-authored-by: boyeong_ban <[email protected]> Co-authored-by: Sungwoo Park <[email protected]>
mdn · Oct 6, 2023 · 4575343 · 4575343
1 parent b976c92
commit 4575343
Showing 1 changed file with 84 additions and 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
@@ -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,71 +196,41 @@ 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, "=^_^="]
 
 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)