깍돌이의 _WebQA(SQA)

앞서 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 객체를 통해서 할수 있는 점이 있습니다. 

JavaScript의 Scope는 Block(블록 { } ) 이 아닌 Function(함수)에 의해 정해집니다.

블록 안에서 선언된 변수 들은 블록 안에서 끝나지 않고 Function(함수) 단위로 가게 됩니다.

그에 해당 하는 테스트 샘플 코드입니다.

function foo()
{
		console.warn('__Before__');	
		typeof first ==='number' ? console.log('first exist') : console.error('first not exist');
		typeof Internal==='function' ? Internal() : console.error('not exist');
		/*
			first not exist  'number'로 비교하였지만 undefined로 호이스팅(끌어올리다) 
			Internal exist   'function' 으로 비교하여 참조 의 호이스팅이 되는점 확인 -> 실제 함수 사용까지 가능)

		*/
		var first = 1;
		function Internal(){console.log("Internal exist");}

		console.warn('__after__');
		typeof first ==='number' ? console.log('first exist') : console.error('first not exist');
		typeof Internal==='function' ? Internal() : console.error('not exist');

		/*
			first exist 
			Internal exist 
		*/
		if(first===1){var third = 3;};

		typeof third==='number' ? console.log('third exist') : console.error('third not exist');
		
		/*
			third exist  var third 선언은 if(first===1) 분기를 타고 블록(block) 안에 선언되었지만 밖에서도 참조가 가능
		*/

}
foo();

호이스팅(일명 끌어올리기) 에 대해서는 매우 중요하다기보다는 

이런느낌으로 알고 지나가는게 좋을 것 같습니다.

펑션은 호이스팅으로 참조까지 가능하지만

변수(var)는 undefined로 호이스팅이 되는점만 알면 되며 

let 과 const에 대해서는 호이스팅은 되지않는다고 는 하지만 실제로 디버거시에 undefined로

호이스팅되는점은 확인은 되는데

되든 안되든 변수의 경우 undefined로 올라오기 때문에 이에 대해서는 더 깊게 생각하지 않기로

했습니다.

C언어는 절차 지향 언어라고 할수 있다. 해당 내용은 절차지향에 대한 이야기 일뿐

자바스크립트와는 많은 관련이 있진 않습니다. C를 하다 넘어 왔기 때문에

자바스크립트도 절차지향으로 보여 잘못생각하였던 부분에 대한 설명입니다.

#include 
using namespace std;


int main(void)
{
	printf("CPP Test\n");

	show(); //show 식별자를 찾을수 없습니다. 에러 
	return 0;
}

 void show() 
{
	printf("Show Call");
}

const int OpenResult(int flag) 
{


}



// 해당 호출이 불가능해지기 때문에


// 실제 사용시에는

// 이 처럼 코드 상단에 미리 선언을 하고 원형을 하단에 작성한다.C 의경우


#include 
using namespace std;

// 절차 선언 
void show();
int main(void)
{
	printf("CPP Test\n");

	show();
	return 0;
}

 void show() 
{
	printf("Show Call");
}

자바스크립트 또한 그럴것이라 생각 하였지만 실제 JS에서 유효범위는 생각과는 달랐다.

function external(){

typeof Internal ==='function'  ?  console.log("Internal  exist") : console.log("Internal  not exist");

function Internal (){};

typeof Internal ==='function'  ?  console.log("Internal  exist") : console.log("Internal  not exist");

window.Internal === undefined ? console.log('Internal is not window exist' ) : console.log('Internal window exist');

window.external === undefined ? console.log('external is not window exist') : console.log('external window exist');
}

external();

결과

Internal  exist

Internal  exist

Internal is not window exist

external window exist

1번째에

typeof Internal ==='function 부분에서 exist로 넘어가는것으로 보아

절차적으로 코드가 생성되는것으로 보였지만 

자바스크립트의 유효범위는 블록이 아니라 함수에 의에 정의된다고 할수있다.

여기까지보면 뭔가 큰 차이가 안 느껴져서  자바스크립트의 Scope Chain 은 Function 이라는 예제를 하나 더 들수 있다.

 void show() 
{
	printf("Show Call");

	for (int i = 0; i < 5; i++)
	{
		int b = 10;

	}
	printf("B is %d", b);
}

// 와 작성시 이미 printf b 에서 컴파일 하기도전에 validation 에 걸립니다. b가 정의되어있지 않습니다. 
// C,C++에서는 Scope Chain 은 Block Scope를 가진다는 것을 알수 있습니다. 

function show()
{
   for (var i=0;i<5;i++)
   {
			var b = 10;
   }
console.log("B is ",b);
}
show();


// 결과
// B is  10

자바 스크립트의 Scope Chain 은 위와 같이 Function 을 가지게됩니다.

이에 대해서 JS 작성시 실수하였던 점이

   for(var i=0;i<10;i++)
  {   
        for(var j=0;j<10;j++)
        {
              for(var i=0;i<5;j++)
              {
               }

         }

        
  }
       

해당 식의 코드를 한번 짤일이 있었는데 디버그 하다가 애를 먹었던적이 있습니다.

처음 i 0 ~을 돌다가 3번째 for문에서 i가 4인 채로 끝나기 때문에  자기 밖으로나가면 i2가 된상태로 돌아야하지만

i4인채로 끝나서

첫번째 포문에서 i 0 1,2,3 부분이 건너 뛰고 바로 4로 넘어가는 현상이 생겼습니다.

js에서는 function Scope Chain 을 가지기 때문에 해당 부분에 유의 하여야 합니다.

최근 ES스펙이 오름에 따라서 let변수가 해당 C,C++의 block scope 를 가지게 도와주지만 해당 내용은 뒤에 작성하도록 하겠습니다.