JavaScript에서 인수를 배열로 변환

JavaScript에서arguments개체 란?

인수는 모든 함수 내에 존재하는 객체입니다. JavaScript에서 함수에 전달하는 매개 변수가 무엇이든 해당 매개 변수는 객체 형태로이 인수 목록에 저장됩니다. 이 개체의 키는 0부터 시작하는 숫자입니다. arguments객체 내에있는 값에 액세스하려면이 키를 사용할 수 있습니다.

이arguments객체는 배열로 사용할 수 있지만forEach,sort,filter및map과 같은 JavaScript 함수는 지원하지 않습니다. 따라서 이러한 함수를 arguments 객체와 함께 사용하려면이 전체 객체를 배열로 변환해야합니다.

arguments객체는 다양한 방법으로 배열로 변환 될 수 있습니다. rest매개 변수,array.from()및array literals사용과 같은 가장 널리 사용되는 방법에 초점을 맞출 것입니다. 각각에 대해 자세히 논의하겠습니다.

JavaScript에서rest매개 변수를 사용하여arguments객체를 배열로 변환

rest매개 변수를 사용하면 함수가 가변 개수의 인수를 입력으로받을 수 있습니다. ...args로 표시됩니다. 여기에서args대신 이름을 지정할 수 있으며 세 개의 점...은 스프레드 연산자로 알려져 있습니다.

이제 매개 변수로...args를 함수에 전달할 때마다 인수 객체가 배열로 변환되고 이제args이름을 사용하여 arguments 객체에 액세스 할 수 있습니다.

function func(...args) {
  console.log(args);
  console.log(args[0]);
}

func(1, 2, 3);

출력:

[ 1, 2, 3 ]
1

이 예에서는 매개 변수1,2,3을 함수func()에 대한 인수로 전달합니다. rest연산자를 사용 했으므로 배열 형태로arguments객체를 얻습니다. 이제이 배열에서 정렬 또는 필터링과 같은 다양한 방법을 사용할 수 있습니다.

JavaScript에서Array.from()메소드를 사용하여arguments객체를 배열로 변환

인수 객체를 배열로 변환하는 또 다른 방법은Array.from()메소드를 사용하는 것입니다. 여기에서from()메소드 내에서 인수 객체를 전달하여 배열을 제공해야합니다. 결과 배열을 변수에 저장하거나이 배열 내부의 요소에 직접 액세스 할 수도 있습니다.

function func() {
  console.log(Array.from(arguments));
  console.log(Array.from(arguments)[0]);
}

func(1, 2, 3);

출력:

[ 1, 2, 3 ]
1

또한 동일한 예제를 사용했지만 유일한 차이점은rest연산자를 사용하는 대신Array.from()을 사용하고arguments객체를 전달한다는 것입니다. Array.from(arguments)[0]과 같은 배열 인덱싱을 사용하여 개별 요소에 액세스 할 수 있습니다. 이것은 배열의 첫 번째 요소를 반환합니다.

JavaScript에서Array literals를 사용하여arguments객체를 배열로 변환

배열 리터럴은 색인 번호 0으로 시작하는 0 개 이상의 요소로 구성된 목록입니다. 배열 리터럴에서 요소는 대괄호[]로 묶여 있습니다. 여기서 모든 요소는 색인 번호의 도움으로 액세스 할 수 있습니다.

function func() {
  let args = [].slice.call(arguments);

  console.log(args);
  console.log(args[2]);
}

func(1, 2, 3);

출력:

[ 1, 2, 3 ]
3

arguments 객체를 배열로 변환하기 위해 먼저 빈 배열을 가져 왔습니다. 이 배열에서call()메소드를 사용하여slice()메소드를 호출합니다. 이제slice()메소드가 전달 된 객체를 반복합니다. 이 경우arguments개체이고 개체 내부의 모든 요소를 ​​빈 배열에 추가합니다. 결국이 결과를 변수args에 저장합니다.

이제이 변수에는arguments개체가 포함하는 데 사용 된 모든 요소가 포함되어 있으므로args변수를 사용하여 적절한 색인 번호로 모든 요소에 액세스 할 수 있습니다.