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.선언적 함수

화살표 함수로 전환

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

06.익명 함수

화살표 함수로 전환

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

07.매개 변수

화살표 함수로 전환

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

08.리턴 함수

화살표 함수로 전환

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

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

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

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

{
    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: "함수"
        },{
            num: 2, 
            name: "자바스크립트"
        },{
            num: 3, 
            name: "리액트",
            word: "실행"
        }   
    ]
    func(info[0].num,info[0].name,info[2].word);
    func(info[1].num,info[1].name,info[2].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. 함수 유형 : 프로토타입 함수

자바스크립트에서 객체의 원형을 정의하는 객체 프로토타입(Prototype)에 메소드를 추가하는 방법입니다. 이러한 방법으로 생성된 함수는 해당 객체의 모든 인스턴스에서 공유됩니다.

{
    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. 함수 유형 : 객체리터럴 함수

자바스크립트에서 객체의 원형을 정의하는 객체 프로토타입(Prototype)에 메소드를 추가하는 방법입니다. 이러한 방법으로 생성된 함수는 해당 객체의 모든 인스턴스에서 공유됩니다.

{
    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. 자바스크립트가 실행되었습니다.
302. 리액트가 실행되었습니다.

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

자바스크립트에서 객체의 원형을 정의하는 객체 프로토타입(Prototype)에 메소드를 추가하는 방법입니다. 이러한 방법으로 생성된 함수는 해당 객체의 모든 인스턴스에서 공유됩니다.

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

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

자바스크립트에서 객체의 원형을 정의하는 객체 프로토타입(Prototype)에 메소드를 추가하는 방법입니다. 이러한 방법으로 생성된 함수는 해당 객체의 모든 인스턴스에서 공유됩니다.

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

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

자바스크립트에서 객체의 원형을 정의하는 객체 프로토타입(Prototype)에 메소드를 추가하는 방법입니다. 이러한 방법으로 생성된 함수는 해당 객체의 모든 인스턴스에서 공유됩니다.

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

25. 함수 종류 : 재귀 함수(자기 자신을 호출시키는 함수)

자바스크립트에서 객체의 원형을 정의하는 객체 프로토타입(Prototype)에 메소드를 추가하는 방법입니다. 이러한 방법으로 생성된 함수는 해당 객체의 모든 인스턴스에서 공유됩니다.

{ 
    // 첫번째 방법 
    function func(num){
        if(num<=1){
            document.write("함수가 실행되었습니다.<br>");
        } else {
            document.write("함수가 실행되었습니다.");
            func(num-1);
        }
    }
    func(10);
    // 두번째 방법
    function animation(){
        document.write("애니메이션이 실행되었습니다.");

        requestAnimationFrame(animation);
    }
    // animation();
}
결과 확인하기
함수가 실행되었습니다.함수가 실행되었습니다.함수가 실행되었습니다.함수가 실행되었습니다.함수가 실행되었습니다.함수가 실행되었습니다.함수가 실행되었습니다.함수가 실행되었습니다.함수가 실행되었습니다.함수가 실행되었습니다.

26. 함수 종류 : 콜백 함수 : 함수를 두번 실행(다른 함수에 인수로 넘겨지는 함수)

자바스크립트에서 객체의 원형을 정의하는 객체 프로토타입(Prototype)에 메소드를 추가하는 방법입니다. 이러한 방법으로 생성된 함수는 해당 객체의 모든 인스턴스에서 공유됩니다.

{
    // function func1(){
    //     document.write("1.함수 실행");
    // }
    // function func2(){
    //     document.write("2.함수 실행");
    // }
    // func1();
    // func2();
    
    function func(){
        document.write("2.함수 실행");
    }
    function callback(str){
        document.write("1.함수 실행");
        str();
    }
    callback(func); 
}
결과 확인하기
1.함수 실행2.함수 실행