Top

01. 선언적 함수

선언적 함수는 함수를 선언할 때 이름을 붙여주는 함수를 말합니다.
즉, 따로 변수에 넣어주지 않고 선언할 때 붙여준 이름으로 호출하면 됩니다. 

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

02. 익명 함수

익명함수는 이름이 없는 함수입니다. 따라서 익명함수를 선언하고 사용하기 위해서는 변수에 넣어서 사용하여야 합니다. 

//데이터 타입(자료형) --> 타입스크립트가 보충해줌
// const x = 100;
// const x1 = "100";
// const x2 = [];
// const x3 = {};
// const x4 = null, undefined;
// const x5 = function(){};
// const x6 = true, false;

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

03. 매개변수 함수

매개변수란 함수를 정의하면서, 함수 선언식의 괄호'()'안에 어떤 변수명을 쓰는 것입니다. 

function func(str){  //함수안에 들어간 str 파라미터, 인자, 변수라고 함 밑에func이 여기에 전달되서 document로 실행되는 것
    document.write(str);
}
func("함수가 실행되었습니다.3
");
결과보기

04. 리턴값 함수

리턴값이란 함수가 어떤 기능을 수행하고 그 결과를 호출한 곳으로 돌려주는 값을 말합니다.
함수가 어떤 기능을 수행하고 돌려줄 값이 있으면 return 명령을 사용합니다. 

function func(){
    const str = "함수가 실행되었습니다.4";
    return str; //실행문은 아니나 결과값으로 저장되는 것
}
document.write(func());
결과보기

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

화살표 함수는 func = () = > {} 이런 형태로 나타냅니다. 05.화살표 함수는 선언적 함수를 표현합니다. 

func = () => { //function 귀찮아서 없애고 기호로! =>선언적 함수와 같은 것임
    document.write("함수가 실행되었습니다.5
")
}
func(); 

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

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

화살표 함수는 func = () = > {} 이런 형태로 나타냅니다. 06.화살표 함수는 익명 함수를 표현합니다. 

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

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

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

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

화살표 함수는 func = () = > {} 이런 형태로 나타냅니다. 07.화살표 함수는 매개변수 함수를 표현합니다. 

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

func = (str) => document.write(str); //앞에 const있어도 상관없음

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

func = str => document.write(str); //괄호 생략 가능

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

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

화살표 함수는 func = () = > {} 이런 형태로 나타냅니다. 08.화살표 함수는 리턴값 함수를 표현합니다. 

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

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

화살표 함수 : 익명 함수는 const func = () = > {} 이런 형태로 나타냅니다. 여기서 ()값에 변수를 넣어 매개변수와 그 후에 return을 적어 주어 리턴값까지 조화 가능합니다. 

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

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

화살표 함수 : 익명 함수는 const func = () = > {} 이런 형태로 나타냅니다. 여기서 ()값에 변수를 넣어 매개변수와 그 후에 return을 적어 주어 리턴값까지 조화 가능합니다. 그리고 추가로 변수를 넣는 ()를 생략할 수 있습니다. 

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

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

화살표 함수 : 익명 함수는 const func = () = > {} 이런 형태로 나타냅니다. 여기서 ()값에 변수를 넣어 매개변수와 그 후에 return을 적어 주어 리턴값까지 조화 가능합니다. 그러나 변수를 넣는 ()과 return는 생략할 수 있습니다. 

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

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

화살표 함수 : 선언적 함수는 func = () = > {} 이런 형태로 나타냅니다. 여기서 ()값에 변수를 넣어 매개변수와 그 후에 return을 적어 주어 리턴값까지 조화 가능합니다. 그러나 변수를 넣는 ()과 return는 생략할 수 있습니다. 

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(youNum3, youStr3, youCom1);
}
결과보기
1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 제이쿼리가 실행되었습니다.

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. 함수 유형 : 객체 안에 변수와 함수를 이용한 형태

함수 : 실행문, 재활용 

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

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

함수 : 실행문, 재활용 

function func(num, name, word){
    this.num = num; //const 생략하고 this -> 따로따로 저장, this를 통해 재활용(변수가 알아서 만들어짐)
    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 함수명(매개변수){}
new로 객체 생성 

function func(num, name, word){
    this.num = num; //const 생략하고 this -> 따로따로 저장, this를 통해 재활용(변수가 알아서 만들어짐)
    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; //const 생략하고 this -> 따로따로 저장, this를 통해 재활용(변수가 알아서 만들어짐)
            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.result();
        info2.result();
        info3.result();
결과보기
1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 제이쿼리가 실행되었습니다.

20. 즉시 실행 함수

함수 : 실행문, 재활용 

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

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

21. 파라미터 함수

함수 : 실행문, 재활용 

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

22. 아규먼트 함수

함수 : 실행문, 재활용 

function func(a, b){
    document.write(arguments[0]);
    document.write(arguments[1]);
}
func("함수가 실행되었습니다.", "함수가 실행되었습니다.")
결과보기
함수가 실행되었습니다.
함수가 실행되었습니다.

23. 재귀 함수

자기 자신을 호출해주는 함수 

//반복적으로
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();
결과보기
함수가 실행되었습니다.
함수가 실행되었습니다.

24. 콜백 함수

다른 함수에 인수로 넘겨지는 함수 

//풀어서 해석
function func1(){
    document.write("함수가 실행되었습니다.1");
}
function func2(){
    document.write("함수가 실행되었습니다.2");
}
func1();
func2();

//콜백(1번) 실행되고 위에 함수(2번)이 실행됨 
function func(){
    document.write("함수가 실행되었습니다.2");
}
//매개변수 str
function callback(str){
    document.write("함수가 실행되었습니다.1");
    str();
}
callback(func);
결과보기
함수가 실행되었습니다.1
함수가 실행되었습니다.2

25. 콜백 함수

자기 자신을 호출해주는 함수 

//콜백함수 반복문
function func(index){
    document.write("함수가 실행되었습니다." + index);
}
//매개변수 str
function callback(num){
    for( let i=1; i<=10; i++){
        num(i);
    }
}
callback(func);
결과보기
함수가 실행되었습니다.1
함수가 실행되었습니다.2
함수가 실행되었습니다.3
함수가 실행되었습니다.4
함수가 실행되었습니다.5
함수가 실행되었습니다.6
함수가 실행되었습니다.7
함수가 실행되었습니다.8
함수가 실행되었습니다.9
함수가 실행되었습니다.10

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

자기 자신을 호출해주는 함수 

//콜백함수 반복문
function func(index){
    document.write("함수가 실행되었습니다." + index);
}
//매개변수 str
function callback(num){
    for( let i=1; i<=10; i++){
        num(i);
    }
}
callback(func);
결과보기
함수가 실행되었습니다.1
함수가 실행되었습니다.2
함수가 실행되었습니다.3
함수가 실행되었습니다.4
함수가 실행되었습니다.5
함수가 실행되었습니다.6
함수가 실행되었습니다.7
함수가 실행되었습니다.8
함수가 실행되었습니다.9
함수가 실행되었습니다.10

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

자기 자신을 호출해주는 함수 

function funcA(callback){
    setTimeout(() => {
        console.log("funcA가 실행되었습니다.
");
        callback();
    }, 1000);
}
function funcB(){
    console.log("funcB가 실행되었습니다.
");
    setTimeout(() => {
        console.log("funcA가 실행되었습니다.
");
        callback();
    }, 1000);
}
function funcC(){
    console.log("funcC가 실행되었습니다.
");
    setTimeout(() => {
        console.log("funcA가 실행되었습니다.
");
        callback();
    }, 1000);
}
function funcD(){
    console.log("funDB가 실행되었습니다.
");
    setTimeout(() => {
        console.log("funcA가 실행되었습니다.
");
        callback();
    }, 1000);
}
funcA(function(){
    funcB(function(){
        funcC(function(){
            funcD();
        })
    });
});
결과보기
함수가 실행되었습니다.1
함수가 실행되었습니다.2
함수가 실행되었습니다.3
함수가 실행되었습니다.4
함수가 실행되었습니다.5
함수가 실행되었습니다.6
함수가 실행되었습니다.7
함수가 실행되었습니다.8
함수가 실행되었습니다.9
함수가 실행되었습니다.10

28. 내부 함수 : 스코프, ⭐️클로져⭐️
결과보기
함수가 실행되었습니다.1
함수가 실행되었습니다.2
함수가 실행되었습니다.3
함수가 실행되었습니다.4
함수가 실행되었습니다.5
함수가 실행되었습니다.6
함수가 실행되었습니다.7
함수가 실행되었습니다.8
함수가 실행되었습니다.9
함수가 실행되었습니다.10

29. 클래스

        class study {
    //무조건 실행되는 함수 constructor: 생성자 함수 //보통 변수들은 생성자 함수에 잘 씀
    constructor (){
        //num이라는 값을 num이라는 변수로 저장
        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();
결과보기

30. 클래스 상속

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