깍돌이의 _WebQA(SQA)

자바스크립트의 모든 함수에는 length 프로퍼티가 있습니다.

함수, arr, obj 등에 대한 length에 대해서 작성하도록 하겠습니다.

1. 함수 (Function)

function fncOneparam(param1){};
function fncTwoparam(param1,param2){}
function fncThreeparam(param1,param2,param3){}

console.log("파라미터 1 : ",fncOneparam.length); //  파라미터 1 :  1
console.log("파라미터 2 : ",fncTwoparam.length); //  파라미터 2 :  2
console.log("파라미터 3 : ",fncThreeparam.length);// 파라미터 3 :  3

인자 체크 

function paramCheck(){

	switch(arguments.length){
        case 0: console.info("0개의 파라미터");
				break;
        case 1: console.info("1개의 파라미터");
				break;
        case 2: console.info("2개의 파라미터");
				break;
        case 3: console.info("3개의 파라미터");
				break;
        default:console.info("4개이상의 파라미터");
				break;
    }

}
paramCheck(); // 0개의 파라미터 
paramCheck(1); // 1개의 파라미터 
paramCheck(1,2); // 2개의 파라미터 
paramCheck(1,2,3); // 3개의 파라미터 
paramCheck(1,2,3,4); // 4개이상의 파라미터
paramCheck(1,2,3,4,5); // 4개 이상의 파라미터 

2. 배열 (arr)

var arr = ["a","b","c","d","e","f","g"];

arr.length // 7 

배열 자체로서는 length 하나로 길이를 체크할수 있습니다.

3. 객체 (Object)

객체는 이야기가 조금 나올수 있습니다. 일단  배열안에 객체를넣은 경우와

단순 객체에 대해서 길이 체크를 하겠습니다.

var arrObj = [
{name:"Kim",age:"15"},
{name:"Mim",age:"25"},
{name:"Sim",age:"35"},
{name:"Pim",age:"45"}
];

arrObj.length // 4

// [ ] 로 묶여있기 때문에 단순 배열로 쳐서 length 출력하여도 정상적으로 4가 나옵니다. 

var onlyObj = {name:"test",age:"14",poisiton:"absolute",job:"front",skill:"html"};


console.error(onlyObj.length); // undefined
console.log(Object.keys(onlyObj).length); //  5

// 단순한 obj 의 경우 length 로는 길이를 가져오지 못합니다. 
// Object.keys(obj).length 를 통하여 key 의 개수를 가져올수 있습니다.  length 와 결과 가 같습니다. 

var temp = {

// do  attribute

}

temp라는  데이터 모델?(객체) 를 통해서 값을 채우고 해당값을 

var resultArr = []; 에

resultArr.push(temp);

식으로 사용하다가 객체 참조 오류가 나는 경우가 생겼습니다.

temp를 수정후 

resultArr.push(temp) 시에는

resultArr [0] = >temp를 가지고있습니다.

다시한번 push 할 경우

resultArr[1] = > temp 0과 1둘다 temp와 같은 곳을 바라보게 됩니다.

수정하면서 push 는 되지만

결국 마지막 수정된 push 값을 resultArr은 전부 가지고있게 되는 것입니다.

예시를 들어 보겠습니다.

해당 예시는 객체 참조 에 대한 예시일뿐입니다.

	

	var temp = {
			"name":"",
			"age":""
	};


	var resultArr = [];

	var response = [
		{"name":"AAA","age":"aa"},
		{"name":"BBB","age":"bb"},
		{"name":"CCC","age":"cc"},
	];



	for(var i=0;i<3;i++)
	{
			temp.name = response[i].name;
			temp.age = response[i].age
			resultArr.push(temp);
	}

해당 결과는?

마지막에 수정되었던 CCC cc값을 전부 가지고있습니다. 모든 배열들이 새로 추가될때마다 같은 temp를 바라보게 되는 상황이 있기 때문입니다.

** push 하는 순간에 (shallow copy (얕은복사) 가 일어나기 때문에 발생하는 현상입니다.)

// 해당 상황에 대한 해결법은

Array.prototype.slice.call 

Array.prototype.slice.apply 

Object.assign 등이 있지만 객체 참조에 대한 이야기로 계속 진행하겠습니다.

gdl blah 가 있습니다. 들어온 숫자만큼 블라 블라를 외치네요

objRef 라는 새로운 객체를 생성 후 속성으로 gdl blah 를 가지게 되면

위의 그림과 같이 같은 함수를 바라보게 됩니다.

