(JS) Array.prototype.slice.call(arguments)

호두파파·2021년 2월 28일
0

호두파파 JS 스터디

목록 보기
19/27

call()은 상위 context를 변경하는 메서드이고
arguments는 함수의 매개변수에 접근할 수 있는 속성이다.

Array.prototype.slice.call(arguments)란 이 코드가 존재하는 함수의 매개변수로 넘어온 값들을 array로 변환하겠다는 뜻이다.

function func(a,b)에서 a와 b를 arguments[0]과 arguments[1]로 접근가능하다. 하지만, arguments는 array가 아니며 object임을 알아야 한다.

그러므로 array로 변환할 필요가 있을 경우 Array.prototype.slice.call(arguments)를 사용하는 것이다.

이 코드는 보통 아래와 같이 apply와 함께 사용된다.

let args = Arrays.prototype.slice.cal(arguments);
func.apply(this, args);

apply는 call과 같이 상위 context를 변경해준다. 차이점은 매개변수를 넘겨주는 2번째 인자가 Array라는 점이다. Array에 담긴 순서에 맞게 호출도니 함수(func)의 매개변수에 적용된다.

Array.prototype.slice.call(arguments)

이 코드의 결과만 보면 아래와 같다.
[arguments].slice();
call()의 첫번째 인자에 arguments가 전달되므로 Array의 context는 arguments로 대체되기 때문이다.


가장 흔한 리스트

자바스크립트에서 가장 흔하게 접하는 리스트는 바로 arguments 객체이다.

function test() {
  alert(arguments[0] + ''+arguments[1]);
}
test('a','b');; // a, b 출력

arguments는 자바스크립트에서 일단 함수가 호출되면, 전달한 인자를 이용해 생성하는 리스트이다. 따라서 배열과는 다르지만 숫자로 된 키에 인자들이 순서대로 들어있고 무엇보다 length라는 속성이 존재한다.
따라서 아래와 같이 전달된 인자 중에 일부만 추출하기 위해 slice를 사용할 수 있다.

function test() {
  alert( Array.prototype.slice.call(arguments, 1));
}
test( 0, 1, 2, 3 ); // 1,2,3 출력

리스트와 Array.prototype의 호환성

일단 Array에서 제공하는 함수는 자신을 변환시키는 함수와 별도의 결과를 출력하는 함수로 나눌 수 있다. 자신을 변화시키는 함수의 경우 본인의 길이도 변하고 요소들의 인덱스도 변화하는 등 배열 고유의 구조에 대한 접근이 필요하다. 따라서 아래 함수군은 리스트가 빌려쓸 수 없다.

  • Array.prototype.unshift;
  • Array.prototype.shift;
  • Array.prototype.pop;
  • Array.prototype.push;
  • Array.prototype.splice;
  • Array.prototype.sort;

위의 함수는 배열 자체를 변화시키기 때문에 진짜 배열이 아니면 작동하지 않는다. 하지만 아래와 같은 함수들은 새로운 객체를 결과로 반환하기 때문에 가능하다.

  • Array.prototype.concat;
  • Array.prototype.slice;
  • Array.prototype.join;
  • Array.prototype.indexOf;

참조

Array.prototype 사용하기

profile
안녕하세요 주니어 프론트엔드 개발자 양윤성입니다.

0개의 댓글