forEach / map / filter / Arrow / 즉시호출 / time

2022 / 8 / 8 월

• callback - forEach
• map
• filter
• Arrow
• 즉시호출 (임시객체)
• time

---

지난주 복습

 

1. 가변 파라미터 
나머지 파라미터 
로직이 비슷한데 파라미터 길이만 변동될 때 사용한다.
(...)이 중요한게 아니라 언제 사용하는지 아는게 중요하다!

2. 디폴트 파라미터
대부분이 동일한 파라미터를 사용할 때 예를 들어 시급 같은 거 한 번에 사용하기 위해 사용한다.
생략이 가능한 부분이 있기 때문에 과도하게 사용하면 가독성 저하

3. 전개연산자

---

callback-function

CBF는 사용용도가 정해져 있다.

 

배열의

foreach()

map()

fillter()

 

주목해야 할 점은 어떻게 쓰지에 집중하지 말고,

함수들을 언제 사용하고 왜 !! 필요한지 아는 것이 (스토리 기반으로 이해) 중요하다.

---

⚙️복습 문제 풀기

        // 문제 풀기
        // max(1,2,3,4)형태의 max([1,2,3,4])형태를 모두 처리 할 수 있는 max함수를 만드세요 
        // max(4,6,2)
        // max( ) null 와같은 함수도 처리할 수 있어야함. 
        
        
        // 입력
        const getmax = function(...ar)
         {
            let max = ar[0];

            for( let i = 1; i < ar.length; i++)
            {
                if ( max < ar[i])
                {
                    max = ar[i];
                }
            }
            return max;
         }
          
         // 출력하자 
         console.log(getmax(1,2,3,4));
         console.log(getmax([1,2,3,4]));
         console.log(getmax(4,6,2));
         console.log(getmax());
         console.log(getmax([]));
         console.log(getmax(55,24,496,215));

⚙️max값 찾기

        const max = function(...ar)
        {
            let maxValue = 0;
                        
            const calcMax = function(ar) // const a = 10; 과 같다고 보면됨 function안의 function이 아니라 function안의 function객체임. 
            {
                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);
                
            }
            else if(Array.isArray(ar[0]) === true)
            {
                maxValue = calcMax(ar[0]);
            }
            else
            {
                maxValue = null;

            }

            return maxValue;            
        }

        console.log(max([1, 2, 3]));
        console.log(max(22, 1, 2, 3));

상단 코드의 메모리블럭을 그림으로 나타내 보자!

 

 

---

✔callback - forEach

 

forEach는 배열 개수마다 각각의 값을 호출해준다

 

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

        for (let value of num)
        {
            console.log(`2 x ${value} = ${2*value}`);
        }

        num.forEach();

---

✔map

map :  무언가를 찾기 위한 정보 

 

map 은

key(value를 찾기 위한 data)와

value(실제 data)로 구성되어있다. 

 

ex)

지도는 어디를 찾기 위해 쓰인다.

맛집 위치정보 = key

맛집 = value

 

map의 사례

- object 

- JSON

 

하단 num2에 넣은 동일한 개수로 결과값이 나온다. 

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

        const sq = function(value)
        {
            return value * value;
        }

        const new_num= num2.map(sq); //여기안에는 내가 원하는 데이터가 들어있음 key / value형식으로 ! 
        
        console.log(new_num);

        상단을 임시객체화 시킨 코드는 하단과 같다. 

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

        const new_num= num2.map(function(value)
          {
             return value * value;
         } );

        console.log(new_num);

 

⚙️ map 문제 풀기

        //배열의 각 요소에 “훌륭한＂이라는 말머리를 붙이는 코드를 map()을 이용하여 작성하시오

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

        const new_hero = hero.map(function(value)
        {
            return '훌륭한 ' + value;
        });

        console.log(new_hero);

---

✔filter

filter는 결과값이 num과 개수가 달라도 괜찮음, 새로운 배열을 나타낸다. 

 

⚙️50보다 큰 애들만 새로 배열로 나타내 보자

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

        const new_num = num.filter(function(value){
            if(value > 50)
            {
                return true;
            }
            return false;
        });

        console.log(new_num);

 

⚙️filter 문제풀이

        // 짝수만 리턴하는 필터함수를 짜보자.

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

        const new_num = num.filter(function(value){
            if ( value % 2 == 0 )
            {
                return true;
            }
            return false;
        });

        console.log(new_num);
        
        // 홀수만 리턴해서 *2한 값을 나타내시오.
        const num = [11,22,33,44,55,66,77,88,99]

        const filterarray = num.filter(function(value){
            if(value % 2 !=0)
            {
                return true;
            }
        });

        const maparray = filterarray.map(function(value){
            return 2*value;
        });

        console.log(maparray);

---

✔Arrow

전통적인 함수 표현을 간단하게 만든 sugar code

쉽게 말하자면 함수를 생략 및 문법구조를 파괴하면서 편함을 추구하겠다는 것!!

 => 와 같이 표기한다. 

 

🔔문법구조를 파괴하기는하지만, 체계는 있다.

1. function을 생략하면서 => 화살표가 생김 

2. { }, retrun을 생략 > statement 가 espression 된다

const res = num.filrer(odd).map((value) => 2 * value );
const res = num.filrer(odd).map(function(value) { return 2 * value;} ); 
상단코드와 하단코드는 동일하다고 볼 수 있다. 

console.log(res)

 

---

✔ 즉시호출

즉시호출은 임시 객체를 활용하여 함수의 선언과 동시에 호출하는 기법

 ( function ( ) { } ) ( ) ; 의 형식으로 사용한다. 

 

과도한 임시객체의 사용은 가독성이 저하되므로 적당하게 사용해야 한다. 

ex > num.filter(odd).map(dble)

(function(val1)
{
  console.log('func()' + val1 );
})('abc');

---

✔ 타이머 함수

setTimeout
- N초 후 함수 실행

 

setInterval
- N초 마다 함수 실행

 

🔔타이머는 크게 두 가지로 나뉜다.

1. 일반 timer process: best effort

2. 고해상도 timer  process: 디아블로 공속 템 먹으면 공격 속도 빨라지는 것처럼 (multimedia timer)

                                            멀티미디어 타이머를 쓰면 렉 걸려서 몬스터를 못 때리더라도 피는 깎이게 됨.  

	const timerid = setInterval(func,1000);

        setTimeout(() => {
            console.log("kill timer");
            clearInterval(timerid);
        },5000);

        // 5000 이라는게 정확한 시간이라는것을 보장하지는 않지만, 
        // 5초안에 멈추게하도록 최선을 다할것이다라는 의미
        // 이를 best effort라 한다.

 

 

---

🦾 코딩 스타일에 신경 쓰자

• 들여쓰기
• 띄어쓰기
• 주석달기 
• IPO 맞추기
• 함수 소문자 대문자 신경쓰기