From d28e340e083d4ca07e848118cb5fbc562368f2b8 Mon Sep 17 00:00:00 2001 From: alattalatta Date: Thu, 23 Sep 2021 20:38:08 +0900 Subject: Rename html to md --- .../reference/functions/rest_parameters/index.html | 213 --------------------- .../reference/functions/rest_parameters/index.md | 213 +++++++++++++++++++++ 2 files changed, 213 insertions(+), 213 deletions(-) delete mode 100644 files/ko/web/javascript/reference/functions/rest_parameters/index.html create mode 100644 files/ko/web/javascript/reference/functions/rest_parameters/index.md (limited to 'files/ko/web/javascript/reference/functions') diff --git a/files/ko/web/javascript/reference/functions/rest_parameters/index.html b/files/ko/web/javascript/reference/functions/rest_parameters/index.html deleted file mode 100644 index 250b7c2931..0000000000 --- a/files/ko/web/javascript/reference/functions/rest_parameters/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: Rest 파라미터 -slug: Web/JavaScript/Reference/Functions/rest_parameters -tags: - - Functions - - JavaScript - - Rest - - Rest parameters -translation_of: Web/JavaScript/Reference/Functions/rest_parameters ---- -
{{jsSidebar("Functions")}}
- -

Rest 파라미터 구문은 정해지지 않은 수(an indefinite number, 부정수) 인수를 배열로 나타낼 수 있게 합니다.

- -

{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}

- -

구문

- -
function f(a, b, ...theArgs) {
-  // ...
-}
-
- -

설명

- -

함수의 마지막 파라미터의 앞에 ... 를 붙여 (사용자가 제공한) 모든 나머지 인수를 "표준" 자바스크립트 배열로 대체합니다. 마지막 파라미터만 "Rest 파라미터" 가 될 수 있습니다.

- -
function myFun(a, b, ...manyMoreArgs) {
-  console.log("a", a);
-  console.log("b", b);
-  console.log("manyMoreArgs", manyMoreArgs);
-}
-
-myFun("one", "two", "three", "four", "five", "six");
-
-// Console Output:
-// a, one
-// b, two
-// manyMoreArgs, [three, four, five, six]
- -

 

- -

Rest 파라미터 및 arguments 객체간 차이

- -

Rest 파라미터와 arguments 객체 사이에 세 가지 주요 차이점이 있습니다:

- - - -

arguments에서 배열까지

- -

Rest 파라미터는 인수에 의해 유발된 상용구(boilerplate) 코드를 줄이기 위해 도입되었습니다.

- -
// Rest 파라미터 이전에, "arguments" 는 다음을 사용해 일반적인 배열로 변환될 수 있음
-
-function f(a, b) {
-
-  var normalArray = Array.prototype.slice.call(arguments);
-  // -- 또는 --
-  var normalArray = [].slice.call(arguments);
-  // -- 또는 --
-  var normalArray = Array.from(arguments);
-
-  var first = normalArray.shift(); // OK, 첫 번째 인수를 반환
-  var first = arguments.shift(); // ERROR (arguments 가 일반적인 배열이 아님)
-
-}
-
-// 이제 rest 파라미터를 사용해 쉽게 일반적인 배열에 접근할 수 있음
-
-function f(...args) {
-  var normalArray = args;
-  var first = normalArray.shift(); // OK, 첫 번째 인수를 반환
-}
- -

Rest 파라미터 해체

- -

Rest 파라미터는 해체될 수 있습니다(배열로만). 이는 데이터가 구분된 변수로 해체될 수 있음을 의미합니다. 구조 분해 할당 문서를 보세요.

- -
function f(...[a, b, c]) {
-  return a + b + c;
-}
-
-f(1)          // NaN (b 와 c 는 undefined)
-f(1, 2, 3)    // 6
-f(1, 2, 3, 4) // 6 (4번 째 파라미터는 해체되지 않음)
- -

예제

- -

이 예제에서, 첫 번째 인수는 "a", 두 번째 인수는 "b" 로 매핑되어, 일반적인 유명 인수와 같이 사용됩니다. 반면에 3번 째 인수 "manyMoreArgs" 는 사용자가 포함시킨 인수를 포함하는 배열이 됩니다.

- -
function myFun(a, b, ...manyMoreArgs) {
-  console.log("a", a);
-  console.log("b", b);
-  console.log("manyMoreArgs", manyMoreArgs);
-}
-
-myFun("one", "two", "three", "four", "five", "six");
-
-// a, one
-// b, two
-// manyMoreArgs, [three, four, five, six]
- -

