JavaScript

arguments

함수에는 arguments라는 변수에 담긴 숨겨진 유사 배열이 있다. 이 배열에는 함수를 호출할 때 입력한 인자가 담겨있다. 아래 예제를 보자. 결과는 10이다.

function sum(){
    var i, _sum = 0;	
	for(i = 0; i < arguments.length; i++){
		document.write(i+' : '+arguments[i]+'<br />');
		_sum += arguments[i];
	}	
	return _sum;
}
document.write('result : ' + sum(1,2,3,4));

함수 sum은 인자로 전달된 값을 모두 더해서 리턴하는 함수다. 그런데 1행처럼 함수 sum은 인자에 대한 정의하가 없다. 하지만 마지막 라인에서는 4개의 인자를 함수 sum으로 전달하고 있다. 함수의 정의부분에서 인자에 대한 구현이 없음에도 인자를 전달 할 수 있는 것은 왜 그럴까? 그것은 arguments라는 특수한 배열이 있기 때문이다.

arguments는 함수안에서 사용할 수 있도록 그 이름이나 특성이 약속되어 있는 일종의 배열이다. arguments[0]은 함수로 전달된 첫번째 인자를 알아낼 수 있다. 또 arguments.length를 이용해서 함수로 전달된 인자의 개수를 알아낼 수도 있다. 이러한 특성에 반복문을 결합하면 함수로 전달된 인자의 값을 순차적으로 가져올 수 있다. 그 값을 더해서 리턴하면 인자로 전달된 값에 대한 총합을 구하는 함수를 만들 수 있다.

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

매개변수의 수

매개변수와 관련된 두가지 수가 있다. 하나는 함수.length, 다른 하나는 arguments.length이다. arguments.length는 함수로 전달된 실제 인자의 수를 의미하고, 함수.length는 함수에 정의된 인자의 수를 의미한다. 아래의 코드를 보자.

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

 

댓글

