자바스크립트 함수(1)

1.  자바스크립트에서는 자바와 다르게 function을 사용하여 

함수,메서드,클래스를 모두 표현하는데 , 표현 방식만 다를 뿐이다.

---

var obj = {

hello : function() {

return "hello , " + this.username;

},

username : "Seongho!"

}

---

obj.hello(); // hello , Seongho! 

다음 코드를 확인해보자. 

여기서 hello는 obj의 메서드이고 (객체의 동작 프로퍼티) username은 객체의 변수 값이라고 보면 될 것 같다.

위 코드에서 this.username 이 부분에 집중하자 . 

hello 메서드가 obj 내에서 선언된 메서드 (클로저개념) 여서 this.username에서 this는 obj 내부의 객체를 의미한다.

마치 안드로이드에서 window 객체를 활용하는 느낌과 동일하다. 

이번엔 조금 꼬아보겠다. 결과를 유추해보자 

---

var obj = {

hello : function() {

return "hello , " + this.username;

},

username : "Seongho!"

}

var obj2 = {

hello : obj.hello,

username : "just you! "

};

obj2.hello();

---

과연 결과물은 어떻게 나올 것인가?

1.  hello , Seongho! 

2.  hello,  just you! 

답은 1번이다.  obj2 객체로 내부 hello() 메서드를 호출하였고 안의 내용에서는 obj 객체의 hello() 메서드를 호출하므로 

" hello , Seongho! " 가 출력되는 것이다.

어떠한 객체의 메서드를 호출하면 그 메서드를 찾고 해당 객체를 수신자 객치로 사용한다는 점을 인지해주길 바란다.

객체 내부의 키에 대한 메서드를 호출할 경우에는 메서드 호출이 되지만 그저 hello(); 이런 식의 호출은 전체에서 

hello() 함수를 호출하는 내용이 된다. 전역 객체가 그 수신자이기 때문이다. (특정 객체가 아니기 때문)

<예시>

function hello(){

return "hello, " + this.username;

}

hello();

간단한 코드이지만 hello()라는 것은 객체의 메서드가 아닌 함수의 개념으로 정의된 것이고 전역 객체가 그 수신자이기 때문에 여기서 this.username은 전역 변수인 username을 찾는 값이 되게 됩니다.

username이 혹시나 전역 변수로 정의되어 있지 않다면 undefined로 출력될 것입니다.

이를 에러로 출력하기 위해선 "use strict" 문구를 적어주시면 됩니다.

function hello(){

"use strict";

return "hello, " + this.username;

}

hello();

다음과 같이 코드를 정리해주신다면 username이 전역 변수로 선언되어 있지 않기 때문에 에러가 난다고 나올 것 입니다. (es5)

2.  고차 함수 

콜백 함수라고도 표현할 수 있는데 거두절미하고 코드로 보여드리겠습니다.

function buildString(n , callback) { 

var result = " ";

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

result += callback(i);

}

return result;

}

---

다음은 buildString이라는 이름으로 콜백 함수를 만든 것이다.  두 번째 인자로 callback이 들어 있는데 이 부분에 함수를 넣어 구현하면 됩니다.  

다음과 같이 진행해주시면 됩니다.

---

var numbering = buildString(10,function(i) { 
    return i;
});

var alphabet = buildString(26,function(i){

return String.fromCharCode(65 + i );

});

다음과 같이 진행하게 되면 numbering은 1~10까지 출력되고 alphabet은 A~Z까지 출력된다.

callback 부분에 콜백함수가 들어가는데, buildString 함수 내부에 반복문에서 callback함수를 호출할 때 인자로 i를 담고 있기 때문에,

그리고 저 부분이 정수값이 들어가기 때문에 numbering이나 alphabet의 콜백으로 들어오는 함수의 인자가 i , 즉 숫자 하나의 값을 인자로

받는 콜백함수를 구현해주는 것이다. 

최종적으로 정리하자면 고차 함수는 다른 함수를 인자로 받거나 그 결과로 함수를 반환하는 함수입니다.

콜백 함수로 만들기 위해 buildString처럼 만들고 이를 numbering이나 alphabet처럼 받아서 표현한 이 구조, 이러한 공통된 코딩 패턴을 익혀야합니다.

다음 함수(2) 포스팅에선 call , apply , bind에 대해서 알아보겠습니다. 

(함수는 4~5까지 진행될 것 같습니다!)