[14일차] 콜백함수 (forEach / map / filter) / arrow / time

20220808(월)

• 목차
  - 콜백함수 (forEach / map / filter)
  - arrow
  - time

---

< 용어 알아두기 >

• sugar_code : 문법적으론 맞진 않는데 사람들이 너무 많이 사용해서 쓰기로 한 코드
• Garbage Collection
  : https://mangkyu.tistory.com/118

[Java] Garbage Collection(가비지 컬렉션)의 개념 및 동작 원리 (1/2)

---

< 함수를 사용해서 배열의 최댓값 구하기 >

// 복습 연습문제

        // max(1, 2, 3, 4) 형태와 max([1, 2, 3, 4]) 형태를

        // 모두 처리 할 수 있는 max 함수를 만드세요.

        // max(4, 6, 2)

        // max() null

        // max([]) null

        const max = function(...ar)

        {

            let maxValue = 0;

                       

            const calcMax = function(ar)

            {

                let maxValue = ar[0];

                for (let i = 1; i < ar.length; i++)

                {

                    if (maxValue < ar[i])

                    {

                        maxValue = ar[i];

                    }

                }

                return maxValue;

            }

            // 가드코드 보호해준다.

            if ((ar.length === 0) || (ar[0].length === 0))

            {

                return null;

            }

            if (typeof(ar[0]) === 'number')

            {

                maxValue = calcMax(ar); // ar의 수 중에서 최댓값 나와서 들어간다.

               

            }

            else if(Array.isArray(ar[0]) === true) // 만약 첫번째 인자가 배열이라면

            {

                maxValue = calcMax(ar[0]); // ar의 배열 중 첫번째 그룹에서 최댓값 구하기

            }

            else

            {

                maxValue = null;

            }

            return maxValue;            

        }

        console.log(max([1, 2, 3])); // 파라미터 한개야

        console.log(max(22, 1, 3)); // 파라미터 세개야

 

---

< Call Back - forEach 함수 >

// foreach call back 함수 : 배열의 개수만큼 반복되어 출력된다. ==> for문이랑 같네?

        const num = [11, 22, 33, 44, 55];

        const printArray = function(value, index)

        {

            console.log('value = ' + value);

            console.log('index = ' + index);

        }

        num.forEach(printArray);

---

 // foreach 사용해서 구구단 2단 만들기

        const num = [1, 2, 3, 4, 5, 6, 7, 8, 9];

        const printArray = function(value)

        {

            console.log(`2 x ${value} = ${2 * value}`); // 실행이 length만큼 반복된다.

        }

        num.forEach(printArray);

        // 위의 foreach 문을 for문으로 쓸 수 있다! (사실 대부분 for문으로 써^^)

     

        const num = [1, 2, 3, 4, 5, 6, 7, 8, 9];

        for (let i = 0; i < num.length; i++) // = for(let value of num)과 동일

        {

            console.log(`2 x ${num[i]} = ${2 * num[i]}`); // 실행이 length만큼 반복된다.

        }

 

---

< Call Back 함수 - map >

• map : 뭔가를 찾기위한 정보
  
  
• 맵정보는 항상 두 개
  1.  value (맛집)
       : 실제 data : 내가 찾으려는 정보
  2.  key (맛집위치)
       : value를 찾기 위한 data 
  
  
• map은 forEach와 달리 return 값이 필요해!
  새로운게 return된다. (value 존재) key가 없다. 배열 자체가 키야!!

// map

        const num = [1, 2, 3, 4, 5];

        const sq = function(value) // 호출한다.

        {

            // forEach와 다르게 return함. 호출하고 return된 값을 모아서 새배열 만들어서 던진다.

            return value * value;

        }

        const new_num = num.map(sq)

       

        console.log(new_num);

key (value를 찾기 위한 값)	0	1	2	3	4
value	1	4	9	16	25

 

