자바스크립트 : 함수의 유형

함수의 유형

자바스크립트에서 함수의 유형은 여러 가지가 있습니다. 오늘은 다양한 함수의 유형에 대하여 알아보겠습니다.

---

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

자바스크립트에서 함수의 특징은 실행문의 집합체라는 점과, 재활용이 가능하다는 점입니다. 함수와 매개변수를 이용하면, 다음과 같이 함수를 재활용할 수 있습니다.

function func(num, str1, str2){
    document.write(num + ". " + str1 + "가 " +str2 + "되었습니다.")
}
func("1", "함수", "실행");  // 매개변수를 str1, str2로 전달
func("2", "자바스크립트", "실행");
func("3", "제이쿼리", "실행");

결과보기

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

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

같은 방법으로, 변수를 일일이 선언할 수도 있습니다.

function func(num, str1, str2){
    document.write(num + ". " + str1 + "가 " + str2 + "되었습니다.")
}
const num1 = 1;
const num2 = 2;
const num3 = 3;
const str1 = "함수";
const str2 = "자바스크립트";
const str3 = "제이쿼리";
const com1 = "실행";
    
func(num1, str1, com1);
func(num2, str2, com1);
func(num3, str3, com1);

결과보기

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

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

같은 방법으로, 배열 안에 저장된 객체를 불러올 수 있습니다.

function func(num, str1, str2){
    document.write(num + ". " + str1 + "가 " + str2 + "되었습니다.")
}
const Info = [ 
    {
        num : "1",
        name : "함수",
        com : "실행"
    },
    {
        num : "2",
        name : "자바스크립트",
        com : "실행"
    },
    {
        num : "3",
        name : "제이쿼리",
        com : "실행"
    }
];
    
func(Info[0].num, Info[0].name, Info[0].com);
func(Info[1].num, Info[1].name, Info[1].com);
func(Info[2].num, Info[2].name, Info[2].com);

결과보기

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. 객체 생성자 함수

위와 같은 방법은 간편하지만, 재활용이 불가능하여 일일이 함수를 입력해줘야 한다는 불편함이 있습니다. 그 불편을 해소하기 위해 객체와 함수를 합치는 방법으로, const 대신 this로 변수를 선언할 수 있습니다. 이 때는 필수적으로 인스턴스를 생성해 주어야 합니다.

function func(num, name, word){
    this.num = num;  // const를 생략하고 this 작성
    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. 프로토타입 함수

프로토타입 함수는 객체 생성자 함수의 단점을 보완하여, 함수를 객체 바깥으로 꺼내 주었습니다. 변수를 그대로 사용하면서도, 필요한 값만 실행할 수 있게끔 하여 많은 데이터를 처리하기에 효율적인 방법입니다.

function func(num, name, word){
    this.num = num;
    this.name = name;
    this.word = word;
}
    
func.prototype.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. 객체 리터럴 함수

객체 리터럴 함수는 프로토타입에서 더 나아가, 깔끔한 소스로 작업할 수 있습니다.

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. 제이쿼리가 실행되었습니다.