01. 선언적 함수

직접 선언하는 함수입니다.

{
    function func(){
        document.write("실행 되었습니다.");  
    }
    func();   //먼저 호출 하여도 에러를 발생시키지 않습니다.
}
// var로 선언한 변수와 선언적 함수는 변수, 함수 선언 이전에 호출하여도 에러를 발생 시키징 않습니다. 이러한 자바스크립트 성질을 호이스팅(Hoistion) 이라고 합니다.
결과 확인하기
실행 되었습니다.

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 = () => {   //function을 없애고 =과 =>를 넣어 간략하게하였습니다.
        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;      //모든함수는 return값이 있지만 생략 한것이다
    }
    document.write(func("실행 되었습니다."));
}
결과 확인하기
실행 되었습니다.

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

익명과 매개변수,리턴값이 합쳐지고 괄호를 생략하고 화살표로 만든 함수 입니다.

{
    const func = str => {
        return str;      //모든함수는 return값이 있지만 생략 한것이다
    }
    document.write(func("실행 되었습니다."));
}
결과 확인하기
실행 되었습니다.

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

익명 함수,매개변수,리턴값 함수가 합쳐지고 괄호와 리턴이 생략된 화살표 함수 입니다.

{
    const func = str => str;  //리액트에서많이사용
    
    document.write(func("실행되었습니다."));
}
결과 확인하기
실행되었습니다.

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

익명 함수,매개변수,리턴값 함수가 합쳐지고 괄호와 리턴이 생략된 함수를 선언적 함수로 변경하였습니다..

{
    func = str => str;  //리액트에서많이사용 //dis?쓸수없음
    
    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: "함수", word: "실행" },{ num: 2, name: "자바스크립트", word: "실행" },{ num: 3, name: "리액트", word: "실행" } ] func(info[0].num, info[0].name, info[0].word); func(info[1].num, info[1].name, info[1].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. 함수 유형 : 객체생성자 함수

this를 이용해 객체안의 함수의 반복문을 줄여줍니다.

{
    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 + "되었습니다."+"
"); } } //인스턴스 생성 (new를 붙여주어야합니다.) 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(num, name, word){  //생성자함수는 함수명 첫 문자를 대문자로 표현
        this.num = num;
        this.name = name;
        this.word = word;
    }

    Func.prototype.result = function(){
        document.write(this.num +"."+ this.name + "가" + this.word + "되었습니다."+"
"); } //인스턴스 생성 (new를 붙여주어야합니다.) 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. 함수 유형 : 객체리터럴 함수

프로토 타입 함수가 많아지면 가독성이 떨어지기 때문에 객체에 넣어 함수를 정리 해주었습니다.

{
    function fucn(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("101","함수","실행"); const info2 = new func("201","자바스크립트","실행"); const info3 = new func("301","리액트","실행"); //실행문 info1.result1(); info2.result2(); info3.result3(); }
결과 확인하기
101. 함수가 실행되었습니다.
201. 자바스크립트가 실행되었습니다.
301. 리액트가 실행되었습니다.

22.함수 유형 : 즉시실행함수

선언적 함수를 이용하여 함수를 즉시 실행하는 방법입니다.

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

23.함수 유형 : 파라미터 함수

파라미터 함수는 하나 이상의 파라미터(인자)를 입력받아서 연산을 수행하고 결과를 반환하는 함수입니다.

{
    function func(str = "600.함수가 실행되었습니다."){ //매개변수에 실행문을저장?
        document.write(str);
    }
    func()
}
결과 확인하기
600.함수가 실행되었습니다.

24.함수 유형 : 아규먼트 함수

함수를 호출할 때, 함수에 전달하는 인자를 키워드 인자 형태로 전달하는 함수입니다.

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

26. 함수 유형 : 콜백 함수 : 함수를 두번 실행

다른 함수에 인수로 넘겨지는 함수 입니다.

{
    // function func1(){
    //     document.write("1.함수 실행");
    // }
    // function func2(){
    //     document.write("2.함수 실행"); //1번째를 실행하고 2번째를 실행하고 싶은데 1번째2번째 둘다나오는단점을 보완한게 콜백
    // }
    // func1();
    // func2();

    function func(){   //5. func함수가 실행됨
        document.write("2.함수 실행");
    }
    function callback(str){    
        document.write("1.함수 실행"); //2.callback함수를 먼저실행후
        str();          //3. str매개변수를 함수로 바꾸어 str함수를 실행
    }
    callback(func);   //1.callback함수를 실행  4.str=func이므로 func함수를 실행
}
결과 확인하기
1.함수 실행2.함수 실행