[자바스크립트] 노답 디자이너의 코딩 배우기 - arguments 객체

1-1. arguments 객체는 뭐고, 왜 사용하는 거지?

---

 

자바스크립트에서 arguments 객체와 관련된 개념은 함수의 인자 관리에 매우 유용한 도구입니다.

 

arguments 객체는 자바스크립트에서 모든 함수 내에서 자동으로 생성되는 특별한 객체입니다. 이 객체는 함수가 호출될 때 전달된 **모든 인자(Arguments)**를 배열과 유사한 형태로 담고 있습니다.

 

특징:

• 배열처럼 생겼지만 배열이 아님. 즉, 배열 메서드(map, filter, forEach 등)를 사용할 수 없지만, 인덱스로 접근하고, length 프로퍼티로 인자의 개수를 확인할 수 있습니다.

• 함수 선언에서 정의한 매개변수의 개수와 상관없이 전달된 모든 인자를 담고 있습니다. 함수가 몇 개의 인자를 받을지 알 수 없을 때 유용합니다.

 

왜 사용하는가?

• 유연한 함수 구현: 함수가 몇 개의 인자를 받을지 미리 알 수 없거나, 특정 개수 이상의 인자를 받을 때 모두 처리하고 싶을 때 유용합니다.

• 매개변수보다 더 많은 인자를 전달했을 때도 모두 접근할 수 있기 때문에, 여러 개의 인자를 처리하는 함수에서 자주 사용됩니다.

 

예시:

function printArguments() {
  console.log(arguments); // 모든 전달된 인자를 담고 있는 객체
  console.log(arguments[0]); // 첫 번째 인자
  console.log(arguments[1]); // 두 번째 인자
  console.log(arguments.length); // 전달된 인자의 개수
  console.log('————');
}

printArguments('Young', 'Mark', 'Koby');
printArguments('Captain');

 

결과:

['Young', 'Mark', 'Koby']
Young
Mark
3
————
['Captain']
Captain
undefined
1
————

 

1-2. '매개변수보다 더 많은 인자를 전달했을 때도 모두 접근할 수 있기 때문에, 여러 개의 인자를 처리하는 함수에서 자주 사용됩니다.' 라고 했잖아?  무슨 소리인지 모르겠어!

---

 

자바스크립트에서는 함수가 정해진 매개변수의 개수보다 더 많은 인자를 전달받을 수 있습니다. 이때 함수 선언에서 명시된 매개변수 외에 추가로 전달된 인자는 arguments 객체를 통해 접근할 수 있어요.

 

예를 들어, 함수가 세 개의 매개변수를 받도록 선언되었는데, 네 개의 인자를 전달하면 어떻게 될까요? 함수는 arguments 객체를 사용해 추가로 전달된 인자에도 접근할 수 있습니다.

function printArguments(a, b, c) {
  console.log(a);         // 첫 번째 인자
  console.log(b);         // 두 번째 인자
  console.log(c);         // 세 번째 인자
  console.log(arguments); // 전달된 모든 인자
  console.log('————');
}

printArguments('apple', 'banana', 'cherry', 'date');

 

결과:

apple   // 첫 번째 인자 a
banana  // 두 번째 인자 b
cherry  // 세 번째 인자 c
['apple', 'banana', 'cherry', 'date']  // 전달된 모든 인자 (arguments 객체)
————

 

이 코드를 보면, 함수는 **a, b, c**라는 세 개의 매개변수를 정의했지만, 실제로는 네 개의 인자('apple', 'banana', 'cherry', 'date')를 전달했어요.

 

함수 내부에서 **a, b, c**만 접근 가능하지만, arguments 객체를 사용하면 모든 인자를 확인할 수 있습니다.

 

이렇게 arguments 객체는 매개변수 외에 추가로 전달된 인자들을 처리할 때 유용해요. 이 상황에서 자바스크립트는 추가 인자를 무시하지 않고 arguments로 저장해 줍니다.

 

