함수의 유형

함수의 유형

함수는 저번에 함수에 대해서 배웠듯이 '선언적함수(일반 함수 문법), 익명 함수, 매개변수 함수, 리턴값 함수'로 나뉩니다. 이번에는 이 함수들을 응용해서 실전에서 자주 쓰이는 함수의 여러가지 유형에 대해서 배워보겠습니다. 함수가 뭔지 모른다구요? 얼른 달려가서 보고 와주세요!!! (☞함수 기본☜)

---

01_ 함수와 매개변수를 이용한 형태

함수와 매개변수를 응용한 케이스입니다. 각 매개변수에 실행문에 기입한 변수를 대입시켜 출력할 수 있습니다.

function func(num, str1, str2){
    document.write(num+"."+str1+str2+"되었니?");
}
func("1", "함수", "실행");          //각각 "1" = "num", "함수" = "str1", "실행" = "str2" 에 대응
func("2", "자바스크립트", "실행");
func("3", "제이쿼리", "실행");

결과보기

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

02_ 함수와 변수를 이용한 형태

1번 유형에서 한단계 더 나아간 모습입니다. 실행문의 변수에 들어갈 변수를 함수 이후에 선언해서 1번 유형처럼 대입시켜 출력합니다.

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

func(youNun1, youStr1, youCom1);        
func(youNun2, youStr2, youCom1);
func(youNun3, youStr3, youCom1);

결과보기

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

03_ 함수와 변수를 이용한 형태2

2번 유형의 단점을 보완한 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. 제이쿼리가 실행되었습니다.

04_ 객체 안에 변수와 함수를 이용한 형태

객체안에 변수와 함수까지 넣어 출력하는 형태입니다. 이 방법은 간편하기는 하지만, 함수의 큰 특징인 재활용을 하지 못한다는 단점이 발생합니다.

const info = {
    num1 : 1,
    name1 : "함수",
    com : "실행",
    num2 : 2,
    name2 : "자바스크립트",
    num3 : 3,
    name3 : "제이쿼리",
    
    result1 : function(){
        document.write(info.num1+". "+info.name1+"가 "+info.com+"되었습니다.");
    },
    result2 : function(){
        document.write(info.num2+". "+info.name2+"가 "+info.com+"되었습니다.");
    },
    result3 : function(){
        document.write(info.num3+". "+info.name3+"가 "+info.com+"되었습니다.");
    }
};

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

결과보기

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

05_ 객체 생성자 함수

재활용 하지 못하던 4번 유형의 단점을 개선한 케이스입니다. this.를 이용해서 변경되는 변수값을 계속해서 재활용 할 수가 있습니다.
this가 들어가야 하며, 인스턴트를 생성해야만 실행이 가능합니다.

this.

간단하게 알아보고 갈게요. 이 친구는 항상 객체를 참조하고, 어떠한 값이든 될 수 있는 친구입니다.
- 단독 사용 : global object를 가리킵니다.
- 함수안에서 사용 : 함수의 주인에게 바인딩 됩니다.
- 메서드 안에서 사용 : 메서드 내부 코드에서 사용된 this는 해당 메서드를 호출한 객체로 바뀝니다.
- 생성자 안에서 사용 : 생성자 함수가 생성하는 객체로 바인딩됩니다.

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

06_ 프로토타입 함수

다중함수 존재시 불필요한 함수까지 실행되는 것을 막기 위해 필요한 함수만 사용하도록 프로토타입을 활용합니다.

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

06_ 프로토타입 함수

다중함수 존재시 불필요한 함수까지 실행되는 것을 막기 위해 필요한 함수만 사용하도록 프로토타입을 활용합니다.

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