Javascript 함수에 대해 파헤치기

 

 

자바스크립트에서 함수 생성하는 방법

 

자바스크립트에서 함수를 생성하는 방법은 크게 세 가지가 있습니다.

 

1. 함수 선언문 방식

function func(){ }

 

2. 함수 표현식 방식

var func = function(){ };

 

3. 생성자 함수 이용하기

var func = new Function([parameter, ...], 'code');

 

1번과 2번은 함수 리터럴 방식을 이용한 방법이고 3번은 생성자 함수를 이용한 방법입니다.

이 중에 3번 생성자 함수를 이용하는 방법은 딱봐도 불편해 보입니다. 사실 함수 생성은 리터럴 방식을 사용하고 3번은 거의 사용하지 않습니다. 그래서 리터럴 방식을 이용한 1번과 2번에 대해서만 사용법을 소개하겠습니다.

 

 

 

함수 호출하기

 

일단 함수를 생성하고나면 함수를 호출할 수 있습니다. 함수는 재사용성을 강화시켜줍니다.

A라는 기능을 담당하고 있는 어떤 함수를 일단 생성하고 나면, A 기능을 하는 코드를 또 작성할 필요 없이, 함수를 호출하기만 하면 A 기능이 실행되기 때문입니다.

 

일단 호출할 함수를 생성해보겠습니다.

 

// 1. 함수 선언문 방식
function hello() {
  alert("hello!");
}

// 2. 함수 표현식 방식
var hello = function() {
  alert("hello!");
}

 

"hello!"라는 문자열을 alert에 출력하는 기능을 수행하는 hello라는 함수를 만들었습니다.

함수 선언문, 함수 표현식 방식 둘 중 하나만 선택해서 사용하면 됩니다.

함수를 호출하는 방법은 함수명뒤에 ()를 붙이는 것입니다.

 

hello();

 

이렇게 함수를 호출하면 미리 정의되어있는 함수의 코드가 실행됩니다.

 

 

 

 

 

 

파라미터 parameter (매개변수 혹은 인자)

 

함수를 선언할 때 괄호 () 안에는 받을 수 있는 파라미터들을 정의할 수 있습니다. 이것은 함수를 호출할 때마다 값으로 넣어줄 수 있으며, 중괄호 {} 코드 블록 내에서 그 값을 변수로 사용할 수 있습니다. 그래서 이것을 매개변수라고도 부릅니다. 예시로 다시한번 보겠습니다.

 

function hello (name){
    alert("hello! " + name + "^^");
}

 

아까와 같이 "hello"라는 문자열을 alert에 출력하는 hello라는 함수를 정의했습니다. 아까와 다른 점은 name이라는 매개변수를 정의했다는 것입니다. 이제 함수를 호출할 때 name이라는 매개변수에 값을 넣어주면 그 값을 이용해 함수 안에 있는 코드가 실행됩니다.

 

함수를 선언한 뒤 호출할 때 매개변수 값으로 'cocoder'를 넣어보겠습니다.

실행결과로 alert 메시지는 "hello! cocoder^^"라고 출력될 것입니다.

 

hello("cocoder");

 

함수를 호출할 때마다 매개변수에 넣고 싶은 값을 넣을 수 있습니다.

 

hello("cocoder"); // hello! cocoder^^
hello("choco"); // hello! choco^^
hello("javascript"); // hello! javascript^^

 

 

 

return 사용법

 

함수는 {} 코드 블록 안에서 어떤 값을 반환하여 함수 밖으로 배출할 수도 있습니다. 이것은 return 키워드로 할 수 있습니다. 함수는 코드 실행 중 return 키워드를 만나서 값을 반환하는 데에 성공하면 {} 코드 블록 안에 더 남아 있는 코드들을 굳이 실행하지 않고 함수 실행을 종료합니다.

 

파라미터 a, b를 받아서 둘에 대해 + 연산을 수행한 결과를 반환하는 plus라는 함수를 만들었습니다.

이 함수를 실행하여 반환받은 값을 console.log()를 통해 확인할 수 있습니다.

 

function plus(a,b){
    return a+b;
}
console.log(plus(1,2)); // 3

 

함수를 실행하여 반환받은 값은 변수에 저장해 활용할 수도 있습니다.

 

var result = plus(1,2);
console.log(result); // 3

 

 

 

함수 선언문 방식과 함수 표현식 방식의 차이

 

함수 호이스팅

 

