[2022-08-24] TIL - 19일차

😁 Today I Learned

• function
• arrow function
• return function
• variable function
• ajax

---

function

 

    <script>
        console.log("hello function");

        //1. arguements X  return X   
        function sleep() {
            console.log("sleep1()...");
        }

        sleep();
        console.log("-------------------");
        //2. arguments X , return O
        function sleep2() {
            console.log("sleep2()...");
            return 0; // 숫자, 문자열, 객체, 배열, 함수
        }
        
        sleep2();
        console.log("return : ", sleep2()); // return 값
        console.log("-------------------");
        
        // 3. arguments O , return X 
        function sleep3(x) { 
            console.log("sleep3()....", x);
        }
        
        sleep3();
        sleep3("kim");
        console.log("-------------------");
        
        // 4. arguments O , return O
        // function sleep (x=200) 
        function sleep4(x) { // x = 1  디폴트 값 
            console.log("sleep4()...",x);
            
            // x = x || 1; 1이 디폴트값 ,,, NaN,NaN 이 뜨는데 디폴트값으로 괜찮아짐.
            x ||= 1; // &&=    ,   ??=  물음표(optional chaining)는 undefined 하고 null만 체크를 해준다.
            // ?? = (?,?)
            
            return [11*x,22*x,33*x];
        }
        
        sleep4();
        sleep4(10); // 모든 리터럴 인자로 전달 가능.

        console.log("return 1 : ",sleep4()); // return 값
        console.log("return 2 : ",sleep4(10)); // return 값
        
        console.log("-------------------");

    </script>

 

• argument 있을 때 없을때, return 이 있을 때 없을 때 구분하여 사용할 수 있다.
• ||= , ??= (optional chaining) 형식으로 사용할 수 있다.

 

function2

    <script>
        console.log("hello function2");

        // 실전에서 가끔 arguments 가 섞일 때가 있다.

        function run() {
            console.log("run..");
            console.log(arguments);
            console.log(arguments.length);
            console.log(arguments[0]); // 11이 들어있어용.
            console.log(arguments[1]); // 11이 들어있어용.
            
            for (const i in arguments) {
                console.log(arguments[i]);
            }
        }

        run();
        run(11); // arguments 배열에 0번방에 11이 들어간다.
        run(11, 22, 33);

        console.log("-----------");

        // arguments 는 그냥 x가 1번 y가 2번 이라는 뜻이다.
        function stop(x, y) {
            console.log("stop()...");

            // var tx = arguments[2] || 100;
            // console.log(tx);

            // 이런식으로 나옴.
            // if(!arguments[2]){
                
            // }

        }

        stop(44,55);
        console.log("---------");

        function sleep(a,b,c,d) {
            console.log("sleep()..",a,b,c,d);
        }

        sleep(11,22,33); // 위에 d는 undefined 가 뜬다.  에러 안나고 콜이 되네..
    </script>

 

• 자바스크립트에서 제공하는 argument 를 사용할 수 있다.

 

function3

    <script>
        console.log("hello function3");

        // 
        function eat(x) {
            console.log("eat()...", x);
        }

        eat(11);
        eat("kim");
        eat([11, 22, 33]); // 배열로 받았다.
        eat(["kim", 77]);
        eat(new Array(10)); // empty 10개짜리가 생성된다.
        eat({ name: "kim", age: 100 }); // 받는쪽에서 뭐.name 이라고 하면 사용하기 편하겠지?
        eat(new Object());
        
        // eat([11, 22, 33], [22, 33, 44]); // 이렇게도 되네.

        console.log("==========================");
        
        // 일급함수   이건 익명함수   ---- 자바 8버전 이후에 일급함수 가능하고 anonymous
        eat(function() {
            console.log("fn()...");
        }); // function 괄호 블럭
        
        // 이런식으로 바뀐다.  - arrow function
        eat(()=> {
            console.log("fn()...");
        }); // function 괄호 블럭
        
        
        console.log("==========================");
        
        function Person() {}
        
        eat(new Person());
        
        let p = new Person();
        p.user_name = "lee";
        eat(p);
        
        console.log("==========================");
        
        class Student{kor = 100;}
        
        let s = new Student();
        console.log(s);
        console.log("==========================");
        
        
        function count() {
            console.log("count()...");
        }
        
        eat(count);  // 이건 함수를 출력하는거고..
        eat(count()); // 이건 콜한 결과를 주는거고  리턴값이 없으니까 undefined 가 뜨겠지.
        
        console.log("==========================");
        // arrow funtion 애로우 펑션

    </script>

• 함수 자체를 출력하는 것과 함수를 콜해서 return 값을 출력하는 것과 사용법이 다르다.

 

arrow_function

    <script>
        console.log("arrow_function... ");

        let arr = [11, 22, 33];

        // 
        arr.forEach(function (item, index) {
            console.log(item, index); // 11 0, 22 1, 33 2
        });

        // 같은 효과 (괄호가 없어도 된다. 한개 일 때만 )
        arr.forEach(item => {
            console.log(item);
        });
        // 이런식으로도 쓸 수 있다.   두개 이상은 괄호로 묶어야 한다.  한줄만 실행시키면 블럭이 없을 수도 있다.
        arr.forEach((item, index) => console.log(item, index));

        console.log("==========================");

        let obj = {
            name: "kim",
            age: 33,
            arr: [11, 22, 33],
            vo: { id: "admin" },
            fn: function () { } // 기능도 탑재가 가능하다.
        };

        // map!!!
        let arr_map = arr.map(function (item) {
            console.log(item);
            return item;
        });

        console.log(arr_map); // 길이도 똑같고 각각의 방번호마다 mapping 을 해서 값을 변경해주려고 할때 사용한다. 

        let arr_map2 = arr.map((item) => {
            console.log(item);
            return item * 100;
        });
        console.log(arr_map); // 길이도 똑같고 각각의 방번호마다 mapping 을 해서 값을 변경해주려고 할때 사용한다. 

        console.log("==========================");
        
        const names = [
            'Yangssem',
            'Kim',
            'Lee',
            'John'
        ];
        let arr_names_length = names.map(name => name.length);
        console.log(arr_names_length);
        
        // 앞에 문자열을 붙이고 싶다면..
        let arr_names_hello = names.map(name => "Hello"+name);
        console.log(arr_names_hello);
        
        console.log("==========================");
        // foreach , map , filter , event처리순으로 쓰인다.

        arr = [0,1,2,3,4,5];
        // filter : 거짓을 거르고 참인 애들만 데려오겠다라는 의미이다.
        let arr_even = arr.filter((item)=> item%2==0);
        console.log(arr_even);
        // 이름 네자 이하만 가져와라
        let arr_four = names.filter((name)=> name.length < 4);
        console.log(arr_four);


    </script>

• 애로우펑션에서 파라미터가 한개일때는 소괄호를 쓰지않고 적어도 된다.
• 오브젝트에 function을 넣어도 된다.
• filter는 참인 애들만 (조건에 걸린) 데려오겠다는 의미이다.