아마 해당상태에서는 함수의 동작은 블라를 외치기만 하기 때문에 큰 문제가되어 보이지는 않습니다.

objRef는 그대로 놓은 상태로 gdl의 블라를 제거한다면 위의 그림과 같이

function 은 gdl의 blah 를 바라보고있었지만 해당 연결고리가 끊어지는 바람에  objRef는 바라볼곳이 없어지며 에러를 발생 시킵니다.

해당 객체 참조 이슈가 나타나게 되는데

함수를 작성할 때 함수 Context 를 지정하여 서 해결 할수 있습니다.

각 펑션이 현재 가지고있는 object를 context로 가지기 때문에 앞선 gdl이 사라져도 문제 없이 동작됨을 확인할수 있습니다.

메모이제이션(memoization) 

전에 하였던 계산 또는 작업 의 결과 등을 기억하여

같은 결과를 도출 해낼시에 중간 계산 작업을 한번더 하지 않고 결과를 도출해내는 함수를 만

드는 방법이다.

매번 반복해야될 작업들에 대해서 반복하지 않도록 해주기 때문에

성능 향상을 기대해 볼수 있다.

개인적으로는 캐싱방법과 같아 보이며 캐싱을 사용하는 만큼 메모리 사용량도 늘어나기 때문에 유의 해 보여야 한다.

관련 자료를 찾다보니 함수는 함수로서의 기능만 하여야 한다는 이야기가 있지만

이거는 관련 주장으로만 보면 될것 같다.

메모이제이션이 들어간 예제를 한번 보겠다.

관련 예제는 실용성이 있는건 아니고 메모이제이션에 대한 설명으로 간단하게 작성된 예제이며 자바스크립트 함수의 캐싱 방식에 대한 예제입니다.

// 미 적용 코드 1.8~2.5초

function memoization(number)

{

console.time();

var data ='';

for(var i=0;i<number;i++)

{

data+=i;

}

console.timeEnd();

return data;

}

memoization(5000000); // 1.8~ 2.5 초
memoization(5000000); // 1.8~ 2.5 초 

// 메모이제이션 적용 코드

function memoization(number)

{ 

console.time();

// 캐시 생산 

if(!memoization.cache)

memoization.cache={};

if(memoization.cache[number]!=null){

console.timeEnd();

return memoization.cache[number];

}

var data='';

for(var i=0;i<number;i++){

data+=i;

}

console.timeEnd();

return memoization.cache[number] = data;

}

memoization(5000000); // 1.5~2.5초
memoization(5000000); // 0.001초

// 미작성 DOM 에 대한 캐싱처리는 따로 작성하겠습니다.

// 메모이제이션 함수 
/*
	Tree구조로 지정된 DOM 에 대해서 재귀 함수를 통한 마지막 element를 가져온다.
	가져온 후에 해당 Node의 뒤로 새로 생성한 동적 Node를 
	기존의 방식으로 Search 해서 추가하는 것과 메모이제이션을 사용하여서 추가하는 
	경우에 대한 시간 체크를 console.time();과 console.timeEnd(); 를 통해서 비교 합니다.
	

*/
function memoization(){
		// 처음 함수 실행시 캐시 공간을 만들기 위한 작업 
		if(!memoization.cache)
					memoization.cache ={};
			
};

function createNode(elem,text)
{
	elem = elem || document.documentElement;
 
    txt = txt || '';
 
    var $t = document.createTextNode(txt);
   
    elem.appendChild($t);
 
    return text(elem);

	
}

 > 자바스크립트는 함수형 언어이다. 

-> forEach(item,index,array)

 > 자바스크립트의 함수는 1종 객체이다. 

var show = function(){} 와 같이 함수를 변수로 생성 할수 있다.

show.add = functioin(){} 와 같이 마찬가지로 함수를 프로퍼티에 할당할수 있다.

위의 두개를 보고 알수 있듯이 프로퍼티와 메서드를 가질수 있다.

> 함수내의 선언된 타입의 유효범위는 함수 내 전체이다.

변수 참조

show; // ->undefined

var show = 1  // undefined로 올라와짐

show(); // -> undefined

var show = function(){}; // undefined로 

는 show가 함수지만 변수로 생성하였기 때문에 변수의 호출 방식을 따르며

undefined로 올라(호이스팅)온다.

show(); // show

function show() { console.log("show");} // show 함수 전체가 참조 될수있도록 올라간다.(호이스팅)

할당되지 않은 경우의 매개변수는 undefined

function(param,1param2) 로 선언후 

