01. 선언적 함수

함수를 호출할 때 함수의 앞 또는 뒤에서 호출 가능합니다.

 {
    function func(){
        document.write("실행되었습니다.
"); } func(); }
결과 확인하기
"실행되었습니다."

02. 익명 함수

함수 데이터를 저장하여 변수를 마치 함수처럼 사용할 수 있도록 만들어 줍니다.
변수 선언 이후에 호출 해야합니다..

{
    const func = function(){
        document.write("실행되었습니다.
"); } func(); }
결과 확인하기
"실행되었습니다."

03. 매개 함수

함함수를 호출할때 전달하는 변수가 있는 함수를 매개 함수라고 합니다.
매개변수로 전달되는 함수 속성값을 다 전달시킬 수 있습니다.

 {
    function func(str){
        document.write(str);
    }
    func("실행되었습니다.");
}
결과 확인하기
"실행되었습니다."

04. 리턴값 함수

함수를 통해 처리된 결과를 반환시켜주는 명령어 입니다.
함수 내부에서 값을 계산하고 그 값을 함수 외부에 반환할 수 있습니다.
반환된 값은 함수를 호출한 곳에서 변수에 할당하거나 다른 함수의 인수로 사용될 수 있습니다.

  {
    function func(){
        const str = "함수가 실행되었습니다."
        return str;
    }
    document.write(func());
}
결과 확인하기
"함수가 실행되었습니다."

05. 화살표 함수 : 선언적 함수

선언적 함수의 function을 생략한 약식입니다.

{
    func = () => {
        document.write("실행되었습니다.
"); } func(); }
결과 확인하기
"실행되었습니다."

06. 화살표 함수 : 익명 함수

익명 함수의 function을 생략한 약식입니다.

  {
    const func = () => {
        document.write("실행되었습니다.
"); } func(); }
결과 확인하기
"실행되었습니다."

07. 화살표 함수 : 매개변수 함수

매개변수 함수의 function을 생략한 약식입니다.

  {
    func = (str) => {
        document.write(str);
    }
    func("실행되었습니다.");
}
결과 확인하기
"실행되었습니다."

08. 화살표 함수 : 리턴값 함수

리턴값 함수의 function을 생략한 약식입니다.

{
    func = () => {
        const str = "실행되었습니다.
"; return str; } document.write(func();) func(); }
결과 확인하기
"실행되었습니다."

09. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값

func 함수를 정의하고 문자열 매개변수 str을 받아서 동일한 값을 반환합니다.

{
    const func = (str) => {
        return str;
    }
    document.write(func("실행되었습니다."));
}
결과 확인하기
실행되었습니다.

10. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호생략

react에서 많이 쓰는 방식입니다.
변수 값이 하나일때 괄호 생략 가능합니다.

 {
    const func = str => {
        return str;
    }
    document.write(func("실행되었습니다."));
}
결과 확인하기
실행되었습니다.

11. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호생략 +리턴 생략

리턴과 중괄호를 생략해서 쓸 수 있습니다.

{
    const func = str => str;

    document.write(func("실행되었습니다."));
}
결과 확인하기
실행되었습니다

12. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호생략 +리턴 생략

선언적 함수와 매개 변수가 들어간 함수에서 화살표 함수로 리턴과 중괄호, 리턴을 생략해서 쓸 수 있습니다.

{
    func = str => str;
    document.write(func("실행되었습니다."));
}
결과 확인하기

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

입력값(매개변수)을 받아서 그 값을 이용해 작업을 수행한 뒤, 결과를 반환합니다.

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

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

변수에 저장된 값을 이용해 작업을 수행하고, 결과를 반환합니다.

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

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

배열에 저장된 값들을 이용해 작업을 수행하고, 결과를 반환합니다.

{
    function func(num, str1, str2){
        document.write(num+"."+str1+"가"+str2+"되었습니다.");
    }
    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.리액트가실행되었습니다.

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

객체의 속성을 이용해 작업을 수행하고, 결과를 반환합니다.

{
    function func(num, str1, str2){
        document.write(num+"."+str1+"가"+str2+"되었습니다.");
    }
    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.리액트가실행되었습니다.

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

객체들이 모인 배열을 함수를 이용하여 각 객체를 처리하고 함수의 인자로 전달합니다.

{
    function func(num, str1, str2){
        document.write(num+"."+str1+"가"+str2+"되었습니다.");
    }
    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.리액트가실행되었습니다.

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

객체 내부에 함수를 선언하여 객체를 통해 해당 함수를 실행하는 방식입니다.

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

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

생성자 함수를 이용하여 객체를 생성하고, 해당 객체의 메서드를 호출하여 정보를 출력하는 예시입니다.

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

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

프로토타입을 사용하여 함수가 가지고 있는 메소드나 프로퍼티를 다른 객체와 공유할 수 있습니다.
이를 통해 객체의 메모리를 절약하면서도 유사한 객체를 생성할 수 있습니다.

{
    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+"되었습니다.");
    }   //함수가 밖으로 빠져서 원하는 함수만 실행

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

    info1.result();
    info2.result();
    info3.result();
}
결과 확인하기
1.함수가실행되었습니다.
2.자바스크립트가실행되었습니다.
3.리액트가실행되었습니다.

21. 함수 유형 : 객체리터럴 함수

객체를 생성하고 반환하는 함수를 생성하는 것입니다.

{
    function func(num, name, com){
        this.num = num;
        this.name = name;
        this.com = com;
    }
    func.prototype = {
        result1: function(){
            document.write(`${this.num}.${this.name}가${this.com}실행되었습니다.`)
        },
        result2: function(){
            document.write(`${this.num}.${this.name}가${this.com}실행되었습니다.`)
        },
        result3: function(){
                document.write(`${this.num}.${this.name}가${this.com}실행되었습니다.`)
        }
    }
    //인스턴스
    const info1 = new func("102","함수","실행");
    const info2 = new func("202","자바스크립트","실행");
    const info3 = new func("302","리액트","실행");

    //실행문
    info1.result1();
    info2.result2();
    info3.result3();
}
결과 확인하기
102.함수가실행되었습니다.
202.자바스크립트가실행되었습니다.
303.리액트가실행되었습니다.

22. 함수 종류 : 즉시 실행 함수

선언적 함수의 변형이라고 생각하면 쉽습니다.
함수를 정의하고 즉시 실행하는 패턴입니다.
전역 스코프에 추가적인 변수를 노출시키지 않고, 함수 내부의 변수와 함수들이 전역 스코프와 충돌하지 않도록 할 수 있습니다.

{
    (function(){
        document.write("500.함수가 실행되었습니다.")
    })();

    (() => {
        document.write("501.함수가 실행되었습니다.")
    })();
}
결과 확인하기
500.함수가 실행되었습니다.
501.함수가 실행되었습니다.

23. 함수 종류 : 피라미터 함수

매개변수 함수 변형이라고 생각하면 쉽습니다.
함수를 인자로 전달하는 패턴입니다.
다른 함수에서 파라미터 함수를 전달받아 해당 함수를 내부에서 실행하거나, 함수의 결과에 따라 다른 동작을 수행할 수 있습니다.

{
    function func(str = "600.함수가 실행되었습니다."){
        document.write(str);
    }
    func();
}
결과 확인하기
600.함수가 실행되었습니다.

24. 함수 종류 : 아규먼트 함수

함수 내에서 사용할 수 있는 특별한 객체입니다.
이 객체는 함수에 전달된 인자들의 정보를 담고 있습니다.
함수 내부에서 이 인자들을 배열 형태로 사용할 수 있게 합니다.

{
    function func(str1, str2){
        document.write(arguments[0]);
        document.write(arguments[1]);
    }
    func("함수실행1", "함수실행2");
}
결과 확인하기
함수실행1
함수실행2

25. 함수 종류 : 재귀 함수

자기자신을 호출시키는 함수입니다.
함수를 여러 번 실행시켜야 할 떄 사용합니다.

{
    function func(num){
        if(num<=1){
            document.write("함수가 실행되었습니다.")
        } else {
            document.write("함수가 실행되었습니다.")
            func(num-1);
        }
    }
    func(10);
}
결과 확인하기
함수가실행되었습니다.
함수가실행되었습니다.
함수가실행되었습니다.
함수가실행되었습니다.
함수가실행되었습니다.
함수가실행되었습니다.
함수가실행되었습니다.
함수가실행되었습니다.
함수가실행되었습니다.
함수가실행되었습니다.

requestAnimationFrame 메소드를 이용해 애니메이션을 실행하는 코드

무한에 빠지지 않고 로딩도 오래걸리지 않아 재귀함수 대신 많이 사용합니다.

{
    function animation( ){
        document.write("애니메이션이 실행되었습니다.");

        requestAnimationFrame(animation);
    }
    animation( );    
}

26. 함수 종류 : 콜백 함수

함수를 두 번 실행합니다.(다른 함수에 인수로 넘겨지는 함수)

{
    function func( ){
        document.write("2.함수 실행");
    }
    function callback(str){
        document.write("1.함수 실행");
        str( );
    }
    callback(func);
}
결과 확인하기
1.함수가실행되었습니다.
2.함수가실행되었습니다.

1부터 실행한 다음 2를 실행합니다.

(동시실행 하지 않습니다.)