아래를 보면, 하나의 값만 있더라도 마지막 인수는 여전히 배열을 갖습니다.

- -
// 위 예제와 동일한 함수 정의를 사용
-
-myFun("one", "two", "three");
-
-// a, one
-// b, two
-// manyMoreArgs, [three]
- -

아래를 보면, 3번 째 인수가 제공되지 않더라도, "manyMoreArgs" 는 여전히 배열입니다(비어있긴하지만).

- -
// 위 예제와 동일한 함수 정의를 사용
-
-myFun("one", "two");
-
-// a, one
-// b, two
-// manyMoreArgs, []
- -

theArgs 가 배열이므로, length 프로퍼티를 사용해 엘리먼트의 수를 얻을 수 있습니다.

- -
function fun1(...theArgs) {
-  console.log(theArgs.length);
-}
-
-fun1();  // 0
-fun1(5); // 1
-fun1(5, 6, 7); // 3
- -

다음 예제에서, rest 파라미터는 첫 번째 인수 다음의 모든 인수를 배열로 모으는데 사용됩니다. 각각은 첫 번째 파라미터와 곱해져 배열로 반환됩니다.

- -
function multiply(multiplier, ...theArgs) {
-  return theArgs.map(function(element) {
-    return multiplier * element;
-  });
-}
-
-var arr = multiply(2, 1, 2, 3);
-console.log(arr); // [2, 4, 6]
- -

Array 메소드는 rest 파라미터에서 사용될 수 있지만, arguments 객체에서는 그렇지 않습니다.

- -
function sortRestArgs(...theArgs) {
-  var sortedArgs = theArgs.sort();
-  return sortedArgs;
-}
-
-console.log(sortRestArgs(5, 3, 7, 1)); // 1, 3, 5, 7
-
-function sortArguments() {
-  var sortedArgs = arguments.sort();
-  return sortedArgs; // this will never happen
-}
-
-
-console.log(sortArguments(5, 3, 7, 1)); // TypeError (arguments.sort is not a function)
- -

arguments 객체에서 Array 메소드를 사용하려면, 이를 먼저 실제 배열로 변환해야합니다.

- -
function sortArguments() {
-  var args = Array.from(arguments);
-  var sortedArgs = args.sort();
-  return sortedArgs;
-}
-console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7
-
- -

명세

