두치의 개발공부

함수 아규먼츠(arguments) 본문

언어/JavaScript

함수 아규먼츠(arguments)

Du_chi 2022. 2. 20. 15:54

함수 아규먼츠에 대해서 알아보도록 합시다.

우선 함수 아규먼츠와 가장 비교가 되는 언어인 함수 파라미터가 있습니다.함

 

  1. 함수 아규먼츠 vs 함수 파라미터
    함수 아규먼츠는 전달인자, 함수 파라미터는 매개변수를 의미합니다.
    바로 아래의 코드를 보도록 합시다.
    // parmater(매개변수)
    // 함수의 정의 부분에서 쓰여지는 변수입니다. a와b가 add 함수의 파라미터입니다.
    const add(a,b) => {
    	return a+b;
    }
    
    // arguments(전달인자)
    // 함수를 호출할 때 실제로 전달 되는 값입니다. add 함수를 호출할 때 전달하는 1와2가 아규먼츠입니다.
    add(1,2);​
  2. 함수 아규먼츠의 특징
    함수를 호출할 때 위와 같이 add함수에 2개의 전달인자를 사용하여 합한 값을 구할 수도 있지만,
    add함수를 사용하면서도 1+2 / 1+2+3 / 1+2+3+4 와 같이 2개이상의 인자를 전달하여 합을 구하고 싶은 경우도 존재 할 것입니다.
    JavaScript에서는 이와같이 전달인자의 갯수와 상관없이 전달인자를 받을 수 있습니다.
    JavaScript에서는 함수를 호출할 때 인수들과 함께 암묵적으로 argument 객체가 함수 내부로 전달됩니다.
    function add ()  {
        console.log(arguments); // [Arguments] { '0': 1, '1': 2, '2': 3 }
        console.log(typeof arguments, Array.isArray(arguments)); // object false
        console.log(Array.from(arguments), Array.isArray (Array.from(arguments)));// [ 1, 2, 3 ] true
    }
    
    add(1,2,3);​
    출력된 결과를 보면 유사배열의 형태를 가지고 있습니다. (유사배열이란?2022.01.09 - [언어/JavaScript] - 유사배열)
    arguments를 Array.form을 통해 value를 뽑아내어 더하면 되지만, 근래에는 es6 문법을 사용하는 추세이기 때문에
    es6 문법 중 spread 문법을 통해서 코드를 작성 해 보도록 하겠습니다.

    spread 문법 / reduce 함수
    const add = (...param) => {
      
      return [...param].reduce(
      (previousValue, currentValue) => previousValue + currentValue,0);
    }
    
    console.log(add(1,3,4)); // 8

'언어 > JavaScript' 카테고리의 다른 글

렉시컬 스코프(Lexical Scope)  (0) 2022.04.04
이벤트 루프(event loop)  (0) 2022.03.28
호이스팅  (0) 2022.01.09
클로저  (0) 2022.01.09
setTimeout vs setInterval  (0) 2022.01.09