LHJ

I'm a FE developer.

11-5. Function 오브젝트 / Argument 오브젝트

30 Nov 2020 » js_beginner

11-5. Function 오브젝트 / Argument 오브젝트

Argument 오브젝트가 Function 오브젝트에 속하진 않지만 함수를 호출하면 그때 Argument 오브젝트를 생성하므로 여기서 같이 다룹니다.

아규먼트 오브젝트

  • 함수가 호출되어 함수 안으로 이동했을 때 arguments 이름으로 생성되는 오브젝트
  • 함수를 호출한 곳에서 넘겨준 값을 순서대로 저장

  • 호출된 함수에 파라미터를 작성한 경우

    • 호출된 함수의 파라미터에도 값을 설정하고 아규먼트 오브젝트에도 저장

        function getTotal(one) {
      return one + arguments[1] + arguments[2];
  }
  var result = getTotal(10, 20, 30);
  console.log(result); // 60
      1. getTotal()을 호출합니다.
        10, 20, 30을 파라미터 값으로 넘겨줍니다.
      2. 함수가 호출을 받게되면 함수 안에 arguments 이름을 가진 오브젝트를 생성
      3. 10, 20, 30이 arguments에 순서대로 설정됩니다.
        arguments[0]처럼 인덱스를 사용하여 값을 사용
      4. getTotal()의 one 파라미터에 10이 설정됩니다.
      • 10이 one에 설정되고
      • 10이 arguments[0]에 설정됩니다.
      • 그리고 20이 arguments[1]에 설정되고,
      • 30이 arguments[2]에 설정됩니다.
      • 이처럼 파라미터 값이 모두 설정되므로, arguments를 사용해서 값을 구할 수 있습니다.

    • apply()와 아규먼트 오브젝트
      apply 메소드와 arguments 오브젝트를 잘 조합하면, 꽤 멋있는 코드가 나옵니다.

        function getTotal(one) {
      return one + arguments[1] + arguments[2];
  };
  var result = getTotal.apply(this, [10, 20, 30]);
  console.log(result); // 60

      apply 메소드로 두번째 파라미터 값으로 배열을 넘깁니다.
      배열로 5개를 넘기든 10개를 넘기든 arguments 오브젝트에 설정됩니다.
      따라서 arguments 오브젝트를 for문으로 반복하면 10개가 들어오던, 5개가 들어오던 모든 파라미터 값을 더할 수 있습니다.

      1. apply()의 두번째 파라미터가 배열이며 파라미터 값이 유동적입니다.
      2. 이때 arguments를 사용하여 유동적인 파라미터 수에 대응할 수 있습니다.

      3. 사용 사례

        • 웹페이지에서 ‘좋아하는 음악’을
        • checkbox로 선택받으면 선택한 수가 유동적입니다.
        • apply()와 아규먼트 오브젝트로 대응할 수 있습니다.


      선택한 값을 apply 배열 형태로 넘겨 arguments 오브젝트에 저장해서 for문을 돌려서 값을 구하면 됩니다.
      apply 메소드와 아규먼트 오브젝트를 활용하면 매우 유용하게 데이터를 처리할 수 있습니다.
      그리고 함수가 실행되고나서 함수를 빠져나오게 되면 아규먼트 오브젝트도 자동으로 삭제됩니다.
      따라서 함수 밖에서 아규먼트 오브젝트에 접근(access)할 수 없습니다.

      그리고 제가 아규먼트라 부르지 않고 파라미터라 부른 것은 바로 이 아규먼트와 구분하기 위한 것입니다.

arguments[1] : 여기서 1은 무엇을 뜻할까요?
프로퍼티를 뜻하죠?
아규먼트 오브젝트도 오브젝트이니까 그 안에는 { key(name): value } 프로퍼티 형태로 저장되겠죠?

  • 1: 10
  • 2: 20
  • 3: 30

이렇게 저장될 것입니다.

  • 파라미터라고 부른 것은 아규먼트 오브젝트와 구분하기 위한 것

Related Posts