함수 유형

함수 유형

이전 함수의 심화편입니다.

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

함수와 매개변수를 이용해 실행하는 함수 형태입니다.

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

결과 확인하기

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

함수 외부에 변수를 사용해서 실행하는 함수 형태입니다.

{
    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);
}

결과 확인하기

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

함수 외부에 변수 대신 객체를 사용해서 실행하는 형태입니다.

{
    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);
}

결과 확인하기

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

객체 안에 변수와 함수를 전부 넣어 묶어서 함수를 표현한 형태입니다.

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

결과 확인하기

05. 함수 유형 : 객체 생성자 함수

변수를 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();
}

결과 확인하기

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();
}

결과 확인하기

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

프로토 타입 함수에 이어 함수를 따로 모아놔 원하는 함수만 실행하도록 하는 함수 형태입니다.
(함수를 따로 모아놔 원하는 함수만 실행)

{
    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();
}

결과 확인하기