함수의 유형

⭐️ 함수의 유형 ⭐️

---

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

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

결과 보기

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

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

    const mynum1 = 14*1;
    const mynum2 = 14*2;
    const mynum3 = 14*3;
    const mystr1 = "함수";
    const mystr2 = "자바스크립트";
    const mystr3 = "제이쿼리";
    const mycom1 = "실행";
    const mycom2 = "추가";
    const mycom3 = "삭제";

    func(mynum1, mystr1, mycom1);
    func(mynum2, mystr2, mycom2);
    func(mynum3, mystr3, mycom3);

결과 보기

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

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

    const info = [
    {
        num : "15*1",
        name : "함수",
        com : "실행"
    },
    {
        num : "15*2",
        name : "자바스크립트",
        com : "추가"
    },
    {
        num : "15*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);

결과 보기

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

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

    const info = {
        num1 : 16*1,
        name1 : "함수",
        word1 : "실행",
        num2 : 16*2,
        name2 : "자바스크립트",
        word2 : "추가",
        num3 : 16*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();

결과 보기

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

05. 객체 생성자 함수

// 객체 생성자 함수.   위의 식들이 불편해서 나온 최종 단계. 제일 많이 사용함.
    // 메모리를 나눠 사용하지 못해서 느려짐. 메인에서 사용하는 함수 vs 서브에서 사용하는 함수

        function func(num, name, word){
            this.num = num;         // 원래는 앞에 const 가 붙어있어야 하는데 생략하고, this를 적어줌.  const num = num; 
            this.name = name;       // this는 재활용 가능하게 만들어줌. 데이터를 차곡차곡 저장.
            this.word = word;

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

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

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

결과 보기

17-1. 함수가 실행되었습니다.17-2. 자바스크립트가 출력되었습니다.17-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("18-1", "함수", "실행");
        const info2 = new func("18-2", "자바스크립트", "출력");
        const info3 = new func("18-3", "제이쿼리", "삭제");

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

결과 보기

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

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("19-1", "함수", "실행");
        const info2 = new func("19-2", "자바스크립트", "출력");
        const info3 = new func("19-3", "제이쿼리", "삭제");

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

결과 보기

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