함수 유형에 대해서 알아보자

함수function에 대해서 알아보려고 합니다.

 

함수를 어떻게 사용하는 지를 예제로 들면서 설명하겠습니다.

함수를 변수, 매개변수, 배열, 객체, 객체생성자를 함께 써서 사용하고 프로토타입 함수를 예제로 들겠습니다.

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

매개변수를 이용해서 쓴 함수입니다.

매개변수를 지정해줘서 값을 출력할 때 불러주면 되는, 간단하지만 적을 게 많은 식입니다.

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

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

변수를 정해줘서 함수를 실행했습니다.

변수를 하나 하나 정해줬기 때문에 한 눈에 보기에도 이해하기 쉽지만, 역시나 적을 게 많습니다.

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

3. 함수 유형 : 함수와 배열을 이용한 형태

배열을 통해서 함수의 값을 불러왔습니다. 원하는 값을 구할 때에는 단순하게 배열의 순서대로 불러오면 됩니다.

배열 안에 있는 값을 불러오는 식이라서 조금 간략해졌습니다.

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

func(num[0],info[0],info[3]); 
func(num[1],info[1],info[3]); 
func(num[2],info[2],info[3]);
    // 1. 함수가 실행되었습니다.
    // 2. 자바스크립트가 실행되었습니다.
    // 3. 리액트가 실행되었습니다.

4. 함수 유형 : 함수와 객체를 이용한 형태

객체를 통해서 함수를 불러왔습니다. 객체의 형태(obj.a)를 활용하면 됩니다.

객체의 값을 키마다 정해줘서 간단하지만 적을 게 많은 식이 되었습니다.

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

5. 함수 유형 : 함수와 객체, 배열을 이용한 형태

객체와 배열을 함께 활용해서 함수를 실행했습니다. 배열 안에 객체를 넣어서 써줬기 때문에 배열을 먼저 불러오면 됩니다.

배열 안에 있는 객체를 불러오는 식은 '배열[자릿수].객체 키 값'의 형식으로 써주면 됩니다.

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

6. 함수 유형 : 객체 안에 함수를 이용한 형태

객체 안에 함수를 넣어서 함수를 실행했습니다. 

이미 함수를 정해줬기 때문에 결과를 구하는 식이 간단해진 형식입니다.

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

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

this를 활용해서 객체생성자 함수를 만들었습니다.

이 방식을 사용하면, this로 명령하는 모든 식에 적용이 되므로 매우 편리한 방식입니다.

그렇기 때문에 this를 사용하는 법을 알아두면 유용하게 쓸 수 있습니다.

const info = {
    num1 : 1,
    name1 : "함수",
    num2 : 2,
    name2 : "자바스크립트",
    num3 : 3,
    name3 : "리액트",
    word : "실행"
}
    function func(num, name, word){
    this.num = num; // this의 첫 번 째 뜻은 자기자신
    this.name = name;
    this.word = word;

    this.result = function(){
        document.write(this.num +". "+ this.name + "가 " + this.word + "되었습니다.","<br>")
    }
}
const info1 = new func(1, "함수", "실행"); // 인스턴스 생성, new를 붙여서 매개변수와 구별해서 씀(객채생성자 함수)
const info2 = new func(2, "자바스크립트", "실행");
const info3 = new func(3, "리액트", "실행");

info1.result();
info2.result();
info3.result();
    // 1. 함수가 실행되었습니다.
    // 2. 자바스크립트가 실행되었습니다.
    // 3. 리액트가 실행되었습니다.

8. 함수 유형 : 프로토타입 함수

함수 밖에서 프로토타입 함수를 써서 결과값을 냈습니다.

프로토타입을 씀으로써 일일이 식을 정해주지 않아도 모두에 적용이 된 식입니다.

이 방식 또한 조금 더 편리하게 사용할 수 있습니다.

const info = {
    num1 : 1,
    name1 : "함수",
    num2 : 2,
    name2 : "자바스크립트",
    num3 : 3,
    name3 : "리액트",
    word : "실행"
}
    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. 리액트가 실행되었습니다.

함수를 간결하게 쓰기 위해서 생략되는 과정이 담겨있습니다.

그렇기 때문에 이해를 잘 하고 외우는 것이 중요하다고 할 수 있습니다.

 

비슷해보이기 때문에 헷갈리지 않도록 조심하면서 쓰면 유용하게 쓸 수 있습니다.