1 2 3 4 5 6 L

Page Header > Subtitle

[javascript] javascript 함수 지향

 

전역변수의 사용

불가피하게 전역변수를 사용해야 하는 경우는 하나의 객체를 전역변수로 만들고 객체의 속성으로 변수를 관리하는 방법을 사용한다.

 

MYAPP = {}
MYAPP.calculator = {
    'left' : null,
    'right' : null
}
MYAPP.coordinate = {
    'left' : null,
    'right' : null
}
 
MYAPP.calculator.left = 10;
MYAPP.calculator.right = 20;
function sum(){
    return MYAPP.calculator.left + MYAPP.calculator.right;
}
document.write(sum());​ 

 

전역변수를 사용하고 싶지 않다면 아래와 같이 익명함수를 호출함으로서 이러한 목적을 달성할 수 있다.

 

(function(){
    var MYAPP = {}
    MYAPP.calculator = {
        'left' : null,
        'right' : null
    }
    MYAPP.coordinate = {
        'left' : null,
        'right' : null
    }
    MYAPP.calculator.left = 10;
    MYAPP.calculator.right = 20;
    function sum(){
        return MYAPP.calculator.left + MYAPP.calculator.right;
    }
    document.write(sum());
}())​ 

 

 

값으로서의 함수

JavaScript에서는 함수도 객체다. 다시 말해서 일종의 값이다. 거의 모든 언어가 함수를 가지고 있다. JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다​ 

 

function a(){} 

 

위의 예제에서 함수 a는 변수 a에 담겨진 값이다. 또한 함수는 객체의 값으로 포함될 수 있다. 이렇게 객체의 속성 값으로 담겨진 함수를 메소드(method)라고 부른다.

 

<span>a = {
    b:function(){
    }
};​ 

 

함수는 값이기 때문에 다른 함수의 인자로 전달 될수도 있다.

 

function cal(func, num){
    return func(num)
}
function increase(num){
    return num+1
}
function decrease(num){
    return num-1
}
alert(cal(increase, 1));
alert(cal(decrease, 1));​ 

 

함수는 함수의 리턴 값으로도 사용할 수 있다.

 

function cal(mode){
    var funcs = {
        'plus' : function(left, right){return left + right},
        'minus' : function(left, right){return left - right}
    }
    return funcs[mode];
}
console.log(cal('plus')(2,1));
console.log​(cal('minus')(2,1));   ​

 

당연히 배열의 값으로도 사용할 수 있다.

 

<span>var process = [
    function(input){ return input + 10;},
    function(input){ return input * input;},
    function(input){ return input / 2;}
];
var input = 1;
for(var i = 0; i < process.length; i++){
    input = process[i](input);
}
console.log​(input);​

 

값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 함수로 전달할 수 있다. 값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있다. 인자로 전달된 함수 sortNumber의 구현에 따라서 sort의 동작방법이 완전히 바뀌게 된다.

 

function sortNumber(a,b){
    // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.
    return b-a;
}
var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
alert(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]
 

 

 

함수호출

JavaScript는 함수를 호출하는 특별한 방법을 제공한다. 본 토픽의 시작에서 함수를 객체라고 했다. 위의 예제에서 함수 func는 Function이라는 객체의 인스턴스다. 따라서 func는 객체 Function이 가지고 있는 메소드들을 상속하고 있다.​ 메소드는 Function.apply과 Function.call이다.

 

 

function sum(arg1, arg2){
    return arg1+arg2;
}
alert(sum.apply(null, [1,2]))​ 

 

o1 = {val1:1, val2:2, val3:3}
o2 = {v1:10, v2:50, v3:100, v4:25}
function sum(){
    var _sum = 0;
    for(name in this){
        _sum += this[name];
    }
    return _sum;
}
alert(sum.apply(o1)) // 6
alert(sum.apply(o2)) // 185​ 

 

우선 두개의 객체를 만들었다. o1는 3개의 속성을 가지고 있다. 각각의 이름은 val1, val2,val3이다. o2는 4개의 속성을 가지고 있고 o1과는 다른 속성 이름을 가지고 있고 속성의 수도 다르다.

그 다음엔 함수 sum을 만들었다. 이 함수는 객체의 속성을 열거할 때 사용하는 for in 문을 이용해서 객체 자신(this)의 값을 열거한 후에 각 속성의 값을 지역변수 _sum에 저장한 후에 이를 리턴하고 있다.

객체 Function의 메소드 apply의 첫번째 인자는 함수가 실행될 맥락이다. 이렇게 생각하자. sum.apply(o1)은 함수 sum을 객체 o1의 메소드로 만들고 sum을 호출한 후에 sum을 삭제한다. 아래와 비슷하다. (실행결과가 조금 다를 것이다. 그것은 함수 for in문으로 객체 o1의 값을 열거할 때 함수 sum도 포함되기 때문이다.) 

 

 

 

 

 

0
0
이 글을 페이스북으로 퍼가기 이 글을 트위터로 퍼가기 이 글을 카카오스토리로 퍼가기 이 글을 밴드로 퍼가기
captcha
자동등록방지 숫자입력

JS/Node.js

번호 제목 글쓴이 날짜 조회수
39 javascript [javascript] async, await를 사용하여 비동기 javascript를 동기식으로 만들자 미도어묵 02-18 1,022
38 javascript JavaScript 합집합, 교집합, 차집합, 대칭차 미도어묵 11-23 1,270
37 javascript jQuery 플러그인 부트스트랩의 콤포넌트(modal) 미도어묵 10-04 1,132
36 javascript Javascript 숫자에 천단위로 콤마(,) 찍기 미도어묵 08-20 791
35 javascript 함수형 프로그래밍 - 함수형으로 전환 미도어묵 08-09 857
34 Node.js nodejs & api call example 미도어묵 06-25 815
33 javascript jQuery 핸드폰 번호 체크하기 미도어묵 06-25 844
32 Node.js Node.js 업그레이드 미도어묵 04-23 762
31 Node.js node.js cross 도메인 header 처리 미도어묵 03-12 804
30 javascript hls.js 및 데모 미도어묵 02-22 796
29 Node.js node.js memcached_guide 미도어묵 01-02 799
28 Node.js clustering node + socket.io + redis 사용법 미도어묵 09-29 1,597
27 javascript script sample 예제 관리자 09-20 818
26 Node.js 커넥션 연결 확인 관리자 09-01 755
25 javascript [문법] [TypeScript] Electron + Vue.js 예제 관리자 07-24 1,082
24 javascript 웹 풀스택 입문을 위한 약 500페이지 분량의 교재 관리자 07-11 904
23 javascript [TypeScript] 타입스크립트 기초 세미나 자료 관리자 06-10 877
22 javascript javascript 함수 지향 관리자 04-08 788
21 Node.js Node.js 로 웹 사이트 데이터 가져오기 관리자 04-06 826
20 Node.js [MongoDB] Application / Mongoose를 이용하여 간단한 채팅 프로그램 개발 관리자 03-30 878