[JS] arguments 객체 그리고 유사배열 객체
[JS] arguments 객체 그리고 유사배열 객체
arguments 객체란?
자바스크립트에서 함수를 호출 할 때,
함수에서 인자를 받기로 정해둔 형태로 인자를 넘기지 않아도 에러를 발생시키지 않는다.
function sum(x, y) {
console.log(x, y);
return x + y;
}
sum(); // undefined undefined
sum(1); // 1 undefined
sum(1, 2); // 1 2
sum(1, 2, 3); // 1 2
sum(1, 2, 3, 4); // 1 2
1. 필요 인자 보다 적은 수의 인자가 전달되었을 때 : sum(), sum(1)
⇒ 값이 주어지지 않은 인자에는 undefined 가 할당된다.
2. 필요 인자 보다 많은 인자가 전달되었을 때 : sum(1, 2, 3) / sum(1, 2, 3, 4)
⇒ 초과된 인자는 무시된다
arguments 객체가 필요한 경우
C, Java 와 같은 strict 한 언어와 달리 에러를 발생시키지 않기 때문에
함수 내부에서 주어진 인자의 개수를 체크하고 처리가 필요한 경우가 있다.
이럴 때 사용되는 게 arguments 객체 이다.
arguments 객체는 유사 배열 객체 이다
함수를 호출할 때, 인수들과 함께 암묵적으로 arguments 객체가 함수 내부로 전달된다.
arguments 객체는 인자들이 배열 형태로 저장된 형태를 띄고 있다.
즉, arguments 객체는 실제 배열이 아니라 유사 배열 객체 이다.
function sum(x, y) {
console.dir(arguments);
return x + y;
}
sum();
sum(1);
sum(1, 2);
sum(1, 2, 3);
sum(1, 2, 3, 4);
위 코드에서 arguments 객체를 cosnole에 찍어보면
- arguments : 배열의 형태를 띈 객체 > 유사배열 객체이다.
- arguments.callee : 현재 실행 중인 함수 를 가리킨다.
- arguments.length : 함수에 전달된 인수의 개수를 가리킨다.
arguments 활용법
// 인덱스로 접근 가능
arguments[0]
arguments[2]
// 각 인수를 설정 혹은 재할당 가능
arguments[1] = 'changed value';
// 유사 배열 객체인 arguemnts 를 Array 로 변환 가능
var args = Array.prototype.slice.call(arguments);
// 혹은 프로토타입 체이닝을 이용
var args = [].slice.call(arguments)
// 혹은 ES2015 방법들
var args = Array.from(arguments);
var args = [...arguments];
유사 배열 객체란?
Array 객체의 length 프로퍼티처럼, 객체에도 length 프로퍼티가 있다면?
js에서는 length 프로퍼티를 가진 객체를 유사 배열 객체(array-like objects) 라고 부른다.
유사배열 객체의 가장 큰 특징은 객체 임에도 표준 배열 메서드를 사용 가능하다
예제로 살펴보자.
var obj = {
id: 'banana',
length: 1
};
obj.push('peach'); // error
// apply 메서드를 이용하여 push 사용
Array.prototype.push.apply(obj, ['apple']);
console.log(obj); // { 1: 'apple', id: 'banana', length: 2 }
- arr는 표준 배열 메서드인 push() 를 호출했을 때, 요소를 추가하는 것이 가능
- obj는 당연히 배열이 아니므로 push() 호출할 수 없으므로 에러 발생
하지만 obj는 length 프로퍼티를 가진 유사 배열 객체 이다.
유사 배열 객체의 경우 apply 메서드 를 이용하여 표준 배열 메서드를 사용하는 것이 가능하다.
'프로그래밍 > JAVASCRIPT 사전' 카테고리의 다른 글
[JS] 화살표 함수, 쉽고 빠르게 정리하기 (8) | 2021.05.11 |
---|---|
[YOU DON'T KNOW JS 정리] THIS (1) (4) | 2021.05.08 |
[JS] 문법정리 > 확실한 프로토타입 체이닝 정리 (0) | 2020.12.29 |
[JS] 문법 정리 > 함수: 선언, 호이스팅, 일급 객체 (0) | 2020.12.20 |
[JS] 문법정리 > 타입과 변수 (0) | 2020.12.09 |
댓글
이 글 공유하기
다른 글
-
[JS] 화살표 함수, 쉽고 빠르게 정리하기
[JS] 화살표 함수, 쉽고 빠르게 정리하기
2021.05.11 -
[YOU DON'T KNOW JS 정리] THIS (1)
[YOU DON'T KNOW JS 정리] THIS (1)
2021.05.08 -
[JS] 문법정리 > 확실한 프로토타입 체이닝 정리
[JS] 문법정리 > 확실한 프로토타입 체이닝 정리
2020.12.29 -
[JS] 문법 정리 > 함수: 선언, 호이스팅, 일급 객체
[JS] 문법 정리 > 함수: 선언, 호이스팅, 일급 객체
2020.12.20