• JSON 도 key-value 형식으로 이뤄진 일종의 map이다!
  
  
• map과 foreach
  - foreach는 새로 만들고 자시고가 없다. return이 없어!
  - map 은 계산을 한 다음에 새로운 것을 만들어낸다.
    map은 원래 것을 가져다가 새로운걸 만들고 싶어하는 것임(얘의 개수만큼)

        // [map 연습문제] 각 영웅의 이름 앞에 '훌륭한'을 붙여서 출력하기

        const hero = ['홍길동', '세종대왕', '김구', '안중근'];

        const sq = function(value) // 호출한다.

        {

            return '훌륭한 ' + value;

        }

        const new_hero = hero.map(sq)

       

        console.log(new_hero);

---

< Call Back 함수 - filter >

• map과 거의 유사함. but 여기서 내가 원하는 것만 골라내는 것

        // filter문

        const num = [11, 22, 33, 44, 55, 66, 77, 88, 99];

        const new_num = num.filter(function(value)

        {

            if (value > 50)

            {

                return true;

            }

        });

        console.log(new_num); // 50보다 큰 애들만 필터링해서 새로운 배열을 출력한다.

// [filter & map 연습문제 2] 홀수만 리턴해서 두배 만드는 필터함수 짜기

   

        const num = [11, 22, 33, 44, 55, 66, 77, 88, 99];

       

        const new_num = num.filter(function(value)

        {

            if (value%2 === 1)

            {

                return true;

            }

        });

        const new_num2 = new_num.map(function(value)

        {

            return (value * 2);

        });

        console.log(new_num2);

 

        // 위 코드를 더 깔끔하게 정리해보자 :)

        const num = [11, 22, 33, 44, 55, 66, 77, 88, 99];

       

        const odd = function(value){

            if (value%2 === 1)

            {

                return true;

            }

        }

       

        const dble = function(value)

        {

            return (value * 2);

        }

       

        // 아래와 같은 식이 많이 쓰인다! 홀수로 필터 걸고 더블 걸었구나! 알 수 있음.

        num.filter(odd).map(dble);

---

< Arrow 함수 > : sugar_code

• 의미
  전통적인 함수표현을 간단하게 만든 sugar_code
• 특징
  (1) function을 지우고 화살표(==>)로 쓰겠다!
  (2) return 지우면서 {}도 같이 죽여
  (3) return 지우면서 statement가 expression이 된다. ;까지 삭제

// Arrow 함수 만들기

        const res = num.filter(odd).map((value)=> 2 * value);

 

       

// 원래코드 (생략 전)

        const res = num.filter(odd).map(function(value){return 2 * value};);

---

< 즉시 호출 >

• 의미 : 임시 객체를 이용하여 함수의 선언과 동시에 호출하는 기법
• 형식 : (function (){ })()
• 복수개의 <script>에 대한 독립성 보장(이름충돌등)

 

---

< setTimeout 과 setInterval >

• setTimeout
  @초 후 함수 실행
• setInterval
  @초 마다 함수 실행

        // [setTimeout] 5000 ms(5초 후) 함수 실행.

        setTimeout(() => {console.log("첫 번째 메시지")}, 5000);

        // 위와 같은 의미

        const func = function()

        {

            console.log("~~~~~~");

        }

        setTimeout(func, 5000);

        // [setInterval] 1초마다 실행해라

        setInterval(func, 1000);

 

        // 1000ms = 1초

        // setTimeout 해서 5초(5000 ms) 뒤에 함수 실행

        const func = function()

            {

                console.log("~~~~");

            }

       

        // setTimeout(func, 5000) 해서 1초마다 실행

        // setInterval(func, 1000);

        // 1초마다 실행하다가 5초 후에 멈춰라

        const timerID = setInterval(func, 1000);

        setTimeout(() =>{

            console.log("kill timer");

            clearInterval(timerID);

        }, 5000); // 여기서 5000(5초)라고 설정한 시간은 딱 5초에 해주겠다는 아니다.

                  // 정확한 시간은 아니지만 최대한 그 시간에 맞추겠다라는 의미다. (best effort라고 부른다)