ES6 인수와 매개변수를 사용하는 방법

ECMAScript 6(또는 ECMAScript 2015)은 ECMAScript 표준의 최신 버전이며 JavaScript의 매개변수 처리가 크게 향상되었습니다. 이제 다른 새로운 기능 중에서 나머지 매개변수, 기본값 및 구조 분해를 사용할 수 있습니다.

이 튜토리얼에서는 인수와 매개변수를 자세히 살펴보고 ECMAScript 6이 이를 어떻게 업그레이드했는지 확인할 것입니다.

인수 대 매개변수

인수와 매개변수는 종종 같은 의미로 사용됩니다. 그럼에도 불구하고 이 튜토리얼의 목적을 위해 구별할 것입니다. 대부분의 표준에서 매개변수(또는 형식 매개변수)는 함수 선언에 제공된 것이고 인수(또는 실제 매개변수)는 함수에 전달되는 것입니다. 다음 기능을 고려하십시오.

 function foo(param1, param2) { // do something } foo(10, 20);

이 함수에서 param1 과 param2 는 함수 매개변수이고 함수에 전달되는 값( 10 및 20 )은 인수입니다.

스프레드 연산자(…)

ECMAScript 5에서 apply() 메서드는 배열을 함수에 인수로 전달하기 위한 편리한 도구입니다. 예를 들어 Math.max() 메서드와 함께 일반적으로 배열에서 가장 높은 값을 찾는 데 사용됩니다. 다음 코드 조각을 고려하십시오.

 var myArray = [5, 10, 50]; Math.max(myArray); // Error: NaN Math.max.apply(Math, myArray); // 50

Math.max() 메서드는 배열을 지원하지 않습니다. 숫자만 받아들입니다. 배열이 Math.max() 함수에 전달되면 오류가 발생합니다. 하지만 apply() 메서드를 사용하면 배열이 개별 숫자로 전송되므로 Math.max() 메서드에서 처리할 수 있습니다.

다행히 ECMAScript 6에 스프레드 연산자가 도입되면서 더 이상 apply() 메서드를 사용할 필요가 없습니다. 스프레드 연산자를 사용하면 표현식을 여러 인수로 쉽게 확장할 수 있습니다.

 var myArray = [5, 10, 50]; Math.max(...myArray); // 50

여기에서 스프레드 연산자는 myArray 를 확장하여 함수에 대한 개별 값을 생성합니다. ECMAScript 5에서 apply() 를 사용하여 스프레드 연산자를 시뮬레이션하는 것이 가능하지만 구문이 혼란스럽고 스프레드 연산자의 유연성이 부족합니다. 스프레드 연산자는 사용하기 쉬울 뿐만 아니라 더 많은 기능을 제공합니다. 예를 들어, 여러 번 사용할 수 있으며 function 호출에서 다른 인수와 혼합될 수 있습니다.

 function myFunction() { for(var i in arguments){ console.log(arguments[i]); } } var params = [10, 15]; myFunction(5, ...params, 20, ...[25]); // 5 10 15 20 25

확산 연산자의 또 다른 장점은 생성자와 함께 쉽게 사용할 수 있다는 것입니다.

 new Date(...[2016, 5, 6]); // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)

물론 ECMAScript 5에서 앞의 코드를 다시 작성할 수 있지만 유형 오류가 발생하지 않도록 복잡한 패턴을 사용해야 합니다.

 new Date.apply(null, [2016, 4, 24]); // TypeError: Date.apply is not a constructor new (Function.prototype.bind.apply(Date, [null].concat([2016, 5, 6]))); // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)

함수 호출에서 연산자 브라우저 지원 확산

데스크탑 브라우저:

모바일 브라우저:

휴식 매개변수

나머지 매개변수는 스프레드 연산자와 구문이 동일하지만 배열을 매개변수로 확장하는 대신 매개변수를 수집하여 배열로 변환합니다.

 function myFunction(...options) { return options; } myFunction('a', 'b', 'c'); // ["a", "b", "c"]

인수가 없으면 나머지 매개변수는 빈 배열로 설정됩니다.

 function myFunction(...options) { return options; } myFunction(); // []

rest 매개변수는 가변 함수(가변 수의 인수를 허용하는 함수)를 생성할 때 특히 유용합니다. 배열이라는 이점이 있기 때문에 나머지 매개변수는 arguments 객체를 쉽게 대체할 수 있습니다(이 자습서의 뒷부분에서 설명함). ECMAScript 5로 작성된 이 함수를 고려하십시오.

 function checkSubstrings(string) { for (var i = 1; i < arguments.length; i++) { if (string.indexOf(arguments[i]) === -1) { return false; } } return true; } checkSubstrings('this is a string', 'is', 'this'); // true

이 함수는 문자열에 여러 하위 문자열이 포함되어 있는지 확인합니다. 이 함수의 첫 번째 문제는 여러 인수를 취하는지 확인하기 위해 function 의 본문 내부를 살펴봐야 한다는 것입니다. 두 번째 문제는 arguments[0] 이 첫 번째 인수를 가리키기 때문에 반복이 0 대신 1 부터 시작해야 한다는 것입니다. 나중에 문자열 앞이나 뒤에 다른 매개변수를 추가하기로 결정하면 루프 업데이트를 잊어버릴 수 있습니다. 나머지 매개변수를 사용하면 다음과 같은 문제를 쉽게 피할 수 있습니다.

 function checkSubstrings(string, ...keys) { for (var key of keys) { if (string.indexOf(key) === -1) { return false; } } return true; } checkSubstrings('this is a string', 'is', 'this'); // true

이 함수의 출력은 이전과 동일합니다. 여기서도 매개변수 string 은 먼저 전달된 인수로 채워지지만 나머지 인수는 배열에 넣고 변수 keys 에 할당됩니다.

arguments 객체 대신 rest 매개변수를 사용하면 코드의 가독성이 향상되고 JavaScript의 최적화 문제가 방지됩니다. 그럼에도 불구하고 나머지 매개변수에 제한이 없는 것은 아닙니다. 예를 들어, 마지막 인수여야 합니다. 그렇지 않으면 구문 오류가 발생합니다.

 function logArguments(a, ...params, b) { console.log(a, params, b); } logArguments(5, 10, 15); // SyntaxError: parameter after rest parameter

또 다른 제한은 function 선언에서 하나의 나머지 매개변수만 허용된다는 것입니다.

 function logArguments(...param1, ...param2) { } logArguments(5, 10, 15); // SyntaxError: parameter after rest parameter

나머지 매개변수 브라우저 지원

데스크탑 브라우저:

모바일 브라우저:

기본 매개변수

ECMAScript 5의 기본 매개변수

JavaScript는 ECMAScript 5에서 기본 매개변수를 지원하지 않지만 쉬운 해결 방법이 있습니다. 함수 내에서 논리적 OR 연산자( || )를 사용하여 ECMAScript 5에서 기본 매개변수를 쉽게 시뮬레이션할 수 있습니다. 다음 함수를 고려하십시오.

 function foo(param1, param2) { param1 = param1 || 10; param2 = param2 || 10; console.log(param1, param2); } foo(5, 5); // 5 5 foo(5); // 5 10 foo(); // 10 10

이 함수는 두 개의 인수를 예상하지만 인수 없이 호출될 경우 기본값을 사용합니다. 함수 내에서 누락된 인수는 자동으로 정의되지 않음으로 설정됩니다. 따라서 이러한 인수를 감지하고 기본값을 선언할 수 있습니다. 누락된 인수를 감지하고 기본값을 설정하기 위해 논리 OR 연산자( || )를 사용합니다. 이 연산자는 첫 번째 인수를 검사합니다. true이면 연산자를 반환합니다. 그렇지 않은 경우 연산자는 두 번째 인수를 반환합니다.

이 접근 방식은 일반적으로 함수에서 사용되지만 결함이 있습니다. 0 또는 null 을 전달하면 거짓 값으로 간주되기 때문에 기본값도 트리거됩니다. 따라서 이 함수에 실제로 0 또는 null 을 전달해야 하는 경우 인수가 누락되었는지 여부를 확인하는 대체 방법이 필요합니다.

 function foo(param1, param2) { if(param1 === undefined){ param1 = 10; } if(param2 === undefined){ param2 = 10; } console.log(param1, param2); } foo(0, null); // 0, null foo(); // 10, 10

이 함수 내에서 전달된 인수의 유형은 기본값이 할당되기 전에 정의되지 않았는지 확인합니다. 이 접근 방식에는 코드가 조금 더 필요하지만 더 안전한 대안이며 함수에 0 과 null 을 전달할 수 있습니다.

ECMAScript 6의 기본 매개변수

ECMAScript 6을 사용하면 더 이상 기본 매개변수를 시뮬레이션하기 위해 정의되지 않은 값을 확인할 필요가 없습니다. 이제 function 선언에 기본값을 넣을 수 있습니다.

 function foo(a = 10, b = 10) { console.log(a, b); } foo(5); // 5 10 foo(0, null); // 0 null

보시다시피 인수를 생략하면 기본값이 트리거되지만 0 또는 null 을 전달하면 트리거되지 않습니다. 함수를 사용하여 기본 매개변수의 값을 검색할 수도 있습니다.

 function getParam() { alert("getParam was called"); return 3; } function multiply(param1, param2 = getParam()) { return param1 * param2; } multiply(2, 5); // 10 multiply(2); // 6 (also displays an alert dialog)

getParam 함수는 두 번째 인수가 생략된 경우에만 호출됩니다. 따라서 두 개의 매개변수를 사용하여 multiply() 함수를 호출하면 경고가 표시되지 않습니다.

기본 매개변수의 또 다른 흥미로운 기능은 function 선언에서 다른 매개변수와 변수를 참조할 수 있다는 것입니다.

 function myFunction(a=10, b=a) { console.log('a = ' + a + '; b = ' + b); } myFunction(); // a=10; b=10 myFunction(22); // a=22; b=22 myFunction(2, 4); // a=2; b=4

function 선언에서 작업을 수행할 수도 있습니다.

 function myFunction(a, b = ++a, c = a*b) { console.log(c); } myFunction(5); // 36

다른 언어와 달리 JavaScript는 호출 시 기본 매개변수를 평가합니다.

 function add(value, array = []) { array.push(value); return array; } add(5); // [5] add(6); // [6], not [5, 6]

기본 매개변수 브라우저 지원

데스크탑 브라우저:

모바일 브라우저:

구조화

Destructuring은 배열과 객체에서 값을 추출하고 객체 및 배열 리터럴과 유사한 구문을 사용하여 변수에 할당할 수 있게 해주는 ECMAScript 6의 새로운 기능입니다. 구문은 명확하고 이해하기 쉬우며 함수에 인수를 전달할 때 특히 유용합니다.

ECMAScript 5에서 구성 객체는 특히 속성의 순서가 중요하지 않은 경우 많은 수의 선택적 매개변수를 처리하는 데 자주 사용됩니다. 다음 기능을 고려하십시오.

 function initiateTransfer(options) { var protocol = options.protocol, port = options.port, delay = options.delay, retries = options.retries, timeout = options.timeout, log = options.log; // code to initiate transfer } options = { protocol: 'http', port: 800, delay: 150, retries: 10, timeout: 500, log: true }; initiateTransfer(options);

이 패턴은 JavaScript 개발자가 일반적으로 사용하며 잘 작동하지만 function 본문 내부에서 예상되는 매개변수를 확인해야 합니다. 구조화되지 않은 매개변수를 사용하면 function 선언에서 매개변수를 명확하게 나타낼 수 있습니다.

 function initiateTransfer({protocol, port, delay, retries, timeout, log}) { // code to initiate transfer }; var options = { protocol: 'http', port: 800, delay: 150, retries: 10, timeout: 500, log: true } initiateTransfer(options);

이 함수에서는 구성 객체 대신 객체 구조화 패턴을 사용했습니다. 이것은 우리의 기능을 더 간결할 뿐만 아니라 읽기 쉽게 만듭니다.

비구조화된 매개변수를 일반 매개변수와 결합할 수도 있습니다.

 function initiateTransfer(param1, {protocol, port, delay, retries, timeout, log}) { // code to initiate transfer } initiateTransfer('some value', options);

function 호출에서 매개변수가 생략되면 유형 오류가 발생합니다.

 function initiateTransfer({protocol, port, delay, retries, timeout, log}) { // code to initiate transfer } initiateTransfer(); // TypeError: Cannot match against 'undefined' or 'null'

이것은 필수 매개변수가 필요할 때 원하는 동작이지만 매개변수를 선택사항으로 하려면 어떻게 해야 할까요? 매개변수가 누락되었을 때 이 오류를 방지하려면 구조화되지 않은 매개변수에 기본값을 할당해야 합니다.

 function initiateTransfer({protocol, port, delay, retries, timeout, log} = {}) { // code to initiate transfer } initiateTransfer(); // no error

이 함수에서 비구조화된 매개변수의 기본값으로 빈 객체가 제공됩니다. 이제 매개변수 없이 이 함수를 호출하면 오류가 발생하지 않습니다.

또한 구조화되지 않은 각 매개변수에 기본값을 할당할 수 있습니다.

 function initiateTransfer({ protocol = 'http', port = 800, delay = 150, retries = 10, timeout = 500, log = true }) { // code to initiate transfer }

이 예에서 모든 속성에는 기본 매개변수가 있으므로 정의되지 않은 매개변수를 수동으로 확인하고 function 본문 내부에 기본값을 할당할 필요가 없습니다.

브라우저 지원 분해

데스크탑 브라우저:

모바일 브라우저:

인수 전달

함수에 인수를 전달하는 방법에는 참조 또는 값의 두 가지가 있습니다. 참조로 전달된 인수를 수정하면 전역적으로 반영되지만 값으로 전달된 인수를 수정하면 함수 내부에만 반영됩니다.

Visual Basic 및 PowerShell과 같은 일부 언어에서는 인수를 참조로 전달할지 아니면 값으로 전달할지를 지정하는 옵션이 있지만 JavaScript에서는 그렇지 않습니다.

값으로 인수 전달

기술적으로 JavaScript는 값으로만 ​​전달할 수 있습니다. 값으로 함수에 인수를 전달하면 해당 값의 복사본이 function 범위 내에서 생성됩니다. 따라서 값에 대한 변경 사항은 function 내부에만 반영됩니다. 다음 예를 고려하십시오.

 var a = 5; function increment(a) { a = ++a; console.log(a); } increment(a); // 6 console.log(a); // 5

여기서 함수 내부의 인수를 수정해도 원래 값에는 영향을 미치지 않습니다. 따라서 변수가 함수 외부에서 기록될 때 인쇄된 값은 여전히 5 입니다.

참조로 인수 전달

JavaScript에서는 모든 것이 값으로 전달되지만 객체(배열 포함)를 참조하는 변수를 전달할 때 "값"은 객체에 대한 참조이며 변수가 참조하는 객체의 속성을 변경하면 기본 개체.

다음 기능을 고려하십시오.

 function foo(param){ param.bar = 'new value'; } obj = { bar : 'value' } console.log(obj.bar); // value foo(obj); console.log(obj.bar); // new value

보시다시피 객체의 속성은 함수 내부에서 수정되지만 수정된 값은 함수 외부에서 볼 수 있습니다.

배열이나 객체와 같은 원시가 아닌 값을 전달할 때 장면 뒤에서 메모리에서 원래 객체의 위치를 ​​가리키는 변수가 생성됩니다. 그런 다음 이 변수는 함수에 전달되고 수정하면 원래 개체에 영향을 줍니다.

유형 검사 및 누락 또는 추가 매개변수

강력한 형식의 언어에서는 function 선언에서 매개변수의 형식을 지정해야 하지만 JavaScript에는 이 기능이 없습니다. JavaScript에서 데이터의 유형이나 함수에 전달하는 인수의 수는 중요하지 않습니다.

하나의 인수만 받는 함수가 있다고 가정합니다. 해당 함수를 호출할 때 함수에 하나의 인수만 전달하도록 제한되지 않습니다. 우리는 하나, 둘 또는 그 이상의 인수를 자유롭게 전달할 수 있습니다! 아무 것도 전달하지 않을 수도 있으며 오류가 발생하지 않습니다.

인수 및 매개변수의 수는 두 가지 방식으로 다를 수 있습니다.

• 매개변수보다 적은 인수 .
  누락된 매개변수는 undefined 와 같습니다.
• 매개변수보다 인수가 더 많습니다 .
  추가 매개변수는 무시되지만 특별한 배열과 같은 변수 인수를 통해 검색할 수 있습니다(다음에 설명됨).

필수 인수

function 호출에 인수가 없으면 undefined 로 설정됩니다. 이 동작을 이용하고 인수가 생략되면 오류를 던질 수 있습니다.

 function foo(mandatory, optional) { if (mandatory === undefined) { throw new Error('Missing parameter: mandatory'); } }

ECMAScript 6에서는 이것을 더 발전시키고 기본 매개변수를 사용하여 필수 인수를 설정할 수 있습니다.

 function throwError() { throw new Error('Missing parameter'); } function foo(param1 = throwError(), param2 = throwError()) { // do something } foo(10, 20); // ok foo(10); // Error: missing parameter

인수 개체

나머지 매개변수에 대한 지원은 arguments 객체를 대체할 의도로 ECMAScript 4에 추가되었지만 ECMAScript 4는 결코 결실을 맺지 못했습니다. ECMAScript 6이 출시되면서 JavaScript는 이제 나머지 매개변수를 공식적으로 지원합니다. 또한 arguments 개체에 대한 지원을 중단할 계획을 폐기했습니다.

arguments 객체는 모든 함수 내에서 사용할 수 있는 배열과 유사한 객체입니다. 함수에 전달된 argument 의 값을 이름이 아닌 숫자로 검색할 수 있습니다. 객체를 사용하면 함수에 원하는 수의 인수를 전달할 수 있습니다. 다음 코드 조각을 고려하십시오.

 function checkParams(param1) { console.log(param1); // 2 console.log(arguments[0], arguments[1]); // 2 3 console.log(param1 + arguments[0]); // 2 + 2 } checkParams(2, 3);

이 함수는 하나의 인수만 받을 것으로 예상합니다. 두 개의 인수로 호출할 때 첫 번째 인수는 매개변수 이름 param1 또는 arguments 객체 arguments[0] 로 함수에서 액세스할 수 있지만 두 번째 인수는 arguments[1] 로만 액세스할 수 있습니다. 또한 arguments 객체는 명명된 인수와 함께 사용할 수 있습니다.

arguments 객체는 함수에 전달된 각 인수에 대한 항목을 포함하고 첫 번째 항목의 인덱스는 0 에서 시작합니다. 위의 예에서 더 많은 인수에 액세스하려면 arguments[2] , arguments[3] 등을 작성합니다.

명명된 매개변수 설정을 건너뛰고 arguments 객체만 사용할 수도 있습니다.

 function checkParams() { console.log(arguments[1], arguments[0], arguments[2]); } checkParams(2, 4, 6); // 4 2 6

사실, 명명된 매개변수는 필수가 아니라 편의입니다. 마찬가지로 나머지 매개변수를 사용하여 전달된 인수를 반영할 수 있습니다.

 function checkParams(...params) { console.log(params[1], params[0], params[2]); // 4 2 6 console.log(arguments[1], arguments[0], arguments[2]); // 4 2 6 } checkParams(2, 4, 6);

arguments 객체는 배열과 유사한 객체이지만 slice() 및 foreach() ) 와 같은 배열 메서드가 없습니다. arguments 객체에서 배열 메서드를 사용하려면 먼저 객체를 실제 배열로 변환해야 합니다.

 function sort() { var a = Array.prototype.slice.call(arguments); return a.sort(); } sort(40, 20, 50, 30); // [20, 30, 40, 50]

이 함수에서 Array.prototype.slice.call() 은 arguments 객체를 배열로 변환하는 빠른 방법으로 사용됩니다. 다음으로, sort() 메서드는 배열의 항목을 정렬하고 반환합니다.

ECMAScript 6에는 훨씬 더 간단한 방법이 있습니다. ECMAScript 6에 새로 추가된 Array.from() 은 배열과 유사한 객체에서 새 배열을 생성합니다.

 function sort() { var a = Array.from(arguments); return a.sort(); } sort(40, 20, 50, 30); // [20, 30, 40, 50]

길이 속성

arguments 객체는 기술적으로 배열은 아니지만 함수에 전달된 인수의 수를 확인하는 데 사용할 수 있는 length 속성이 있습니다.

 function countArguments() { console.log(arguments.length); } countArguments(); // 0 countArguments(10, null, "string"); // 3

length 속성을 사용하면 함수에 전달되는 인수의 수를 더 잘 제어할 수 있습니다. 예를 들어, 함수가 작동하는 데 두 개의 인수가 필요한 경우 length 속성을 사용하여 전달된 인수의 수를 확인하고 예상보다 적으면 오류를 던질 수 있습니다.

 function foo(param1, param2) { if (arguments.length < 2) { throw new Error("This function expects at least two arguments"); } else if (arguments.length === 2) { // do something } }

나머지 매개변수는 배열이므로 length 속성이 있습니다. ECMAScript 6에서 앞의 코드는 나머지 매개변수를 사용하여 다시 작성할 수 있습니다.

 function foo(...params) { if (params.length < 2) { throw new Error("This function expects at least two arguments"); } else if (params.length === 2) { // do something } }

수신자 및 호출자 속성

callee 속성은 현재 실행 중인 함수를 가리키고 caller 는 현재 실행 중인 함수를 호출한 함수를 나타냅니다. ECMAScript 5 엄격 모드에서 이러한 속성은 더 이상 사용되지 않으며 이러한 속성에 액세스하려고 하면 TypeError가 발생합니다.

arguments.callee 속성은 재귀 함수(재귀 함수는 이름으로 자신을 참조하는 일반 함수임), 특히 함수 이름을 사용할 수 없는 경우(익명 함수)에 유용합니다. 익명 함수에는 이름이 없기 때문에 이를 참조하는 유일한 방법은 arguments.callee 를 사용하는 것입니다.

 var result = (function(n) { if (n <= 1) { return 1; } else { return n * arguments.callee(n - 1); } })(4); // 24

Strict 및 Non-Strict 모드의 인수 개체

ECMAScript 5 non-strict 모드에서 arguments 객체에는 특이한 기능이 있습니다. 즉, 해당 값을 해당 명명된 매개변수의 값과 동기화된 상태로 유지합니다.

다음 코드 조각을 고려하십시오.

 function foo(param) { console.log(param === arguments[0]); // true arguments[0] = 500; console.log(param === arguments[0]); // true return param } foo(200); // 500

이 함수 내에서 새 값이 arguments[0] 에 할당됩니다. arguments 의 값은 항상 명명된 매개변수의 값과 동기화 상태를 유지하기 때문에 arguments arguments[0] 을 변경하면 param 의 값도 변경됩니다. 사실, 그것들은 같은 변수에 대한 두 개의 다른 이름과 같습니다. ECMAScript 5 엄격 모드에서는 arguments 객체의 이 혼란스러운 동작이 제거되었습니다.

 "use strict"; function foo(param) { console.log(param === arguments[0]); // true arguments[0] = 500; console.log(param === arguments[0]); // false return param } foo(200); // 200

이번에는 arguments[0] 을 변경해도 param 에 영향을 주지 않으며 예상대로 출력됩니다. ECMAScript 6에서 이 함수의 출력은 ECMAScript 5 엄격 모드에서와 동일하지만 function 선언에서 기본값을 사용할 때 arguments 객체는 영향을 받지 않습니다.

 function foo(param1, param2 = 10, param3 = 20) { console.log(param1 === arguments[0]); // true console.log(param2 === arguments[1]); // true console.log(param3 === arguments[2]); // false console.log(arguments[2]); // undefined console.log(param3); // 20 } foo('string1', 'string2');

이 함수에서 param3 에는 기본값이 있지만 두 개의 인수만 함수에 전달되기 때문에 arguments[2] 와 같지 않습니다. 즉, 기본값을 설정해도 arguments 객체에는 영향을 미치지 않습니다.

결론

ECMAScript 6은 JavaScript에 수백 가지 크고 작은 개선 사항을 가져왔습니다. 점점 더 많은 개발자들이 ECMAScript 6 기능을 사용하고 있으며 곧 이러한 기능을 피할 수 없게 될 것입니다. 이 튜토리얼에서 우리는 ECMAScript 6이 JavaScript에서 매개변수 처리를 어떻게 업그레이드했는지 배웠지만 ECMAScript 6의 표면만 긁었습니다. 언어의 다른 많은 새롭고 흥미로운 기능을 확인할 가치가 있습니다.

연결

• ECMAScript 6 호환성 표, Juriy Zaytsev
• "ECMAScript 2015 언어 사양", ECMA International