JavaScript에서 인수를 배열로 변환

1. JavaScript에서arguments개체 란?
2. JavaScript에서rest매개 변수를 사용하여arguments객체를 배열로 변환
3. JavaScript에서Array.from()메소드를 사용하여arguments객체를 배열로 변환
4. JavaScript에서Array literals를 사용하여arguments객체를 배열로 변환

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변수를 사용하여 적절한 색인 번호로 모든 요소에 액세스 할 수 있습니다.