본문 바로가기
JAVASCRIPT

함수 유형

by 코빈_ 2022. 8. 22.

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

매개 변수를 이용해 만들어진 함수입니다.

    function func(num, str1, str2) {
    document.write(num + ". " + str1 + str2);
    }
    func("1", "함수", "실행");
    func("2", "자바스크립트", "실행");
    func("3", "제이쿼리", "실행");
결과보기
1. 함수실행
2. 자바스크립트실행
3. 제이쿼리실행

함수와 변수를 이용한 형태

변수를 사용하여 만든 함수입니다.

    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. 제이쿼리실행

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

배열 및 객체를 사용하여 만든 함수입니다.

    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. 제이쿼리실행

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

객체 속에 변수 및 함수를 사용하여 만든 함수의 형태입니다.

    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. 제이쿼리실행

객체 생성자 함수 ***

객체를 사용하여 만든 함수이며, 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. 제이쿼리실행

프로토타입 함수

더 간결하게 보여지기 위하여 프로토타입을 넣은 함수입니다.

    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. 제이쿼리실행

객체 리터럴 함수

프로토 타입 안에 객체를 개별적으로 넣어 만든 함수입니다.

    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. 제이쿼리실행

'JAVASCRIPT' 카테고리의 다른 글

mouseenter / mouseover  (3) 2022.09.05
요소 크기 속성 및 메서드  (6) 2022.09.01
메서드 (charAt)  (3) 2022.08.22
메서드 (match)  (3) 2022.08.22
메서드 (search)  (3) 2022.08.22

댓글


INFORMATION

javascript

css

html