01. 선언적 함수

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

02. 익명 함수

const func = function(){
    document.write("함수가 실행되었습니다.2");
    }
    func();
결과 보기

03. 매개변수 함수

function func(str){
    document.write(str);
    }
func("함수가 실행되었습니다.3");
결과 보기

04. 리턴값 함수

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

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

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

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

//화살표 함수2
func = () => document.write("함수가 실행되었습니다.5");

func();
결과 보기

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

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

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

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

func();
결과 보기
함수가 실행되었습니다.06

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

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

// 화살표 함수1
func = (str) => {
    document.write(str);
}

// 화살표 함수2
func = (str) => document.write(str);

//화살표 함수3
func = str => document.write(str);

func("함수가 실행되었습니다.7");
결과 보기
함수가 실행되었습니다.07

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

{
    // function func(){
    // const str = ("함수가 실행되었습니다.8");
    // return str;
    // }
    // document.write(func());
    
        func=() => {
        const str = ("함수가 실행되었습니다.8");
        return str;
        }
        document.write(func());
        }
    }
결과 보기
함수가 실행되었습니다.08

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

const func = (str) => {
    return str;
}
document.write(func("함수가 실행되었습니다.9"));
결과 보기

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

const func = (str) => {
    return str;//결과를 의미
}
document.write(func("함수가 실행되었습니다.10"));
결과 보기

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

const func = str => str;
    
document.write(func("함수가 실행되었습니다.11"));
결과 보기

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

func = str => str;
        
document.write(func("함수가 실행되었습니다.12"));
결과 보기

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

function func(num, str1, str2) {
    document.write(num + str1 + str2 + "되었습니다.");
}
func("1", "함수", "실행");
func("2", "자바스크립트", "실행");
func("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(younum2, youstr2, youcom1);
결과 보기

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

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);
결과 보기

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

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);
결과 보기

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

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();
결과 보기

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


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();
결과 보기

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


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();
결과 보기

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


//즉시 실행 함수
(function func() {
    document.write("함실행")
}());

//즉시 실행 함수- 화살표 함수
(() => {
    document.write("함실행")
})();
결과 보기

21. 파라미터 함수


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

        function func(str = "함수실행22") {
            document.write(str);
        }
        func();
결과 보기

22. 아규먼트 함수

function func(a, b) {

    document.write(arguments[0]);
    document.write(arguments[1]);
}
func("함수실행22.1", "함수실행22.2");
결과 보기

23. 재귀 함수 : 자기 자신을 호출

function func(num) {
    if (num<=1){
        document.write("함수가 실행되었습니다." + num);
    }else {
        document.write("함수가 실행되었습니다." + num);
        func(num - 1);
    }
    // func();
}

func(10);
결과 보기

24. 콜백 함수 : 다른 함수에 인수로 넘겨지는 함수

function func() {
    document.write("함실행1");
}
function callback(str) {
    document.write("함실행2");

    str();
}
callback(func);
결과 보기

24. 콜백 함수 : 다른 함수에 인수로 넘겨지는 함수q반복문)

function func() {
    document.write("함실행1");
}
function callback(str) {
    document.write("함실행2");

    str();
}
callback(func);
결과 보기

26. 콜백 함수 : 동기/비동기

function funcA() {
    document.write("funcA가 실행되었습니다.
"); } function funcB() { document.write("funcB가 실행되었습니다.
"); } funcA(); funcB(); a b //02 function funcA() { setTimeout(()=>{ console.log("funcA가 실행되었습니다.
"); },1000); } function funcB() { console.log("funcB가 실행되었습니다.
"); } funcA(); funcB(); b a //03 function funcA(callback){ setTimeout(()=>{ console.log("함수가 실행되었습니다.
") callback(); }, 1000); } function funcB() { console.log("funcB가 실행되었습니다.
"); } funcA(function(){ funcB(); }); //04 콜백지옥 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(); }); }); });
결과 보기
funcA 함수가 실행되었습니다.
funcB 함수가 실행되었습니다.
funcC 함수가 실행되었습니다.
funcD 함수가 실행되었습니다.

27. promise 함수


결과 보기

28. 내부 함수 : 스코프, 클로져

//내부함수는 변수를 불어오는 게 복잡해지고 문제가 되기 때문에 클로져 개념이 등장하였습니다.
//함수의 규모가 커지면 변수를 불러오는 데에 여러가지 오류가 생깁니다.
//스코프와 클로져는 같은 개념이라고 보면 됩니다.
function func(){
    function funcA(){
        document.write("함수가 실행되었습니다.");
    };
    funcA();

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

29

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;
    }

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

const info1 = new study ("1", "웹쓰", "웹퍼블리셔");
const info2 = new study2 ("2", "지니닝", "프론트엔드 개발자", "100");

info1.result();
info2.result2();
결과 보기