javascript

{
    function func(){
        document.write("함수가 실행되었습니다. 01번"); // 브라우저 객체
    }
    func(); // 마지막에 한번 더 func()로 감싸줘야 실행이 된다.
}

{
    const func = function(){ // 변수 이름(func) 을 쓰고 있어 익명 함수라 칭한다. 
        document.write("함수가 실행되었습니다. 02번");
    }
    func(); 
}

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

{
    function func(){
        const str = "함수가 실행되었습니다. 04번 
";
        return str; // 실행문은 아니지만 결과값으로 저장은 되어있다.
    }
    document.write(func()); // 리턴값 함수에서는 도큐멘트 안에 함수 실행문이 들어간다. [리턴값이 있기에 실행이 될 수 있는 것]
}

{
    //  func = () => { //function을 없애고 func = () => 만 넣어준다.
    //     document.write("함수가 실행되었습니다. 05번");
    // }
    // func();

    func = () => document.write("함수가 실행되었습니다. 05번"); // {}를 지우고 한 줄로 줄일 수 있다.

    func();
}

{
    // 익명 함수를 화살표 함수로 바꾼 경우
    // const func = () => {
    //     document.write("함수가 실행되었습니다. 06번");
    // }
    // func();

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

    func();
}

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

    // 매개변수 함수를 화살표 함수로 바꾼 경우
    // func = (str) => {
    //     document.write(str);
    // }
    // func("함수가 실행되었습니다. 07번");

    // func = (str) => document.write(str);
     func = str => document.write(str); // ()를 빼고 한번 더 줄일 수 있다.

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

