함수 선언방법

출처 : http://www.nextree.co.kr/p4150/

# 함수선언 방식 두가지

1. 함수선언문( function declaration )

            -    스크립트로딩시점에 바로 초기화하고 저장함. 따라서 위치상관없이 어느곳에서 호출가능

            -    단점은 대규모 애플리케이션개발시 함수선언문으로 모든 함수를 저장하므로 응답속도저하

                  ( 스크립트파일을 모듈화하고 필요시 비동기 방식으로 로딩하여 http요청을 줄여 응답속도

                        향상 시킬수 있다 )

function aa(){

}

2. 함수표현식( function expression )

            -    함수가 변수에 할당됨( 함수는 객체이다 라는 정의가 가능)

            -    실행시 해당함수가 해석되므로 해당함수 호출전에 선언되어야 사용가능

 

// 익명 함수표현식

var aa = function(){

};

함수선언문과 익명함수표현식 호출법은 둘다 같다

aa();

// 익명 즉시실행함수(IIFE)1

( function(){

}() );

// 익명 즉시실행함수2

( function(){

})();

IIFE 잘 정리되어있음! : https://jdub7138.blog.me/221027225353

자바스크립트의 가장 큰 문제점중 하나가 글로벌스코프에 정의된것은

코드내의 어디서든 접근가능하다는것.

외부에 공유되면안될 속성이나 메소드가 있거나, 서로다른스크립트파일에서 동일명의 함수나

변수가 있을경우 원치 않는 결과가 나옴

아래 두 함수표현식을 비교해보자

// 함수표현식

var aa = function(){

    console.log('함수호출');

};

aa();

// 즉시실행함수

(function(){

    console.log('함수호출');

}());

위 두개 코드는 동일한 동작을 수행함

차이점 : 함수표현식을 함수를 정의하고 변수에 함수를 저장하고 실행하는과정을 거침

            하지만 IIFE는 그냥 바로 함수를 실행함

var aa = (function(){        // aa는 IIFE에의해 함수가 아님! 

                             // aa라는변수를 통해서 IIFE에 접근가능!

    var abc = 'wown';

    return {    // 익명객체를 리턴

        a : abc,

        b : 123

    };

}());

console.log( aa.a);    //    wown

console.log( aa.b);    //    123

console.log( aa.abc);  //    undefined   

var aa = (function() {

    var abc = 'wown';

    var jo = {

        a1: abc,

        b1: 123

    }

    return jo;    // 혹은 jo라는변수에담아서 jo라는객체만 리턴

}());

console.log(aa.a1);    //    wown

console.log(aa.b1);    //    123

IIFE내에서 선언한 변수를 외부에서도 접근가능

글로벌변수에 추가하지 않아도 되기때문에 코드 충돌없이 구현가능(대부분 플러그인이나 라이브러리)

함수표현식과 IIFE에서 파라미터 전달법

var buyCar = function(carName) {  

    // "내가 구매한 차는 sonata입니다." 출력

    console.log('내가 구매한 차는 ' + carName + '입니다.');

};

buyCar('sonata');

(function(carName) {

    // "내가 구매한 차는 sonata입니다." 출력

    console.log('내가 구매한 차는 ' + carName + '입니다.');

}('sonata'));

# 공통함수 만들기 ( IIFE 이용 namespacing )

    팀 프로젝트시 많은 양의 자바스크립트 코드를 작성할때, 타 팀원이 작성한 전역변수가 overwrite

    되는 경우가 발생한다.

    이를 막기위해 namespacing을활용한다.

    이런식으로 함수를 전부 전역변수에 등록할경우 중복될 수 도있다.

function test() {

    alert(1);

};

test();

    그래서 함수를 만들때 아래와같이 IIFE로 모듈생성후 window로 노출시킨다.

    module이라는 namespacing을 활용한다.( module변수만 전역변수에 추가됨 )

    ( jQuery가 이런식으로 만들었는데 만약 module 명또한 중복된다면 백업로직추가해야함 )

(function(window) {

    var module = {

        foo: function() {

            alert(11);

        },

        bar: function() {

            alert(22);

        }

    }

    window.module = module;

})(window);

    

# 모듈 패턴

 java에서의 모듈화를 지원하는 접근제어자(private, public  등등 )나 모듈간 구분을 위한 package가

제공한다. 하지만 자바스크립트에서는 그런게 없다.

그러나 이런기능들을 자바스크립트의 함수의 특징을 이용하여 유사하게 제공가능

--> IIFE

var aa = (function(){

    var a = "wown";

    var b = 123;

    var d = 500;    // private

    var c = function(){

        return 3+d;     // 변수 d를 이런식으로 내부적으로는 사용가능( 외부에서만 바로접근X )

    };

    // public 속성, 메서드

    return{

        a : a,

        b : b,

        c : c

    };

}());

        console.log( aa.a );    // wown

        console.log( aa.d );    // undefined

        console.log( aa.c() );  //  3

# 자바스크립트모듈작성시 코드순서

1. 모듈 스코프 내에서 사용할 변수 작성

2. 유틸리티 메소드 작성

3. DOM 조작 메소드 작성

4. 이벤트 핸들러 작성

5. Public 메소드 작성

var aa = ( function(){

    // 1. 모듈 스코프 내에서 사용할 변수 작성

    var a = {};

    var b;

    var c;

    var d;

    var e;

    // 2. 유틸리티 메서드 작성

    b = function(){

    };

    // 3. DOM조작 메소드 작성

    c = function(){

    };

    // 4. 이벤트 핸들러 작성

    d = function(){

    };

    // 5. public 메서드 작성

    e = function(){

    };

    return {

        test : e

    };

}());