function(1,2,3,4,5) 로 진행시

param1 = 1

param2 = 2

3,4,5는 따로 연결되지 않는다.

function show(){} 후

> show() 시에 내부적으로 2개의 매개변수가 있다.

arguments:  실제로 전달된 인자의 컬렉션

this : 함수 콘텍스트 객체를 참조

function(param1,param2)

function(1,2,3,4,5)

시에 arguments를 사용하면 3,4,5까지 가져다 사용할수 있다.

			
	function hoisting(){

		console.log("a is :",a);
		console.log("b is :",b);
		
		typeof b ==='function' ? console.log("b Call ",b()) : console.error("b is :",b);
		console.log("c is : ",c);
		typeof c ==='function' ? console.log("c Call ",c()) : console.error("c is :",c);
		console.log("c Call ",c());
		
	var a =1;
	var b = function(){console.log("Function b");};
	function c (){
		console.log("Function C");
	}
	}
	hoisting();	

결과 

> apply 나 call 을 사용시 함수 콘텍스트를 변경할수 있다. 

함수형 프로그래밍을 부합하게 해주는 for-each 함수  

Array.prototype.forEach()

arr.forEach(callback[, thisArg])

callback

각 요소에 대해 실행할 함수

currentValue

> 배열에서 현재 처리 중인 요소

index

> 배열에서 현재 처리중인 요소의 인덱스

array

> forEach() 가 적용되고있는 배열

thisArg

선택사항, callback 을 실행할때 this로서 사용하는 값

반환값

undefined

** Exception 처리를 하지 않는 한 forEach 를 정지 또는 탈출이 불가능합니다.

(stop,break,continue, 등등) -> 이 행동이 필요한 경우는 forEach 의 잘못된 사용

기본 for문을 사용하길 권장

[참조] developer.mozilla.org

forEach () 의 함수 사용의 예

function logArray(element,index,array){
    		console.log('a[' + index + '] = ' + element);
}
[2,5, , 9].forEach(logArray);

결과

a[0] = 2

a[1] = 5

a[3] = 9

this arg를 사용시 

function Counter(){
	this.sum = 0;
	this.count = 0;
}
Counter.prototype.add = function(array){
		array.forEach(function(entry){
			this.sum += entry;
			++this.count;
        },this);
    ///   ^ this 확인
}; // Counter.prototype.add = function ... 

var obj = new Counter();
obj.add([2,5,9]);

/*
 forEach 함수의 function(entry) 옆 thisarg부분을 Counter의 this를 넘김으로써
Counter Object의 add 함수를 추가하면서 object자체의 sum과 count값을 접근하여서 
수정할수 있게 된다.  이와같은 this를 넘겨서 사용도 가능 
*/

결과

obj.count

3

obj.sum

16

Simple for-each 작성

// sample function forEach
function forEach_(list,callback)
{
	for (var n=0; n< list.length;n++)
    {
		callback.call(list[n],n);
    }
}
/*
	list :
		array 형태의 배열을 파라미터로 받음
	callback :
		첫번째 파라미터로 들어온 list를 순회하여서 해당 함수(callback)으로 던져준다.
	
	
	call 은
	(1) function, (2) ...... 의 형태를 띄며
	
	1. array_ 가 첫번째 파라미터로 들어간다. list 과 매핑

	2.	for문을 통해서 list 의 길이만큼 순회를 한다. 

	3.	list[n] 값과 index 값을 callback 에 넘긴다. 동시에 call을 사용하여서 넘김

	//** call이 없을 경우에 list[n] ,index가 넘어가면 callback function 에서 index에 array[n] 인 값이 들어갈것이다.index가 아니라
	
	call을 같이 사용하였기 때문에 들어온 array 에 대한 this 를 가지고 
	
	두번째 n 을 파라미터로넘기기 때문에 n = index로 넘어가고 
	
	this는 넘기는 list[n] 자체가 들어간다.

	해당 코드를 종료 보면
	
	
*/
//  smaple Array
	var array_ = ['First','Second','Third','Forth','Fifth'];
forEach_(array_,function(index){
	console.log(this);
this == array_[index] ? console.log(array_[index]) : console.error("not Exist");
});

결과

this는 list[n]

index는 n 이 들어감이 확인된다. 'First', 'Second'가 나온이유는 array_[index]로 출력하였기 때문 

callback 함수 만드는법을 따라 보았다. 아 물론 스터디이기 때문에 책을 보고 

명시적인(뜻이 분명한,확실하게) 함수 콘텍스트를 지정할수 있는 메소드