{
    // function func(){
    //     const str = "함수가 실행되었습니다. 08번";
    //     return str;
    // }
    // document.write(func());

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

{
    const func = (str) => { // const : 익명함수 시작 , (str) : 매개변수
        return str; // 리턴값 함수
    }

    document.write(func("함수가 실행되었습니다 09")); //리턴값 함수
}

{
    const func = str => { // str ()괄호 생략
        return str; 
    }

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

{
    const func = str => str; // str ()괄호 생략, 리턴 생략

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

{
    func = str => str; // str ()괄호 생략, 리턴생략, const 생략

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

function func(num, str1, str2) { // 함수의 특징 : 함수는 실행문이다.(실행문의 집합체) | 소스 재활용 목적
    document.write(num + str1 + str2 + " 01 " + "
");
};
        
func("1. ", "함수", "실행"); // (num, str1 , str2) 에 해당
func("2. ", "자바스크립트", "실행"); // 위에 함수를 재활용하여 같이 나온다.
func("3. ", "제이쿼리", "실행");

function func(num, str1, str2) { //
    document.write(num + ". " + str1 + str2 + " 02 ");
};

const youNum1 = 1;
const youNum2 = 2;
const youNum3 = 3;
const youStr1 = "함수 ";
const youStr2 = "자바스크립트 ";
const youStr3 = "제이쿼리 ";
const youCom = "실행 ";

func(youNum1, youStr1, youCom);
func(youNum2, youStr2, youCom);
func(youNum3, youStr3, youCom);

function func(num, str1, str2) { //
    document.write(num + ". " + str1 + str2 + " 03 " + "
");
};

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: "함수 ",
    com1: "실행 ",
    num2: 2,
    name2: "자바스크립트 ",
    com2: "실행 ",
    num3: 3,
    name3: "제이쿼리 ",
    com3: "실행 ",

    // result1 : function(){
    //     document.write("함수 실행 04");
    // }
    result1: function () {
        document.write(info.num1 + ". " + info.name1 + info.com1 + "04" + "
");
    },
    result2: function () {
        document.write(info.num2 + ". " + info.name2 + info.com2 + "04" + "
");
    },
    result3: function () {
        document.write(info.num3 + ". " + info.name3 + info.com3 + "04" + "
");
    }
};

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

function func(num, name, com) {
    this.num = num; // const 생략
    this.name = name;
    this.com = com;

    this.result = function () {
        document.write(this.num + ". " + this.name + this.com + "
"); // 여기까지만 하게 되면 실행이 안됩니다.
    }
}

// 일반 함수와 다르다 보니 실행하는 법도 다르다. (인스턴스 생성)
const info1 = new func("1", "함수 ", "실행 05");
const info2 = new func("2", "자바스크립트 ", "실행 05");
const info3 = new func("3", "제이쿼리 ", "실행 05");

// 실행
info1.result();
info2.result();
info3.result();

function func(num, name, com) {
    this.num = num; // const 생략
    this.name = name;
    this.com = com;
}

func.prototype.result = function () {
    document.write(this.num + ". " + this.name + this.com + "
"); // 여기까지만 하게 되면 실행이 안됩니다.
}

// 일반 함수와 다르다 보니 실행하는 법도 다르다. (인스턴스 생성)
const info1 = new func("1", "함수 ", "실행 06");
const info2 = new func("2", "자바스크립트 ", "실행 06");
const info3 = new func("3", "제이쿼리 ", "실행 06");

// 실행
info1.result();
info2.result();
info3.result();;

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("1", "함수 ", "실행 07");
const info2 = new func("2", "자바스크립트 ", "실행 07");
const info3 = new func("3", "제이쿼리 ", "실행 07");

// 실행
info1.result1();
info2.result2();
info3.result3();

(function func(){
    document.write("함수 실행");
}());
            
//생략
(()=> {
    document.write("함수 실행");
})();

function func(str = "함수 실행") {
    document.write(str);
}
func();

function func(a, b) {
    document.write(arguments[0]);
    document.write(arguments[1]);
}
func("함수 실행", "함수 실행");

// 반복적으로 실행할 때 사용
function func(num) {
    if (num <= 1) {
        document.write("함수 실행" + num);
    } else {
        document.write("함수 실행" + num);
        func(num - 1);
    }
                
    // func(); 무한
}
                
func(10);
                
// 애니메이션 실행 할 때 사용
// function animation() {
//     document.write("함수 실행");
                
//     requestAnimationFrame(animation);
                
//     // func();
// }
                
// animation();

// callback을 완벽히 실행 후 그 다음을 실행
function func() {
    document.write("함수 실행 02");
}

function callback(str) {
    document.write("함수 실행 01");
    str();
}

callback(func);

function func(index) {
    document.write("함수 실행" + index);
}

function callback(num) {
    for (let i = 1; i <= 10; i++) {
        num(i); // num이 10번 반복 된다.
    }
}

// B가 실행이 되고 A가 나온다.
function funcA() {
    setTimeout(() => {
        console.log("funcA 실행");
    }, 1000); // 1초 후에 실행이 된다.
}

function funcB() {
    console.log("funcB 실행");
}

funcA();
funcB();

// A가 실행이 되고 B가 나온다.
function funcA(callback) {
    setTimeout(() => {
        console.log("funcA 실행");
        callback();
    }, 1000);
}

function funcB() {
    console.log("funcB 실행");
}

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

// A > B > C > D 순서로 실행
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() {
    setTimeout(() => {
        console.log("funcD 실행");
    }, 1000);
}

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

function func() {
    function funcA() {
        document.write("함수 실행A");
    }
    funcA();

    function funcB() {
        document.write("함수 실행B");
    }
    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); // 기존에 사용한 생성자 함수를 재활용 하기 위해 super 사용(상속개념)
        this.age = age;
    }
    // 함수 실행문
    result2() {
        document.write(this.num + ". 내 이름은 " + this.name + "이며, 직업은 " + this.job + "이며, 나이는 " + this.age + " 입니다.
");
    }
}
// 인스턴스 생성
const info1 = new study("1", "웹쓰", "웹퍼블리셔");
const info2 = new study2("2", "코초딩", "프론트앤드 개발자", 26);
// 실행문
info1.result();
info2.result();
info2.result2();