[코딩] 자바스크립트 핵심 가이드(4)

이번 장은 함수에 대한 내용이다. 가장 중요하게 생각해도 되는 장이다. 함수형 자바스크립트에 대한 책도 많이 나와 있다. (추후에는 함수형 자바스크립트 입문 책도 샀으니 관련하여 정리할 예정이지만, 이 장은 자바스크립트 핵심 가이드에서 나온 내용을 주로 정리한다) 

함수는 모듈화의 근간, 코드의 재사용성, 정보의 구성 및 은닉 등에 사용, 객체의 행위를 지정하는데도 사용할 수 있음.  

함수 객체 

자바스크립트에서 함수는 객체임. 객체는 프로토타입 객체로 숨겨진 연결을 갖는 이름/값 쌍들을 집합체로 객체 중에서 객체 리터럴로 생성되는 객체는 Object.prototype에 연결됨. 반면 함수 객체는 Function.prototype에 연결됨(다시 Function은 Object.prototype에 연결됨) 

• 모든 함수는 숨겨진 두 개의 추가적인 속성이 있음(함수의 문맥(Context)과 함수 행위를 구현하는 코드(code)임) 
• 함수는 변수나 객체, 배열등에 저장, 다른 함수에 전달되는 인수로도 사용, 함수의 반환 값으로도 사용함 

함수 리터럴

• 함수 객체는 함수 리터럴로 생성할 수 있음 
• 함수 리터럴에는 네가지 부분이 있음 
  
  • 함수 리터럴로 생성한 함수 객체는 외부 문맥으로의 연결이 있음 → 클로저라고 함 

함수를 정의하는 방법(모던 자바스크립트 입문 책 참고) 

// 함수 선언문으로 정의하는 방법 

function square(x) { return x * x; } 

// 함수 리터럴로 정의하는 방법 
var square = function(x) { return x*x; } 

// Function 생성자로 정의하는 방법 
var square = new Function(“x”, “return x*x”; }  

// 화살표 함수 표현식으로 정의하는 방법 (ECMAScript 6부터 추가된 형태) 
var square = x => x*x; 

호출 

• 함수를 호출하면 현재 함수의 실행을 잠시 중단하고 제어를 매개변수와 함께 호출한 함수로 넘김(콜백 지옥... 이 생기는 원리) 
• 모든 함수는 명시되어 있는 매개 변수에 더해서 this라는 매개변수는 객체 지향 프로그래밍 관점에서 매우 중요함(함수형 프로그래밍인 동시에 객체 지향형 프로그래밍임) 
• 매개변수는 호출하는 패턴에 의해 결정됨 
  • 메소드 호출 패턴: 함수를 객체의 속성에 저장하는 경우 
  • 함수 호출 패턴: 함수가 객체의 속성이 아닌 경우에는 함수로 호출 
  • 생성자 호출 패턴: 프로토타입에 의해서 상속이 이루어지는 언어로, 객체가 자신의 속성들을 다른 객체에 바로 상속할 수 있다는 뜻 → new로 생성하면 this에 바로 바인딩됨 
  •  apply 호출 패턴: apply 메서드는 함수를 호출할 때 사용할 인수들의 배열을 받아들여서 this값을 선택할 수 있도록 해줌. 

인수 배열(arguments) 

추가적인 매개변수로 arguments라는 배열을 사용할 수 있음. 이 배열은 함수를 호출할 때 전달된 모든 인수를 접근할 수 있게 함(하지만 유용한 패턴은 아니라고 하니 조심하자) 

var sum = function( ) { 
	var i , sum. = 0 ; 
    for(i = 0 ; i < arguments.length; i+=1) {
    	sum += arugments[i]; 
     } 
     return sum; 
} 

document.writeln(sum(4,8,15,16,23,42)); // 108 

반환(return) 

• return 문은 함수가 끝에 도달하기 전에 제어를 반환할 수 있음 
• 반환값이 지정되지 않으면 undefined가 반환됨 

예외 

• 예외는 정상적인 프로그램의 흐름을 방해하는 비정상적인 사고임 
• 예외 객체는 try문의 catch절에 전달됨 

var try_it = function( ) { 
	try {
    	add("seven"); 
    } catch(e) { 
    	// add를 잘못 호출하면 여기로 들어오므로 여기서 처리하자 
    	document.writeln(e.name + ": " + e.message); 
    }
} 

try_it() ;

 

기본 타입에 기능 추가 

언어의 기본 타입에 기능을 추가할 수 있음(강력한 기능이다) 

예를 들어 다음과 같이  method라는 메소드를 Function.prototype에 추가하면서 이후 모든 함수에서 이 메서드를 사용할 수 있음 

Function.prototype.method = function(name, func) {
	this.prototype[name] = func; 
    return this; 
}; 

 자바스크립트에는 문자열의 양 끝에 있는 빈칸을 지우는 메소드가 없는 경우에도 다음과 같이 정의해서 사용하면 된다고(오호 +ㅂ+) 

String.method('trim', function(){
	return this.replace(/^\s+|\s+$/g, ''); 
}); 

document.writeln('"' + " 	neat	".trim() +'"'); 

재귀적 호출 

유효범위(Scope) 

ECMAScript 6부터 let을 사용하여 지역으로 유효 범위를 제한할 수 있다 { let xx } 범위임 

for(let i =0 ; i < elm.length ;i++){ 
//let 유효 범위임 
	elm[i].onclick = function(){
    	console.log(i); 
    } 
// end of let scope
} 

클로저(Closure) 

•  내부 함수에서 자신을 포함하고 있는 외부 함수의 매개변수와 변수들을 접근할 수 있다 
•  

<변수에 접근하지 못하는 예> 

var myObject = function() { 
	var value = 0; 
    return { 
    	increment : function(inc) {
        	value += typeof inc === 'number'? inc : 1; 
        }, getValue : function( ) { 
        	return value; 
        } 
   }; 
}(); 

<get_status메서드가 있는 객체를 반환 -> 객체에 대한 참조를 myQuo에 저장 -> 이미 반환된 뒤에도 quo의 status에 접근할 수 있음 >

var quo = function(status){
	return {
    	get_status : function(){
        	return status ; 
        } 
    }; 
}; 

var myQuo = quo("amazed");  // myQuo에 저장함 

document.writeln(myQuo.get_status()); // myQuo를 통하여 status를 접근할 수 있음 

(추가적으로 업데이트 하겠다. 오늘은 여기까지만) 

콜백(Callback) 

• 비연속적인 이벤트를 다루는 것에 대해서 쉽게 할 수 있는 방법을 제공 
• 비동기식 함수로 정의하여 구현함 

request = prepare_the_request(); 

// furesponse를 받는 함수를 정의하여 response가 왔을 때 실행할 수 있도록 구현함 
send_request_asynchronously(request, function(response){ 
	display(response); 
}); 

 

커링(Curry) 

• 커링이란 인수를 두 개 이상 받는 함수를 분해하여 인수가 하나인 함수의 중첩 함수로 변환하는 작업을 말함 
• 장점: 부분 적용한 함수를 쉽게 만들어낼 수 있음 

var pow = function(exponent){ 
	return function(base){ 
    	return Math.pow(base, exponent); 
    }; 
}; 

pow -> Math.pow를 커링한 것임 
Math.pow(base, exponent) = pow(exponent)(base) 

var square = pow(2); 
var sqrt = pow(.5) ; 
var cubicroot = pow(1/3); 

고차 함수와 커링 함수를 조합  

var sum = function(a,b){return a+b; }; 
var a = [1,2,3,4]; 
var abs_a = pow(.5)(a.map(pow(2)).reduce(sum));