JAVASCRIPT 함수유형

javascript에서 사용하는 함수의 유형 몇가지

이번에는 javascript의 함수유형에 대해 간단하게 몇 가지 알아보겠습니다.

 

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

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

결과 확인하기

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

 

함수와 변수를 이용한 형태

function func(num, str1, str2){
    document.write(num + "." + str1 + "가 " + str2 + "되었습니다.<br>");
}
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 + "되었습니다.<br>");
}
const num = [1, 2, 3];
const info = ["함수", "자바스크립트", "리액트"];
const str = ["실행"];

func(num[0], info[0], str[0]);
func(num[1], info[1], str[0]);
func(num[2], info[2], str[0]);

결과 확인하기

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

 

함수와 객체를 이용한 형태

function func(num, str1, str2){
    document.write(num + "." + str1 + "가 " + str2 + "되었습니다.<br>");
}
const info = {
    num1 : 1,
    name1 : "함수",
    num2 : 2,
    name2 : "자바스크립트",
    num3 : 3,
    name3 : "리액트",
    word : "실행"
}
func(info.num1, info.name1, info.word);
func(info.num2, info.name2, info.word);
func(info.num3, info.name3, info.word);

결과 확인하기

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

 

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

function func(num, str1, str2){
    document.write(num + "." + str1 + "가 " + str2 + "되었습니다.<br>");
}
const info = [
    {
        num : 1,
        name : "함수",
        word : "실행"
    },
    {
        num : 2,
        name : "자바스크립트",
        word : "실행"
    },
    {
        num : 3,
        name : "리액트",
        word : "실행"
    }
]

func (info[0].num, info[0].name, info[0].word);
func (info[1].num, info[1].name, info[1].word);
func (info[2].num, info[2].name, info[2].word);

결과 확인하기

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

 

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

const info = {
    num1 : 1,
    name1 : "함수",
    num2 : 2,
    name2 : "자바스크립트",
    num3 : 3,
    name3 : "리액트",
    word : "실행",
    result1 : function(){
        document.write(info.num1 + "." + info.name1 + "가 " + info.word + "되었습니다.");
    },
    result2 : function(){
        document.write(info.num2 + "." + info.name2 + "가 " + info.word + "되었습니다.");
    },
    result3 : function(){
        document.write(info.num3 + "." + info.name3 + "가 " + info.word + "되었습니다.");
    }
}

info.result1();
info.result2();
info.result3();

결과 확인하기

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

 

객체생성자 함수를 이용한 형태

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.리액트가 실행되었습니다.

Tip !

Javascript에서 'this'는 현재 실행 컨텍스트에서 참조하는 객체를 가리키는 특별한 키워드입니다.

어떤 함수가 호출되면, 그 함수의 내부 코드에서 'this' 키워드는 호출한 객체를 참조합니다. 그러나 'this'는 호출한 함수의 매개 변수나 지역 변수가 아닌, 호출한 객체의 속성을 참조할 수 있습니다.

'this'의 값은 함수를 어떻게 호출하느냐에 따라 달라질 수 있습니다. 예를 들어, 객체 메소드에서 'this'를 사용하면 해당 객체를 참조합니다. 하지만 일반적인 함수에서 'this'를 사용하면 전역 객체를 참조할 수도 있습니다.

프로토타입 함수

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

const info1 = new Func(1,"함수","실행");
const info2 = new Func(2,"자바스크립트","실행");
const info3 = new Func(3,"리액트","실행");

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

결과 확인하기

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

Tip !

프로토타입 객체는 해당 객체와 연결된 메서드와 속성을 가지고 있습니다. 이러한 메서드를 프로토타입 함수 또는 프로토타입 메서드라고 합니다.

프로토타입 함수를 사용하면 해당 객체를 생성하는 모든 객체에서 동일한 메서드를 사용할 수 있습니다. 이는 메모리 사용을 줄이고 유지 보수성을 높이는데 도움이 됩니다.

 

 

 

 

이상으로 함수 유형 몇 가지를 알아보았습니다 !