[JAVASCRIPT] 함수의 유형

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

이번 시간에는 함수의 유형에 대해 알아보겠습니다! 😁

---

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

첫번째 유형은 변수를 통해 데이터를 전달시킵니다.

! 사용 방법 !
각 변수마다 데이터 값을 선언하고 함수에 변수를 저장하여 실행문을 통해 데이터를 전달!

function func(num, str1, str2){
    document.write(num + ". " + str1 + "가 " + str2 + "되었습니다.14");
}
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. 함수가 실행되었습니다.14 2. 자바스크립트가 실행되었습니다.14 3. 제이쿼리가 실행되었습니다.14

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

두번째 유형은 객체를 사용하여 데이터를 전달시킵니다.

function func(num, str1, str2){
    document.write(num + ". " + str1 + "가 " + str2 + "되었습니다.15");
}

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. 함수가 실행되었습니다.15 2. 자바스크립트가 실행되었습니다.15 3. 제이쿼리가 실행되었습니다.15

#3. 함수 유형 : 객체 생성자 함수

객체가 하나가 있을 땐 info 뒤에 []를 사용하지 않습니다.
16번 유형은 재사용이 불가하기 때문에 아래의 17번 식이 만들어지게 되었습니다.

const info = {
    num1 : 1,
    name1 : "함수",
    word1 : "실행",
    num2 : 2,
    name2 : "자바스크립트",
    word2 : "실행",
    num3 : 3,
    name3 : "제이쿼리",
    word3 : "실행",

    result1 : function(){    
        //객체 안에 함수를 넣은 상태 
        document.write(info.num1 + ". " + info.name1 + "가 " + info.word1 + "되었습니다.16");
    },
    result2 : function(){    
        //객체 안에 함수를 넣은 상태 
        document.write(info.num2 + ". " + info.name2 + "가 " + info.word2 + "되었습니다.16");
    },
    result3 : function(){    
        //객체 안에 함수를 넣은 상태 
        document.write(info.num3 + ". " + info.name3 + "가 " + info.word3 + "되었습니다.16");
    }
}
info.result1(); 
info.result2(); 
info.result3(); 

결과 보기

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

#4. 함수 유형 : 객체 생성자 함수

네번째 유형은 객체 생성자 함수로 두번째 유형의 단점인 재사용을 위해 새로 만들어진 객체 생성자 함수입니다.

! 객체 생성자 함수의 특징 !
1. this. : 이것을 저장하시오. 라는 의미로 재사용을 가능하게 해준다. 2. 객체 생성자를 출력하려면 꼭 인스턴트를 생성 한뒤 실행문을 써주어야 한다.

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 + "되었습니다.17
");
    }
}

//인스턴트 생성 - 데이터 저장
const info1 = new func("1", "함수", "실행"); //데이터 저장  : this. : 이것을 저장하시오. 라는 의미!
const info2 = new func("2", "자바스크립트", "실행");
const info3 = new func("3", "제이쿼리", "실행");

//실행

info1.result();
info2.result();
info3.result();

결과 보기

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

#5. 함수 유형 : 프로토타입 함수

프로토타임 함수는 데이터에 이어 메모리까지 재사용을 하기 위해 나온 함수입니다.

unction func(num, name, word){ //저장한 데이터를 변수에게 데이터 전달
    this.num = num; //재사용울 위해 const를 생략하고 this.를 붙인다.
    this.name = name;
    this.word = word;
}
func.prototype.result = function(){
    document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다.18
");
}

//인스턴트 생성 - 데이터 저장
const info1 = new func("1", "함수", "실행"); //데이터 저장  : this. : 이것을 저장하시오. 라는 의미!
const info2 = new func("2", "자바스크립트", "실행");
const info3 = new func("3", "제이쿼리", "실행");

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

결과 보기

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

#6. 함수 유형 : 객체 리터럴 함수

마지막 유형인 객체 리터럴 함수는 함수를 리터럴 객체 안에 넣어 원하는 값만 추출하기 용이합니다.

function func(num, name, word){ //저장한 데이터를 변수에게 데이터 전달
    this.num = num; //재사용을 위해 const를 생략하고 this.를 붙인다.
    this.name = name;
    this.word = word;
}
func.prototype = {
    result1 : function(){
        document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다.19
");
    },
    result2 : function(){
        document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다.19
");
    },
    result3 : function(){
        document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다.19
");
    }
}

//인스턴트 생성 - 데이터 저장
const info1 = new func("1", "함수", "실행"); //데이터 저장  : this. : 이것을 저장하시오. 라는 의미!
const info2 = new func("2", "자바스크립트", "실행");
const info3 = new func("3", "제이쿼리", "실행");

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

결과 보기

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