JavaScript

function func() {
    document.write("함수가 실행되었습니다.1
");
}
func();     // 이게 있어야 출력됨

const func = function() {        // const func()라는 변수명에 함수 코드를 저장시키는 것
    document.write("함수가 실행되었습니다.2
");
}
func();

function func(str1, str2, str3) {        // 변수 여러개 저장 가능
    document.write(str1);
    document.write(str2);
    document.write(str3);
}
func("함수가 실행되었습니다.3", "함수실행.3", "함수.3");        // 순서대로 func(str1, str2, str3...)이런 식으로 출력되는 것

function func() {
    const str = "함수가 실행되었습니다.4
";
    return str;     // return으로 결과값 뿌려줌, 종료를 의미하기도 함.
}
document.write(func());

// 화살표 함수로 간략화
/*
func = () => {
    document.write("함수가 실행되었습니다.5");
}
func();
*/

// 중괄호 생략
func = () => document.write("함수가 실행되었습니다.5"); 

func();

/*
const func = () => {
    document.write("함수가 실행되었습니다.6");
}
*/

const func = () => document.write("함수가 실행되었습니다.6");

func();

/*
func = (str) => {
    document.write(str);
}
*/
func = str => document.write(str);

func("함수가 실행되었습니다.7");

func = () => {
    const str = "함수가 실행되었습니다.8";
    return str;
}

document.write(func());

{
    const func = (str) => {     // 익명함수 = (매개변수) => {}
        return str;     // 리턴값
    }
    document.write(func("함수가 실행되었습니다.9
"));    // 리턴값처럼 출력
}

{
    const func = str => {   // 변수 1개일 때는 괄호 생략 가능
        return str;     // 결과 의미
    }
    document.write(func("함수가 실행되었습니다.10
"));
}

{
    const func = str => str; // 리턴 생략, 중괄호도 생략

    document.write(func("함수가 실행되었습니다.11
"));
}

{
    func = str => str;      // 선언적함수에서는 const만 지우면 됨

    document.write(func("함수가 실행되었습니다.12
"));
}

{
    function func(num, str1, str2) {
        document.write(num + ". " + str1 + "가 " + str2 + "되었습니다. 
");
    }
    func("1", "함수", "실행");
    func("2", "자바스크립트", "실행");
    func("3", "제이쿼리", "실행");   // 이런식으로 추가하면서 소스 재활용이 가능함
}

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

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

{
    function func(num, name, word) {
        this.num = num;
        this.name = name;
        this.word = word;
    }

    func.prototype.result = function() {    // 함수 바깥으로 빼준 다음 prototype 추가
        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.result1();
    info2.result2();
    info3.result3();
}

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

    // 화살표 함수로 간략화
    (() => {
        document.write("함수가 실행되었습니다.");
    })();
}

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

    // 파라미터 함수
    function func(str = "함수가 실행되었습니다.") {
        document.write(str);
    }
    func();
}

{
    function func(a, b) {
        document.write(arguments[0]);   // 0 = a를 의미
        document.write(arguments[1]);   // 1 = b를 의미
    }
    func("함수가 실행되었습니다. 1", "함수가 실행되었습니다. 2");
}

{
    // 반복적으로
    function func(num) {
        if(num <= 1) {
            document.write("함수가 실행되었습니다." + num);
        } else {
            document.write("함수가 실행되었습니다." + num);
            func(num - 1);
        }
    }
    func(10);
    
    // // 애니메이션
    // function animation() {
    //     document.write("함수가 실행되었습니다.");

    //     requestAnimationFrame(animation);    
    // }
    // animation();

    // 결과 : "함수가 실행되었습니다."가 셀 수 없이 반복해서 등장함
}

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

    callback(func);
}

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

    function callback(num) {
        for(let i=1; i<=10; i++){
            num(i);
        }
    }
    
    callback(func);
}

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

    function callback(num) {
        for(let i=1; i<=10; i++){
            num(i);
        }
    }
    
    callback(func);
}

{
    // 동기:동시실행
    function funcA() {
        document.write("funcA가 실행되었습니다.
");
    }
    function funcB() {
        document.write("funcB가 실행되었습니다.
");
    }
    funcA();
    funcB();

    function funcA() {
        setTimeout(() => {
            console.log("funcA가 실행되었습니다.
");
        },1000);
    }
    function funcB() {
        console.log("funcB가 실행되었습니다.
");
    }
    funcA();
    funcB();
    // B->A

    // 비동기:동시실행X(필요한것만가져옴)
    function funcA(callback) {
        setTimeout(() => {
            console.log("funcA가 실행되었습니다.
");
            callback();
        }, 1000);
    }
    function funcB() {
        console.log("funcB가 실행되었습니다.
");
    }
    funcA(function(){
        funcB();
    })
    // A->B

    //
    function funcA(callback) {
        setTimeout(() => {
            console.log("funcA가 실행되었습니다.
");
            callback();
        }, 1000);
    }
    function funcB(callback) {
        setTimeout(() => {
            console.log("funcB가 실행되었습니다.
");
            callback();
        }, 1000);
    }
    function funcC(callback) {
        setTimeout(() => {
            console.log("funcC가 실행되었습니다.
");
            callback();
        }, 1000);
    }
    function funcD(callback) {
        setTimeout(() => {
            console.log("funcD가 실행되었습니다.
");
        }, 1000);
    }

    funcA(function(){
        funcB(function(){
            funcC(function(){
                funcD();
            });
        });
    });

    // 결과 : a > b > c > d 실행
}

{
    
}

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

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

{
    class study {
        constructor(num, name, job){
            this.num = num;
            this.name = name;
            this.job = job;
        }

        result(){
            document.write(this.num + ". 내 이름은 " + this.name + "이며, 직업은 " + this.job + "입니다.");
        }

    }
    const info1 = new study("1", "웹쓰", "웹퍼블리셔");
    const info2 = new study("2", "웹스토리보이", "프론트앤드 개발자");
    info1.result();
    info2.result();
}

{
    class study {
        constructor(num, name, job){
            this.num = num;
            this.name = name;
            this.job = job;
        }

        result(){
            document.write(this.num + ". 내 이름은 " + this.name + "이며, 직업은" + this.job + "입니다.");
        }

    }

    class study2 extends study {
        constructor(num, name, job, age){
            super(num, name, job);
            this.age = age;
        }
        result(){
            document.write(this.num + ". 내 이름은 " + this.name + "이며, 직업은" + this.job + "이며 나이는 " + this.age + "살 입니다.");
        }
    }

    const info1 = new study("1", "웹쓰", "웹퍼블리셔");
    const info2 = new study2("2", "웹스토리보이", "프론트앤드 개발자", 100);

    info1.result();
    info2.result();
    info2.result2();
}