더 유연한 함수 만들기 예시:

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i]; // 전달된 모든 인자를 더하기
  }
  return total;
}

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

 

이 함수는 매개변수를 정의하지 않고, 전달된 모든 인자를 arguments 객체를 통해 합산하고 있어요. 몇 개의 인자가 전달되든 상관없이 모든 인자를 처리할 수 있습니다. 이 방식은 유연하게 인자의 개수에 관계없이 동작하는 함수를 만들 수 있게 해줍니다.

 

 

2. 배열 메서드를 사용할 수 없는 유사배열이 무슨 소리야?

---

 

arguments 객체는 **배열처럼 생겼지만 배열이 아닌 “유사 배열 객체”**라고 부릅니다. 이 말의 의미는 인덱스(예: arguments[0], arguments[1] 등)와 length 속성을 가지고 있기 때문에 배열처럼 인자를 관리할 수 있지만, 실제 배열이 아니기 때문에 배열의 메서드(map, filter, forEach, slice 등)는 사용할 수 없다는 뜻입니다.

 

유사 배열 예시:

function example() {
  console.log(Array.isArray(arguments)); // false
}

example('a', 'b', 'c'); // 결과: false

하지만 배열로 변환하면 배열 메서드를 사용할 수 있습니다. **Array.from()**이나 **spread 연산자 (...)**를 이용해 arguments를 배열로 변환할 수 있습니다.

 

Array.from을 사용한 예시:

function example() {
  let argsArray = Array.from(arguments);
  console.log(argsArray.map(arg => arg.toUpperCase())); // ['A', 'B', 'C']
}

example('a', 'b', 'c');

 

spread 연산자를 사용한 예시:

function example() {
  let argsArray = [...arguments];
  console.log(argsArray.map(arg => arg.toUpperCase())); // ['A', 'B', 'C']
}

example('a', 'b', 'c');

 

3. 이 함수  { for (const arg of argments) { console.log(arg); } 의 메소드도 이해가 가지 않아.

---

 

for (const arg of arguments) {
  console.log(arg);
}

이 코드에서는 for...of 반복문을 사용하여 arguments 객체 안에 들어있는 각각의 인자를 순회하고 있습니다.

 

for...of 반복문의 의미:

• for...of는 반복 가능한(iterable) 객체에서 각 요소를 하나씩 꺼내오는 반복문입니다. 자바스크립트에서 배열, 문자열, 유사 배열 객체 등은 반복 가능한 객체로 간주됩니다.

• arguments 객체도 반복 가능한 객체 중 하나이기 때문에 **for...of**를 사용해 그 안의 인자들을 하나씩 꺼내올 수 있습니다.

 

이 코드는 무엇을 하나요?

• for (const arg of arguments)는 arguments에 담긴 인자들을 하나씩 순회합니다.

• 각 순회에서 arg 변수에 현재 인자가 할당되고, **console.log(arg)**로 해당 인자가 출력됩니다.

 

예시:

function printArguments() {
  for (const arg of arguments) {
    console.log(arg); // 전달된 인자를 하나씩 출력
  }
  console.log('————');
}

printArguments('Young', 'Mark', 'Koby');
printArguments('Captain');
printArguments('Suri', 'Jack', 'Joy', 'Noel');

 

결과:

Young
Mark
Koby
————
Captain
————
Suri
Jack
Joy
Noel
————

 

요약:

1. arguments 객체는 함수에 전달된 모든 인자를 배열과 유사한 형태로 저장하는 객체입니다. 배열처럼 인덱스로 접근할 수 있지만 배열의 메서드는 사용할 수 없습니다.

2. 유사 배열이란 배열처럼 생겼지만 배열이 아닌 객체를 말하며, 배열의 메서드 대신 인덱싱과 length 속성만 사용할 수 있는 것을 의미합니다. Array.from()이나 spread 연산자(…)를 이용해 배열로 변환할 수 있습니다.

3. for...of 반복문을 사용하여 arguments 객체를 순회하면 전달된 모든 인자를 순서대로 출력할 수 있습니다.