[JavaScript] 함수 유형 알아보기

함수 유형

이번 포스팅에서는 자바스크립트의 재활용 목적으로 사용되는 함수 유형 7가지를 살펴보도록 하겠습니다.

---

1. 함수 유형 : 함수와 매개변수를 이용한 형태

재활용 목적으로 사용되며 함수와 매개변수를 이용한 형태입니다.

function func(num, str1, str2) {
    document.write(num + ". " + str1 + "가 " + str2 + "되었습니다. ");
}
func("1", "함수", "실행");
func("2", "자바스크립트", "실행");
func("3", "제이쿼리", "실행");   // 이런식으로 추가하면서 소스 재활용이 가능함

결과 보기

1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 제이쿼리가 실행되었습니다.

2. 함수 유형 : 함수와 변수를 이용한 형태

재활용 목적으로 사용되며 함수와 매개변수를 이용한 형태입니다. 매개변수를 만들고 document.write로 그 자리를 지정해준 다음 const 상수를 만들고 마지막에 함수로 그 const를 순서대로 입력해주면 만들어둔 const 값이 알아서 지정된 자리에 들어가 출력됩니다.

function func(num, str1, str2) {
    document.write(num + ". " + str1 + "가 " + str2 + "되었습니다. ");
}
const youNum1 = 1;
const youNum2 = 2;
const youNum3 = 3;
const youStr1 = "함수";
const youStr2 = "자바스크립트";
const youStr3 = "제이쿼리";
const youCom1 = "실행";

func(youNum1, youStr1, youCom1);
func(youNum2, youStr2, youCom1);
func(youNum3, youStr3, youCom1);

결과 보기

1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 제이쿼리가 실행되었습니다.

3. 함수 유형 : 함수와 배열, 객체를 이용한 형태

재활용 목적으로 사용되며 함수와 배열, 객체를 이용한 형태입니다. 매개변수 안에 num, str1, str2를 만들고 그 다음 info라는 상수 안에 배열 안의 객체 형태로 데이터를 저장시킨 다음, 마지막으로 func(info[0].num, info[0].name, info[0].com)식으로 출력시켜줍니다.

function func(num, str1, str2) {
    document.write(num + ". " + str1 + "가 " + str2 + "되었습니다. ");
}
const youNum1 = 1;
const youNum2 = 2;
const youNum3 = 3;
const youStr1 = "함수";
const youStr2 = "자바스크립트";
const youStr3 = "제이쿼리";
const youCom1 = "실행";

func(youNum1, youStr1, youCom1);
func(youNum2, youStr2, youCom1);
func(youNum3, youStr3, youCom1);

결과 보기

1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 제이쿼리가 실행되었습니다.

4. 함수 유형 : 객체 안에 변수와 함수를 이용한 형태

재활용 불가능한 단점 존재

{
    const info = {
        num1 : 1,
        name1 : "함수",
        word1 : "실행",
        num2 : 2,
        name2 : "자바스크립트",
        word2 : "실행",
        num3 : 3,
        name3 : "제이쿼리",
        word3 : "실행",

        result1 : function() {
            document.write(info.num1 + ". " + info.name1 + "가 " + info.word1 + "되었습니다. ");
        },
        result2 : function() {
            document.write(info.num2 + ". " + info.name2 + "가 " + info.word2 + "되었습니다. ");
        },
        result3 : function() {
            document.write(info.num3 + ". " + info.name3 + "가 " + info.word3 + "되었습니다. ");
        }
    }

    info.result1();
    info.result2();
    info.result3();
}

결과 보기

1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 제이쿼리가 실행되었습니다.

5. 함수 유형 : 객체 생성사 함수 ★★★

재활용 가능하도록 객체+함수 합침, 4번 보완, 필요없는 함수가 있는 경우에도 모든 함수를 불러오느라 메모리를 사용한다는 단점 존재

{
    function func(num, name, word) {
        this.num = num;
        this.name = name;
        this.word = word;

        this.result = function() {
            document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다. ");
        }
    }

    // 인스턴스 생성
    const info1 = new func("1", "함수", "실행");
    const info2 = new func("2", "자바스크립트", "실행");
    const info3 = new func("3", "제이쿼리", "실행");

    // 실행
    info1.result();
    info2.result();
    info3.result();
}

결과 보기

1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 제이쿼리가 실행되었습니다.

6. 함수 유형 : 프로토타입 함수

5번 단점 보완(메모리 절약), 함수가 늘어나면 복잡해짐

{
    function func(num, name, word) {
        this.num = num;
        this.name = name;
        this.word = word;

        this.result = function() {
            document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다. ");
        }
    }

    // 인스턴스 생성
    const info1 = new func("1", "함수", "실행");
    const info2 = new func("2", "자바스크립트", "실행");
    const info3 = new func("3", "제이쿼리", "실행");

    // 실행
    info1.result();
    info2.result();
    info3.result();
}

결과 보기

1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 제이쿼리가 실행되었습니다.

7. 함수 유형 : 객체 리터럴 함수

6번 단점 보완, 객체를 함수 안에 모아둠

{
    function func(num, name, word) {
        this.num = num;
        this.name = name;
        this.word = word;
    }

    func.prototype = {
        result1 : function() {
            document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다. ");
        },
        result2 : function() {
            document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다. ");
        },
        result3 : function() {
            document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다. ");
        },
    }

    // 인스턴스 생성
    const info1 = new func("1", "함수", "실행");
    const info2 = new func("2", "자바스크립트", "실행");
    const info3 = new func("3", "제이쿼리", "실행");

    // 실행
    info1.result1();
    info2.result2();
    info3.result3();
}

결과 보기

1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 제이쿼리가 실행되었습니다.