Languages/Java Script

[Js] arguments | 배열 | javascript 배열 | 매개변수

해당 포스팅은 "생활코딩"의 이고잉 님의 강의를 기반으로 올린 게시글 입니다.

상업적인 용도가 아닌, 개인 공부 정리 목적으로 올리는 글임을 미리 알립니다.

arguments

배열과 비슷하지만 배열이 아니다, 함수에는 arguments라는 변수에 담긴 숨겨진 유사 배열이 있다.

이 배열에는 함수를 호출할 때 입력한 인자가 담겨있다.

아래 예제를 보자. 결과는 10이다.

<!DOCTYPE html>
<html>
<head>
	<title>클로저</title>
</head>
<body>
<script type="text/javascript">
	function sum(){
		var i, _sum = 0;
		for(i = 0; i<arguments.length; i++){
			document.write('number : '+i+', value : '+arguments[i]+'<br />');
			_sum += arguments[i];
		}
		return _sum;
	}
	document.write('result : ' + sum(1,2,3,4));
</script>
</body>
</html>

자바스크립트는 매우 관대한 언어이기 때문에, 인자의 수를 마음대로 지정해도 에러가 나지 않는다.

위 예시를 살펴보면 sum()에 매개변수가 없는데, 인자의 수가 4개이다. 이러한 경우에도 에러가 나지 않는다.

위 코드에 arguments라는 것은 자바스크립트에서 약속된 특수한 변수이다. 이 변수 안에는 유사 객체(유사 배열)이 담겨져 있다.

이 배열의 역할은 사용자가 전달한 인자가 들어가게 된다.

즉 사용자가 전달한 인자의 접근이 가능할 수 있는 기능을 제공한다.

▼ 자세히 알아보기.

함수 sum은 인자로 전달된 값을 모두 더해서 리턴하는 함수다.

그런데 함수 sum은 인자에 대한 정의가 없다.

하지만 마지막 라인에서는 4개의 인자를 함수 sum으로 전달하고 있다.

함수의 정의부분에서 인자에 대한 구현이 없음에도 인자를 전달이 어떻게 가능한 것일까?

그것은 arguments라는 특수한 배열이 있기 때문이다. arguments는 함수안에서 사용할 수 있도록 그 이름이나 특성이 약속되어 있는 일종의 배열이다. arguments[0]은 함수로 전달된 첫번째 인자를 알아낼 수 있다.

또 arguments.length를 이용해서 함수로 전달된 인자의 개수를 알아낼 수도 있다. 이러한 특성에 반복문을 결합하면 함수로 전달된 인자의 값을 순차적으로 가져올 수 있다. 그 값을 더해서 리턴하면 인자로 전달된 값에 대한 총합을 구하는 함수를 만들 수 있다.

arguments는 사실 배열은 아니다. 실제로는 arguments 객체의 인스턴스다.

매개변수의 수

매개변수와 관련된 두가지 수가 있다.

하나는 함수.length, 다른 하나는 arguments.length이다.

arguments.length는 함수로 전달된 실제 인자의 수를 의미하고, 함수.length는 함수에 정의된 인자의 수를 의미한다.

argument.length는 실제로 어떠한 함수로 유입된 인자의 숫자가 몇개인지 알아내는 것이고,
그 함수가 몇개의 인자를 명시적으로 정의하고 있는지는 알 수 없다.

아래의 코드를 보자.

<script>
      function zero(){
          console.log(
              'zero.length', zero.length,
              'arguments', arguments.length
          );
      }
      function one(arg1){
          console.log(
              'one.length', one.length,
              'arguments', arguments.length
          );
      }
      function two(arg1, arg2){
          console.log(
              'two.length', two.length,
              'arguments', arguments.length
          );
      }
      zero(); // zero.length 0 arguments 0 
      one('val1', 'val2');  // one.length 1 arguments 2 
      two('val1');  // two.length 2 arguments 1
</script>

위 예시에서 중요한 부분은 one()를 호출하는 부분이다.

one.length로 출력을 하면 그 값은 1이고, arguments.length의 값은 2가 되는데 이유는 아래와 같다.

one.length 즉 함수.length를 하게 되면, 이 함수가 매개변수로 정의한 매개변수의 숫자를 알려준다.

arguments.length 즉, 몇개의 인자를 전달하였는가에 대한 정보를 가지고 있는 것이다.

이 점에서 매개변수와 관련된 두 가지 수(함수.length, arguments.length) 의 차이가 있는 것!

이러한 차이를 통해, 매개변수와 전달인자의 수가 다르면 에러를 발생시키는 등의 코드를 짤 수가 있다.

'Languages > Java Script' 카테고리의 다른 글

[Js] 객체지향 \| javascript 객체 지향 프로그래밍 \| 문법 (0)	2021.02.04
[Js] 함수의 호출 \| 자바스크립트 함수 호출 \| apply (0)	2021.02.04
[Js] 클로저 \| 외부함수, 내부함수 (0)	2021.02.04
[Js] 값으로서의 함수와 콜백 \| 콜백 \| 비동기 처리 (0)	2021.02.04

Contents

새소식

인기 검색어

[Js] arguments | 배열 | javascript 배열 | 매개변수

arguments

매개변수의 수

'Languages > Java Script' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바