댓글 본문
작성자
비밀번호
  1. 용돌
    0 : 1
    1 : 2
    2 : 3
    3 : 4
    result1 : 10까지 일단 출력이되고,
    엔터(<br />없이 다음번 0:1이 출력된거네요.
    대화보기
    • slowbegin
      for문을 한 번 더 사용해서
      document.write('result1 : ' + sum(1,2,3,4,5,6));
      위 코딩을 하나 더 했습니다
      그랬더니 결과값이 의도했던 것과 다르게 나옵니다...
      ①document.write('result1 : ' +sum(1,2,3,4));
      -> 0 : 1
      1 : 2
      2 : 3
      3 : 4
      result1 : 100 : 1

      ②document.write('result2 : ' +sum(1,2,3,4,5,6));
      -> 1 : 2
      2 : 3
      3 : 4
      4 : 5
      5 : 6
      result1 : 21

      ①의 result에 해당하는 값이 왜 10이 아니라 100이 나오는건가요 ㅠ
      대략 arguments.length가 1개인데
      length를 결정짓는 배열이 2개
      sum(1,2,3,4)
      sum(1,2,3,4,5,6)
      이렇게 2개라서 오류값이 나오는것 같습니다만
      정확히를 모르겠네요 ㅠ


      밑에건 제가 작성한 코딩 원본입니다
      <!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(i+' : '+arguments[i]+'<br />');
      _sum += arguments[i];
      }
      return _sum;
      }
      document.write('result1 : ' + sum(1,2,3,4));
      document.write('result1 : ' + sum(1,2,3,4,5,6));
      </script>
      </body>
      </html>
    • Byungwook Kim
      잘 배우고 갑니다!!
    • 김경모
      자바스크립트만 저런 건가요?
    • 미완성
      20190109
    • arguments = 인자의 갯수
      length = 매개변수의 갯수
    • 스탐
      감사합니다
    • 감사합니다~!
    • 정진주
      잘 듣고 갑니다~~!!
    • 안장호
      감사합니다~! ^^
    • 고순영
      정말...자유롭네요 ㅋㅋㅋㅋ 흑흑
    • 듀티프리
      좋아요. 감사합니다.
    • Seo Yun Seok Tudoistube
      감사합니다.
      다시 보니까 함수로 전달된 인자의 수를 구할 수도 있고, 실제로 함수에 전달된 인자의 수를 구할 수도 있네요.
      멋진 기능이네요^^
    • 율루
      argments 는 php의 __costruct랑 비슷하다고 보면되겠네요?
    • hsk772
      강의 다시 들으면 함수지향 이해할 수 있나요? 어흐흑.
    • 박인호
      12-15
      수강완료.
      감사합니다.
    • Jupi
      javascript는 참... 자유로운 존재군요 ㅎㅎ
      밑에 댓글을 보니, 다른 언어와 다른점과 비교할 수 있어서 좋습니다!
      댓글 짱짱!
    • 고스트프리
      이부분은 이해가네요... 다행입니다.^^
    • 으어엉
      강의 감사합니다.
      무슨 말인지는 하나도 모르겠지만요 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
    • 수복
      그럼 자바스크립트 실무에서도 일부러 인자 없이 쓰나요? 그러면 정말 헷갈릴 거 같은데... 좋은 기능이긴 하나 과연 많이 사용할 지는 의문이 드는 기능이네용~
    • GoldPenguin
      완료했습니다.
    • Jeong Min Lee
      좋은 강의 감사합니다.
    • Seo Yun Seok Tudoistube
      인자가 없는 함수에 인자를 전달해도 오류없이 실행되다니... 그럼, 자바처럼 오버로드가 필요없는거 맞나요?
      함수.length 와 arguments.length 가 다를 수 있군요.
      감사합니다^_____^!!!
    • crable
      감사합니다
    • 이승우
      20170521 완료
    • 최규선
      20170501 완료! 감사합니다.
    • 신입1
      감사합니다
    • 전성욱
      (함수이름).length => 함수 내에서 정의하고있는 매개변수(파라미터)의 갯수 알려줌
      arguments.length => 함수가 호출될때 같이 전송되는 인자(아규먼트)의 갯수 알려줌

      에크마스크립트6부터 추가된 펼침 연산자(rest parameter)로 argument 객체 사용 없이 간단하게 다수의 인자값을 전달받을 수 있습니다.
      function sum(arr..){ return arr.reduce( (x,y) => x+y )};
      로 정의 후,
      sum(1,2,3,4,5)로 호출 시 15가 리턴됩니다. 함수내 파라미터 arr는 인자로 받아들인 모든 값을 배열로 저장합니다.
      function doSomething(...numlist, what)과 같이 펼침연산자 이외에도 다른 파라미터를 추가할 수 있는 등 다양한 바리에이션이 존재합니다

      마찬가지로 es6에서 추가된 스트립트 맨 앞에 "use strict";를 붙여넣는 것으로, 루즈한 자바스크립트를 조금 타이트하게 묶어줍니다
      다른 언어에서 100%예외가 발생하는 경우(ex 블록 내에서 선언된 변수를 밖에서 사용)에 예외를 발생하게 해주는 친절한 구문입니다
    • 생코짱
      항상 감사합니다
    • 임지호
      argument : 인자의 정보를 담고 있는 객체
      - 자바스크립트에서는 매개변수를 정의하지 않은 상태에서 인자의 값을 줘도 에러가 나지 않는다.
      - argument라는 변수 안에 인자의 정보를 가진 객체가 담기게 된다.
      - argument.length를 하게 되면 사용자가 입력한 인자의 수가 리턴되지만, 함수.length하게 되면 매개변수를
      몇 개나 정의했는지가 리턴된다.
    • 완료!
      완료! 감사합니다~
    • hyuna
      감사합니다~
    • yihsang
      강의 잘 듣고 있습니다.
    • 지영
      누가 자바스크립트 쉽다고 했어 ㅠ
    • egoing
      만약 <input type="text" id="f">라는 폼이 있다면
      document.getElementById('f').value를 통해서
      값을 알아 낼 수 있습니다.
      대화보기
      • 자바초보
        안녕하세요 강의 잘 보고 있습니다.
        자바스크립트 관련 궁금증이 있어 문의드립니다.
        여기에 남기는게 맞는지 모르겠습니다.

        자바스크립트에서 리턴되는 값을 폼 내부에서 받을수 있는 방법이 있을까요??
        예를들어 자바스크립트 함수에서 리턴되는 값이 1 이라 가정을 하면
        폼 내부에 id 라는 네임을 가직 인풋박스로 함수에서 리턴하는 값을 받을수 있을까요??

        도움 부탁드립니다.
        감사합니다.
      • joo0914krs
        감사합니다
      • 이주환
        2016. 04. 24

        알아두면 좋지만 쓰는경우는 거이 없었던것 같네요.
      • JustStudy
        고맙습니다
      • 국제표준규격
        이건 알아두기만 하고 사용하면 안되겠네요. 큰 프로젝트에서는 많은 버그를 양산하겠어요.
      • Byeong Koo Kang
        c나 java에서 main argument는 있었지만, 함수마다의 argument 갯수를 세는건 못 본거 같은데.. 아닌가요??

        javascript는 정말.. 많은걸 해볼 수 있네요..
      • egoing
        sum은 함수고 _sum은 변수입니다.
        대화보기
        • Cho Jeaho
          sum과 _sum을 나눈것은 지역변수와 전역변수의 구별을 위해서 나눈것인가요?
        • 김경민
          다른 언어를하다가 자바스크립트하니까 좀 해깔리긴하네요 ㅋㅋ 자바스크립트는 너무 관대한것같아요
        • 고고
          ㅋㅋㅋㅋ 파라미터를 받도록 코딩을 안했는데 파라미터를 받을 수 있다니 ㄷㄷㄷ 혼란스럽다 ㅋㅋㅋ
        • 게임
          강의 잘 보았습니다. 짧은 시간에 압축적으로 잘 설명해 주시네요..
        • document.write
          자바스크립트 변수명 작성 규칙에 특수문자 기호중에는 _ 과 $가 사용 가능하고 다른 거는 사용불가라고 알고 있습니다. $sum 이나 _sum 해서 인자의 합을 저장하는 변수라는 것을 알려주고 sum()이라는 함수명과 충돌방지, 변수명은 작성규칙에 어긋나지 않는 범위내에서 마음대로 만들수 있지만 되도록이면 변수명을 봐도 어떤 값, 기능을 수행하는지 알수 있게끔 명시하는게 좋겠죠
          대화보기
          • ㄱㄷㅅㄷㄱ
            two 부분에 보면 전달되는 인자의 값이 'val1'에 1개가 있죠? 그리고 arguments가 1이에요
            그리고 함수에 선언된 two의 인자가 arg1,arg2 두개죠? 그리고 객체의 길이는 2이에요
            님 말이 맞을듯
            대화보기
            • 갈희
              그냥 sum을 하게되면 함수명과 중복되잖아요? ㅎㅎ
              그래서 _를 붙혀준거 같네요.
              대화보기
              • 한비
                제가 알기로는 보통 지역변수를 정의할때 _로 시작하곤 합니다.
                일종의 코딩관례라고 할 수 있습니다.
                대화보기
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기