본문 바로가기
JavaScript

함수의 유형

by 코딩 냠냠 2022. 8. 22.
728x90
반응형

함수의 유형

함수(function)란 첫 번째 집합의 한 원소가 두 번째 집합의 오직 한 원소에만 대응하는 관계를 의미합니다. 함수에는 다양한 유형이 있습니다.

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

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

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);
결과보기
1. 함수가 실행되었습니다.2. 자바스크립트가 실행되었습니다.3. 제이쿼리가 실행되었습니다.

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

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

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

function func(num, name, word){
    this.num = num;
    this.name = name;
    this.word = word;           //this를 사용하면 재활용이 가능
            
    this.result = function(){
        document.write(this.num  + ". " + this.name + "가 " + this.word + "되었습니다.");
    }
}
//인스턴스 생성(this 실행)
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 + "되었습니다.");
}
    
//인스턴스 생성(this 실행)
const info1 = new func("1", "함수", "실행");
const info2 = new func("2", "자바스크립트", "실행");
const info3 = new func("3", "제이쿼리", "실행");
    
//실행
info1.result();
info2.result();
info3.result();
결과보기
1. 함수가 실행되었습니다.2. 자바스크립트가 실행되었습니다.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 + "되었습니다.");
    }
}
    
//인스턴스 생성(this 실행)
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' 카테고리의 다른 글

GSAP  (4) 2022.08.29
jQuery  (4) 2022.08.29
charAt( )  (2) 2022.08.22
match( )  (2) 2022.08.22
search( )  (2) 2022.08.22

댓글


자바스크립트

Javascript

자세히 보기
html
css
광고 준비중입니다.
<