[JavaScript] 함수의 param(파라미터) 과 args(인자)

앞서 JavaScript의 Scope Chain 에 대해 확인 하였습니다.

(기본적으로 var 에 대해서는 function scope를 가지며 ES스펙 -> 이부분은 따로 포스팅)

이지만 let과 const를 사용할시에는 block scope를 가질수 있습니다.(블록 { } 안에서만 유효한)

또한 function 의 경우에는 참조 범위까지 호이스팅 

그렇지 않을 경우에는 undefined로 되는점 까지확인 하였으며

function foo()

{

variables_; // undefined

function_; // "HI"

   

var variables_;

function function_ (){console.log("HI");

오늘은 함수의 args(인자) param(파라미터) 에 대해서 확인 해보도록 하겠습니다.

간단하게 함수내 에서 this까지도 확인하려고합니다.

1. args 

function foo()
{
  console.log(this);
  console.log(arguments);
}
foo("arg1","arg2","arg3");

해당 코드를 브라우저에서 돌렸다면 

this - > Window (브라우저의 WIndow 객체가 나타납니다.);

arguments -> 인자로 들어온 인자들을 전부 표시합니다.

결과 : (Chrome 브라우저 기준으로 하였으며 세부값은 다를수 있습니다.);

[Chrome 브라우저에서 해당 코드 호출시 console에 찍히는 값 ]

[Node .js를 통해서 vscode 에서 돌린 코드 결과 값]

해당 사진이 작아서 안 보일수 있지만 

문자열로 옮겨 놓으면

노드 v9.6.1이(가) 감지되었으므로 검사 프로토콜로 디버그합니다.

node --inspect-brk=28848 app.js 

Debugger listening on ws://127.0.0.1:28848/89ba9122-cdb0-4320-b30a-a449b925fed2

null: global {console: <accessor>, DTRACE_NET_SERVER_CONNECTION: , DTRACE_NET_STREAM_END: , DTRACE_HTTP_SERVER_REQUEST: , DTRACE_HTTP_SERVER_RESPONSE: , …}

null: Arguments(3) ["arg1", "arg2", "arg3"]

와 같이 나온다

브라우저와의 차이점에서는

arg값은 똑같이 나타나지만 실제로 가리기키는 this에 대해서는 다르게 표시 됨을 확인할수 있다. ( 해당 this에 대해서는 추후 다시 Subject를 가지고 할예정)

여기까지 arguments 에 대한 인자 객체를 알아 보았습니다.

실제로 인자를 넘겼지만 function 에서 받는 파라미터가 없어도 arguments 를 통해서 지정하지 않은 인자가 들어왔는지 확인 하실수 있습니다.

2 Parameter

arguments 인자와 비슷하지만 차이점이 있습니다. 

함수부터 작성해보겠습니다.

위의 작성된 foo 함수와 같지만 다른점이 있습니다.

function foo(param1,param2)
{
    console.log("paramTest > param 1 ?",param1," : param2 ? " ,param2);
    console.log(this);    
    console.log(arguments);
}
foo("arg1","arg2","arg3");
    

위의 함수와 다르게 param1과 param2가 function 옆에 파라미터로 선언이 되어있습니다.

이경우에는 어떤식으로 쓸수 있을지 확인해보면

해당 함수의 결과를 보겠습니다.

[Chrome 브라우저에서 확인시]

인자값은 똑같이 들어오지만 param 으로 지정시에는 순서대로 param 로 들어오는 점이 확인됩니다.

이처럼 parameter를 지정하여서는 가독성 높은 변수 활용을 기대할수 있습니다.

함수 파라미터 지정을 param2까지 들어왔지만 뒤에 예상치 못한 인자들을arguments 객체를 통해서 할수 있는 점이 있습니다.