Function.prototype.apply

apply(thisArg,[argsArray]);

Function.prototype.call

call(thisArg,[, arg1[,arg2[,....]]])

Function.prototype.bind

bind(thisArg,[,arg1[,arg2[,...]]]);

1. apply

두개의 매개 변수를 가진다.

(  (1)  Function(),    (2) [......])

(1) 해당과 같이 펑션을 가지게 된다. 함수 콘텍스트로 사용할 펑션 객체 

(2) [ ] 형태의 Array 를 인자로 받는다.

2. call 

두개의 매개변수를 가진다. (apply 와 마찬가지로)

(  (1)  Function(),    (2) ......)

(1) 해당과 같이 펑션을 가지게 된다. 함수 콘텍스트로 사용할 펑션 객체 (apply 와 같음)

(2) 배열의 형태가 아닌 인자를 그대로 직접 받는다. 

function foo(){};

apply (foo,[1,1,1,1]);

call ( foo,1,1,1,1);

실제 사용 테스트 코드 

function moveFunction(){
    var result = 0;
		for(var i=0;i<arguments.length;i++){
				result+=arguments[i];}

	this.result = result;
}
var test1 = {};
var test2 = {};

moveFunction.apply(test1,[3,3,3,3]);

moveFunction.call(test2,1,1,1,1);

console.log("test1 result value : " ,test1.result);
console.log("test2 result value : " ,test2.result);

결과

test1 result value :  12

test2 result value :  4

두 메서드는 인자의 차이만 있을뿐 거의 같은 방식으로 동작하게 된다.

apply 냐 call 이냐의 선택은 인자를 어떻게 사용하여야 하는지에 따라 다를것 같다.

배열 형식으로 사용할거면 apply 인자를  한두개씩 직접 전달해야되는 경우 call 

을 선택하여서 사용하면 될것 같다.

결과를 보면 알겠지만 함수의 기능을 가져다 쓰면서 result값을

this.result를 통해서 작성하게 되어있다.

test1과 test2의 각각 컨텍스트를 가질수있게 해주는 메서드로 보면된다.

3. bind

sddfsf

앞서 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 를 가지게 도와주지만 해당 내용은 뒤에 작성하도록 하겠습니다.

일반적인 웹 브라우저에서의 이벤트 루프는 

단일 스레드에서 동작 을 하고 있으며 이사실을 꼭 인지하고 있어야 합니다.

전에 봤던 JavaScript는 1종 객체 (First-Class Object)라는 점과 같이 알아야 합니다.

function test() {};

는 언제든지

var fn = test; 가 가능 하다는 점

브라우저는 단일 스레드에서 이벤큐를 이용하여 들어오는 이벤트를 처리하게 되는데 

모든 이벤트를 큐에 들어온 순서대로 진행이 됩니다.

C언어 하실 때 자료구조에서 queue(큐)를 stack(스택)과 같은 공부 를 하실 때 

stack 에서는 push pop 이라는 용어를 썻지만

C에서는 front rear 라는 말도 있고 put get 뭐 이부분은 C에서 나오는 부분이니

중요한 점은 FIFO(First In First Out) 이라는 점입니다.

먼저 들어온 놈이 먼저 나간다는 말이 될수 있겠죠

대학로 아서 연극 표를 사러 갈때는 생각 하면 줄을 서서 먼저 표를 받게되면 바로 나가게 되는

모습을 생각 하면 될것 같습니다.

매표소는 1개 있죠 대부분 

브라우저도 메시지 큐 1개(매표소) 에서 티켓터(이벤트) 들을 기다리면서

행동을 하나씩 하나씩 처리해주는 방식을 가집니다.

** 브라우저 자체의 JavaScript 인터 프린터의 경우 단일 스레드 를 가지고 있습니다. 

-> JavaScript는 멀티 스레딩을 지원하지 않음 

-> Web Worker 사용을 하시는 분들은 논외 

** 해당 관련한 스터디 및 관련 책들에 대한 자료인데 아직까지는 이해가 되지 않는 부분이 있습니다.

브라우저는 브라우저별로 각각 다른 엔진을 쓰고 있고 

Chrome 28 이전 - > webkit

Chrome 28 이후 -> Blink

IE -> Trident

Gecko ->  FireFox 

각 브라우저별 엔진이 다릅니다. 엔진이 다르기 때문에 렌더링 되는 동작이 다릅니다. 

(화면 및 다른 쪽 렌더링으로 자바스크립트의 이벤트 방식은 위와 같습니다.)