자바스크립트의 함수 정의 방법 4가지

자바스크립트에서 함수를 정의할 때 Function객체를 사용하는 방법, 사용하지 않는 방법이 있다. 대부분 Function 객체를 사용하지 않으며 연산자인 function을 이용하여 사용한다.

---

1. 함수 선언식 (function 키워드를 이용하는 방법)

function hello(name) {
    console.log(name);
}

hello('ktko');

일반적으로 가장 많이 사용하고 있고, 추가 설명은 X

---

2. 함수 표현식(함수 리터럴을 이용하는 방법)

var hello = function(name) {
    console.log(name);
};

hello('ktko1');

함수 리터럴을 언급하기 전에 함수가 아니라 데이터를 만드는 방식에는 리터럴 방식과, 객체 방식 2가지가 있다.

타입	리터럴 방식	객체 방식
숫자	var age = 30;	var age = new Number(30);
문자	var name ='ktko';	var name = new String('ktko');
불린	var hot = true;	var hot = new Boolean(true);
배열	var array = ['data1', 'data2', 'data3', 'data4'];	var array = new Array('data1', 'data2', 'data3', 'data4');

일반적으로 변수를 선언할 때 많은 개발자들은 리터럴 방식으로 선언하지만 자바스크립트 엔진에 의해 리터럴 방식으로 선언한 코드가 객체방식으로 자동 변환되어 실행된다.

위에 리터럴방식과 객체방식처럼 아래 예제코드를 보며 함수의 리터럴 방식으로 선언하는 것이 무엇인지 알 수 있다.

//함수 일반적인 방식
function hello(name) {
    console.log(name);
};

hello('ktko1');

//함수 리터럴 방식
var hello = function(name) {
    console.log(name);
}

hello('ktko2');

//객체 방식
var hello = new Function('name', 'console.log(name)');

hello('ktko3');

실무에서는 리터럴 방식을 활용하여 아래와 같은 방식으로 사용하고 있다.

//리터럴 방식으로 클래스의 멤버함수를 만들 때
var class = {
    test:function() {

    }
}

//Object 방식으로 클래스의 멤버함수를 만들 때
function class = {
    this.test = function() {

    }
}

//prototype 방식으로 클래스의 멤버 함수를 만들 때
function class = {

}

class.prototype.test = function() {
    
}

---

3. Function 객체를 이용

//객체 방식
var hello = new Function('name', 'console.log(name)');

hello('ktko3');

일반적으로 사용하지 않는 방식이기 때문에 설명은 하지 않는다.

---

4. 익명 함수

익명 함수는 함수를 만들어 재사용하는 것이 목적이 아니라 다른 함수간의 충돌을 막기 위해 사용한다. 예를 들어 jQuery 플러그인 제작 시 다른 플러그인과 충돌을 막기 위한 방법으로 많이 사용한다.

(function(name) {
    console.log(name);
})('ktko');

//더글라스 클락포트가 권장하는 즉시실행 익명 함수 표기법
(function(name) {
    console.log(name);
}('ktko1'));

자바스크립트는 글로벌 스코프에 정의된 것은 어디에서든지 접근이 가능하다는 점이 있다. 이 특성은 장점이 될 수도 있지만 단점이 될 수도 있다. 또한 다른 JS 파일에서 선언된 함수와 변수가 충돌날 수가 있다(위에서 설명한 jQuery 플러그인과 같은 경우에)

함수 표현식은 함수를 정의하고, 변수에 함수를 저장하고 실행하는 과정을 거치지만 익명함수는 즉시 실행된다는 특징이 있다. 이런 함수를 즉시실행함수(IIFE : Immediately-invoked function expression)라고 한다.

var hello = function(str) {
    console.log(str);
}
hello('hello'); //hello 출력

(function(str) {
    console.log(str);
}('hello')); //hello 출력

즉시실행 함수를 변수에 할당하면 즉시실행함수 내에서 선언한 변수를 외부에서도 접근할 수 있다. 변수의 접근 범위가 함수 내부에서만 접근하는 것이 아니라 외부에서도 접근이 가능하다.

즉시실행함수는 글로벌 네임스페이스에 변수를 추가하지 않아도 되기 때문에 플러그인이나 라이브러리 등을 만들 때 많이 사용된다.

var ktko = (function() {
    var _age = 30;
    var _hello = function() {
        console.log('hello');
    }
    
    return {
        age : _age,
        hello : _hello
    }
}());
console.log(ktko.age); //30
ktko.hello(); //hello
ktko.age = 29;
console.log(ktko.age); //29
 

출처

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