[Javascript] arguments 객체

arguments란?

• 모든 함수에서 이용 가능한 지역 변수
• arguments 객체를 사용해 함수 내에서 모든 인수를 참조 가능
• 호출할 때 제공한 인수 각각에 대한 항목을 갖고 있음
• 항목의 인덱스는 0부터 시작

배열의 형태처럼 숫자로 인덱싱된 프로퍼티가 있는 객체 (유사 배열 객체라고 칭하겠음)

함수를 호출할 때 인수들과 함께 암묵적으로 함수 내부로 전달된 인자들이 배열 형태로 저장된 객체로 볼 수 있음

구성

• 함수 호출 시 넘겨진 인자(배열 형태) : 첫 번째 인자는 0, ... n-1번 인덱스
• length 프로퍼티 : 호출 시 넘겨진 인자의 개수
• callee 프로퍼티 : 현재 실행중인 함수의 참조값

배열과 유사하게 동작하나, 배열은 아니기 때문에 배열 메서드 사용 시 에러 발생

사용

자바스크립트에서는 함수를 호출할 때 함수 형식에 맟춰 인자를 넘기지 않아도 에러 발생 X

• 정의된 인자보다 적게 함수를 호출한 경우, 넘겨주지 않은 인자에는 undefined 할당
• 정의된 인자보다 많게 함수를 호출한 경우, 에러가 발생 X & 초과된 인수는 무시

function func(arg1, arg2) { 
	console.log(arg1, arg2); 
} 

func(); // undefined undefined 
func(1); // 1 undefined 
func(1, 2); // 1 2 
func(1, 2, 3); // 1 2

이런 특성 때문에 함수 코드 작성할 때, 런타임 시 호출된 인자의 개수를 확인하고 이에 따라 동작을 달리 할 수 있다.

(c언어의 main 함수에서 int argc와 char argv가 매개변수로 구성되는 것과 비슷한 듯)

접근

// 인수의 개수가 3개인 경우
arguments[0]
arguments[1]
arguments[2]

인수 설정 및 재할당

arguments[1] = 'new value';

Array로 변환

Array와 비슷하지만, length 빼고는 pop()과 같은 Array 속성이 없음

// Array 변환
var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);

// Array 변환을 위해 Array.from() 메서드 또는 전개 연산자 사용
var args = Array.from(arguments);
var args = [...arguments];

속성

arguments.callee

 : 현재 실행 중인 함수를 가리킴

arguments.caller

 : 현재 실행 중인 함수를 호출한 함수를 가리킴

arguments.length

 : 함수에 전달된 인수의 수를 가리킴

arguments[@@iterator]

 : arguments의 각 인덱스 값을 포함하는 새로운 Array Iterator 객체를 반환

활용

• 매개변수 개수가 가변적인 함수 구현
• 전달된 인자의 개수에 따라 다른 처리를 해야 하는 함수 구현

수를 더해주는 함수

function sum() { 
	var result = 0; 

	for(var i = 0; i < arguments.length; ++i) { 
		result += arguments[i]; 
	} 

	return result; 
} 

console.log(sum(1, 2, 3)); // 6 
console.log(sum(1, 2, 3, 4, 5, 6, 7)); // 28

여러 문자열을 연결해주는 함수

function myConcat(separator) {
  var args = Array.prototype.slice.call(arguments, 1);
  return args.join(separator);
}

// "red, orange, blue" 반환
myConcat(", ", "red", "orange", "blue");

// "elephant; giraffe; lion; cheetah" 반환
myConcat("; ", "elephant", "giraffe", "lion", "cheetah");

// "sage. basil. oregano. pepper. parsley" 반환
myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");

HTML 리스트를 만드는 함수

function list(type) {
  var result = "<" + type + "l><li>";
  var args = Array.prototype.slice.call(arguments, 1);
  result += args.join("</li><li>");
  result += "</li></" + type + "l>"; // end list

  return result;
}

// 표시된 유형의 리스트에 항목으로 각 인수를 추가
var listHTML = list("u", "One", "Two", "Three");

/* listHTML은:
"<ul><li>One</li><li>Two</li><li>Three</li></ul>"
*/

참고 사이트

arguments 객체 - JavaScript | MDN

소년코딩의 자바스크립트 강좌 18. arguments 객체