깍돌이의 _WebQA(SQA)

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

-> 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