함수 선언문 방식은 함수 표현식 방식과 다르게 함수 호이스팅이 발생한다는 차이가 있습니다. 함수 호이스팅이란 함수를 선언한 위치보다 더 윗줄에 있는 코드에서는 아직 함수가 선언되지 않았음에도 불구하고 아랫줄에 있는 함수를 호출하는 것이 가능한 현상을 의미합니다. 함수 호이스팅은 함수를 사용하기 전에 선언해야한다는 규칙을 무시하는 현상입니다. 따라서 코드의 구조를 엉성하게 만들 수 있습니다.

 

* 함수 호이스팅 예시 코드

// 함수 선언문 방식 - 함수호이스팅
func1();
function func1(){
    alert("함수 선언문 방식");
}
func1();

// 함수 표현식 방식
// func2(); ->> error
var func2 = function(){
    alert("함수 표현식 방식");
};
func2();

 

함수 func1는 함수 선언문 방식으로 생성했기 때문에 함수 호이스팅이 가능합니다. 따라서 함수를 선언한 코드보다 더 윗줄에서도 함수호출이 가능합니다. 따라서 예시 코드에서 func1()는 총 두번 호출이 됩니다. 반면 함수 func2는 함수표현식 방식으로 생성했기 때문에 함수 호이스팅이 발생하지 않습니다. 따라서 함수를 선언한 위치보다 더 윗줄에서 func2()를 호출할 때 func2는 정의되지 않은 함수라는 에러가 발생합니다.

 

 

 

 

 

일급 객체로서의 자바스크립트 함수의 5가지 특징

 

자바스크립트에서 함수는 일급 객체 (first class object)라고 합니다. 그래서 자바스크립트에서 함수는 다른 언어에서의 함수보다 조금 더 독특한 특징들을 가지고 있습니다. 이번 글에서는 자바스크립트에서 함수가 일급 객체이기 때문에 가지는 특징 5가지에 대해 살펴보겠습니다.

 

 

1. 리터럴에 의해 생성 가능하다.

 

함수를 리터럴로 생성하는 두 가지 방법이 있습니다. 하나는 함수 선언문을 이용하는 방식이고 다른 하나는 함수 표현식을 이용하는 방식입니다.

 

* 함수 선언문으로 함수 생성

function func() {}

 

* 함수 표현식으로 함수 생성

var func = function(){};

 

 

2. 변수나 배열의 원소, 객체의 프로퍼티 등에 할당 가능

 

자바스크립트에서 함수는 값이기 때문에 변수, 배열의 원소, 객체의 프로퍼티 등에 할당할 수 있습니다.

 

* 예시 코드

var func = function(){
    console.log("this is func");
}

// 변수에 할당
var func1 = func;

// 배열의 원소에 할당
var arr = [];
arr[0] = func;

// 객체의 프로퍼티에 할당
var obj = {};
obj.func2 = func;

 

 

3. 함수의 인자로 전달될 수 있다.

 

자바스크립트에서 함수는 값이기 때문에 함수의 인자로 전달이 가능합니다.

 

* 예시 코드

var callbackFunction = function(){
    console.log("callback!");
};

var greeting = function(greet, callback){
    console.log(greet);
    callback();
};

greeting("Hi.", callbackFunction); // 두번째 파라미터에 함수를 전달

 

 

4. 함수의 리턴 값으로 사용될 수 있다.

 

자바스크립트에서 함수는 값이기 때문에 리턴 값으로도 사용될 수 있습니다.

 

* 예시 코드

var detection = {};
detection.foundEnemy = (function (){
    var foundEnemy = function(){
        alert("get away!!!");
    }
    return foundEnemy; // foundEnemy 라는 함수를 리턴값으로 사용할 수 있다.
})();

detection.foundEnemy();

 

 

5. 동적으로 속성을 생성, 수정, 삭제할 수 있다.

 

자바스크립트에서 함수는 객체이기 때문에 객체와 마찬가지로 함수에 프로퍼티를 동적으로 생성하고 수정하고 삭제하는 작업을 할 수 있습니다.

 

* 예시 코드

var func = function(){
    return "abc";
}

// 함수에 property 추가
func.pro = "abcd";
console.log(func.pro); // abcd
console.log(func().pro); // undefined, func()이 반환하는 "abc"는 string 타입으로 프로퍼티를 가지고 있지 않습니다.

// 함수의 property값을 수정(할당)
func.pro = "가나다라";
console.log(func.pro); // 가나다라

// 함수의 property를 삭제
delete func.pro;
console.log(func.pro); // undefined