- - - - - - - - - - - - - - - - - - - -
명세상태설명
{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ES6')}}초기 정의.
{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ESDraft')}} 
- -

브라우저 호환성

- -

 

- -

{{Compat("javascript.functions.rest_parameters")}}

- -

함께 보기

- - diff --git a/files/ko/web/javascript/reference/functions/rest_parameters/index.md b/files/ko/web/javascript/reference/functions/rest_parameters/index.md new file mode 100644 index 0000000000..250b7c2931 --- /dev/null +++ b/files/ko/web/javascript/reference/functions/rest_parameters/index.md @@ -0,0 +1,213 @@ +--- +title: Rest 파라미터 +slug: Web/JavaScript/Reference/Functions/rest_parameters +tags: + - Functions + - JavaScript + - Rest + - Rest parameters +translation_of: Web/JavaScript/Reference/Functions/rest_parameters +--- +
{{jsSidebar("Functions")}}
+ +

Rest 파라미터 구문은 정해지지 않은 수(an indefinite number, 부정수) 인수를 배열로 나타낼 수 있게 합니다.

+ +

{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}

+ +

구문

+ +
function f(a, b, ...theArgs) {
+  // ...
+}
+
+ +

설명

+ +

함수의 마지막 파라미터의 앞에 ... 를 붙여 (사용자가 제공한) 모든 나머지 인수를 "표준" 자바스크립트 배열로 대체합니다. 마지막 파라미터만 "Rest 파라미터" 가 될 수 있습니다.

+ +
function myFun(a, b, ...manyMoreArgs) {
+  console.log("a", a);
+  console.log("b", b);
+  console.log("manyMoreArgs", manyMoreArgs);
+}
+
+myFun("one", "two", "three", "four", "five", "six");
+
+// Console Output:
+// a, one
+// b, two
+// manyMoreArgs, [three, four, five, six]
+ +

 

+ +

Rest 파라미터 및 arguments 객체간 차이

+ +

Rest 파라미터와 arguments 객체 사이에 세 가지 주요 차이점이 있습니다:

+ + + +

arguments에서 배열까지

+ +

Rest 파라미터는 인수에 의해 유발된 상용구(boilerplate) 코드를 줄이기 위해 도입되었습니다.

+ +
// Rest 파라미터 이전에, "arguments" 는 다음을 사용해 일반적인 배열로 변환될 수 있음
+
+function f(a, b) {
+
+  var normalArray = Array.prototype.slice.call(arguments);
+  // -- 또는 --
+  var normalArray = [].slice.call(arguments);
+  // -- 또는 --
+  var normalArray = Array.from(arguments);
+
+  var first = normalArray.shift(); // OK, 첫 번째 인수를 반환
+  var first = arguments.shift(); // ERROR (arguments 가 일반적인 배열이 아님)
+
+}
+
+// 이제 rest 파라미터를 사용해 쉽게 일반적인 배열에 접근할 수 있음
+
+function f(...args) {
+  var normalArray = args;
+  var first = normalArray.shift(); // OK, 첫 번째 인수를 반환
+}
+ +

Rest 파라미터 해체

+ +

Rest 파라미터는 해체될 수 있습니다(배열로만). 이는 데이터가 구분된 변수로 해체될 수 있음을 의미합니다. 구조 분해 할당 문서를 보세요.

+ +
function f(...[a, b, c]) {
+  return a + b + c;
+}
+
+f(1)          // NaN (b 와 c 는 undefined)
+f(1, 2, 3)    // 6
+f(1, 2, 3, 4) // 6 (4번 째 파라미터는 해체되지 않음)
+ +

예제

+ +

이 예제에서, 첫 번째 인수는 "a", 두 번째 인수는 "b" 로 매핑되어, 일반적인 유명 인수와 같이 사용됩니다. 반면에 3번 째 인수 "manyMoreArgs" 는 사용자가 포함시킨 인수를 포함하는 배열이 됩니다.

+ +
function myFun(a, b, ...manyMoreArgs) {
+  console.log("a", a);
+  console.log("b", b);
+  console.log("manyMoreArgs", manyMoreArgs);
+}
+
+myFun("one", "two", "three", "four", "five", "six");
+
+// a, one
+// b, two
+// manyMoreArgs, [three, four, five, six]
+ +

아래를 보면, 하나의 값만 있더라도 마지막 인수는 여전히 배열을 갖습니다.

+ +
// 위 예제와 동일한 함수 정의를 사용
+
+myFun("one", "two", "three");
+
+// a, one
+// b, two
+// manyMoreArgs, [three]
+ +

아래를 보면, 3번 째 인수가 제공되지 않더라도, "manyMoreArgs" 는 여전히 배열입니다(비어있긴하지만).

+ +
// 위 예제와 동일한 함수 정의를 사용
+
+myFun("one", "two");
+
+// a, one
+// b, two
+// manyMoreArgs, []
+ +

theArgs 가 배열이므로, length 프로퍼티를 사용해 엘리먼트의 수를 얻을 수 있습니다.

+ +
function fun1(...theArgs) {
+  console.log(theArgs.length);
+}
+
+fun1();  // 0
+fun1(5); // 1
+fun1(5, 6, 7); // 3
+ +

다음 예제에서, rest 파라미터는 첫 번째 인수 다음의 모든 인수를 배열로 모으는데 사용됩니다. 각각은 첫 번째 파라미터와 곱해져 배열로 반환됩니다.

+ +
function multiply(multiplier, ...theArgs) {
+  return theArgs.map(function(element) {
+    return multiplier * element;
+  });
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+ +

Array 메소드는 rest 파라미터에서 사용될 수 있지만, arguments 객체에서는 그렇지 않습니다.

+ +
function sortRestArgs(...theArgs) {
+  var sortedArgs = theArgs.sort();
+  return sortedArgs;
+}
+
+console.log(sortRestArgs(5, 3, 7, 1)); // 1, 3, 5, 7
+
+function sortArguments() {
+  var sortedArgs = arguments.sort();
+  return sortedArgs; // this will never happen
+}
+
+
+console.log(sortArguments(5, 3, 7, 1)); // TypeError (arguments.sort is not a function)
+ +

arguments 객체에서 Array 메소드를 사용하려면, 이를 먼저 실제 배열로 변환해야합니다.

+ +
function sortArguments() {
+  var args = Array.from(arguments);
+  var sortedArgs = args.sort();
+  return sortedArgs;
+}
+console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ES6')}}초기 정의.
{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ESDraft')}} 
+ +

브라우저 호환성

+ +

 

+ +

{{Compat("javascript.functions.rest_parameters")}}

+ +

함께 보기

+ + -- cgit v1.2.3-54-g00ecf