함수 유형

점점 매운맛🌶인 함수에 대해 알아봅시다!

함수는 실행문이며 재활용을 위해 사용합니다.

📌 함수 유형 : 함수와 매개변수를 이용한 형태
📌 함수 유형 : 함수와 변수를 이용한 형태
📌 함수 유형 : 함수와 배열, 객체를 이용한 형태
📌 함수 유형 : 객체 안에 변수와 함수를 이용한 형태
📌 함수 유형 : 객체 생성자 함수
📌 함수 유형 : 프로토타입 함수
📌 함수 유형 : 객체 리터럴 함수

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

⭐️매개변수 형태⭐️
function func(str){
    document.write(str)
} func("함수가 실행되었습니다.");

🔍 예시

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

결과보기

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

⭐️변수 이용⭐️
const youNum1 = 1;
const youNum2 = 2;
const youNum3 = 3;
const youStr1 = "함수";
const youStr2 = "자바스크립트";
const youStr3 = "제이쿼리";
const youCom1 = "실행";

🔍 예시

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

결과보기

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

🔍 예시

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

결과보기

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

🔍 예시

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

결과보기

📎 함수 유형 : 객체 생성자 함수 ⭐️⭐️⭐️

: 객체의 인스턴스(생성자 함수를 통해 생성한 객체)를 생성하는 함수
: new 연산자를 사용하여 빈 객체 생성 가능
: 동일한 프로퍼티와 메서드를 갖는 객체를 생성할 때 유용하게 사용 가능
: this는 생성자 함수가 생성할 인스턴스를 가리킴

🔍 예시

function func(num, name, word){
    this.num = num; //const 생략하고 this -> 따로따로 저장, this를 통해 재활용(변수가 알아서 만들어짐)
    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();

결과보기

📎 함수 유형 : 프로토타입 함수 ⭐️⭐️⭐️

: 자바스크립트 객체는 prototype이라는 내부 프로퍼티가 있고 다른 객체를 참조하는 단순 레퍼런스로 사용합니다.
: 프로포타입의 주요 기능 : 상속

🔍 예시

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

//인스턴스 생성 -> 이걸 생성해주어야 결과값이 나옴!
const info1 = new func("1", "함수", "실행");
const info2 = new func("2", "자바스크립트", "실행");
const info3 = new func("3", "제이쿼리", "실행");

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

결과보기

📎 함수 유형 : 객체 리터럴 함수

: 컨텐츠를 그대로 대입하는 방법

🔍 예시

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.result();
info2.result();
info3.result();

결과보기

---