함수의 메모리 적재 / 가변 파라미터 / 전개 연산자 / 디폴트 파라미터 / Callback / forEach

2022 / 08 / 05 금

 

• 함수의 메모리 적재 (함수가 호출되는 과정)
• 가변 파라미터
• 전개 연산자
• 디폴트 파라미터
• Callback
• forEach

---

✔️ 함수의 메모리 적재 

 

⚙️

빨간색을 파란색에 넣는다 

빨간색은 Instruction -set 과 data로 구분 가능하며, 이 두 가지는 메모리에 들어가야 실행할 수 있다. 

 

// 자바스크립트에서 호이스팅(hoisting)이란. 

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것의 의미 

 

함수를 두개로 나누어서 생각해라!

   - 함수의  instruction - set  : Global영역에 들어가며 -> function object (data라 볼 수 있음) 형태로 들어간다. 

   - DATA   : stack영역에 들어가며 -> EC ( exeution Context)에 들어간다. 

   EC는 다음과 같이 분류된다. - data / 실행하기 위한 주소 정보 ( this의 ret / caller의 ret)

---

✔️가변 파라미터

가변파라미터란 가변적인 파라미터 개수를 처리하기 위한 기법이다.

 

1. 동일한 로직으로 수행되는 함수

2. 파라미터가 여러개가 들어가는 경우 사용한다. 

       const add1 = function(val1, val2);

       {

       }

       const add2 = function(val1, val2, val3);

       {

       }

       add1(1,2);

       add2(1,3,5);

       

    // 함수를 이렇게 늘어나는 개수마다 만들어야할까? 이럴때 하단의 방법을 사용한다.

       const add = function(...val)

       {

        console.log(val);

       }

       add(1,2);

       add(1,2,5);

       add(1,2,5,6);

 

⚙️가변 파라미터 문제 풀기

1. add(  )의 값을 더해 보시오.

      const add = function(...val)

         {

          total = 0;

          for ( let value of val)

          {

            total = total + value;

          } //이렇게 해도 되고, 아래처럼 만들어도 된다.

 

          for ( let i = 0; i < val.length; i++ )

          {

            total = total + val[i];

          }

          return total;

          }

          console.log(add(1,2,5,6));

 2. 최솟값을 찾아보시오. (✨function( )에 들어간게 중요한게 아니다 )

    const getmin = function(...ar)

    {

        let min = ar[0]; //min은 최소값이라고 판단되는 값

 

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

        {

             if(min > ar[i])

             {

                min = ar[i];

             }

        }

        return min;

    }

 

 

     console.log(getmin(11,20,5,6,324,44,32));

---

✔️전개 연산자

전개 연산자란 복수의 파라미터를 가진 함수에 배열을 전달하고자 할 때 사용하는 연산자이다.

호출시 ...배열명으로 호출한다. 

 

1. 배열을 파라미터로 넣어주는 경우

2. 배열을 순서대로 모두 넣어야 할 때 사용한다. 

     const func = function( a, b, c)

      {

        console.log(a);

        console.log(b);

        console.log(c);

      }

      const ar = [ 1,5,'abc'];

      func(...ar);

---

✔️디폴트 파라미터

디폴트 파라미터는 파라미터를 넣지 않은 경우, 미리 설정된 기본값을 사용하는 파라미터이다.

 

🔔과도한 디폴트 파라미터 사용은 가독성을 떨어트린다. 

 

why? 코드를 보기에는 깔끔하지만 누군가가 코드를 보면서 어? 이 정보 어디갔어 라고 생각이 될 수 있다. 

이런 생각이 들면 망한 코드라 볼 수 있다. 따라서 하단 코드의 console.log(getpay());와 같은 형식은 되도록 사용하지 말 것!

   시급과 일한시간을 입력하면 일당을 리턴하는 함수를 만들어 보시오.

      const getpay = function (time = 8, wage = 9620)  // 울회사는 8시간에 9620원받는 사람이 많아

      {

         return time*wage

      }

      console.log(getpay()); 

      console.log(getpay());

      console.log(getpay());

      console.log(getpay());

      console.log(getpay());

      console.log(getpay(5, 12050)); // 그렇지 않은 사람 데이터를 이렇게 넣으면 디폴트값대신 이대로 계산해준다.

---

✔️콜백 Callback

 

콜백이란 호출하는 방식으로 기능의 호출이 명시적으로 눈앞에 없고 뒤에 숨어있는 것.

 

콜백에 반드시 선행되어야 하는 조건은 레지스터 "등록"이다. 

 

일반적인  call은 한 화면에 호출하는 애와 호출받는 애가 다 보인다.

callback은 무언가 실행이 되는데 내 눈앞에 ( ) 이게 없어 / 호출하는 애가 화면에 없어 안보여 , 왜? 뒤로 숨었거든

왜 이런 callback구조를 만드냐면 caller 호출하는애가 내가 짠 애가 아니기 때문이야.

caller는 큰 형님이라서 내가 굽신굽신 하며 호출 좀 해달라고 해야 해 대표적인게 프레임워크 !

 

콜백을 가장 먼저 이해하기 위해서는 caller와 function을 알아야 한다. 

 

콜백이란 갖은양념같은 함수,,★

---

Call : 호출 / function 기능을 실행시키는

f1(  )

{

      f2(  )

 }

   caller                          function

호출하는 애  -- call --> 호출되는 애

      f1()        <--"f2()"--        f2()

                     호출부 // Registration이라고 하며 호출되는 애가 caller에게 function ref를 준다. 

1. 웹에 있는 버튼을 클릭하면 수행된다.

const button_click = function(  )

{

    2. 서버에 데이터를 전송한다. 

}

3. 호출 코드를 넣는다. ( ★중요★)

-> 실행될 때 수행되는 것이 아니라, 웹에 있는 버튼을 사용자가 클릭해야 실행되어야 하므로 ,

    스크립트내에 호출 코드를 못 넣는다. 

 

 

back

 

button_click 이 함수를 눈에 안보이도록 호출에 필요한 부분을 별도로 등록한다. 

 

🔔Callback 추가적으로 알아야 하는 점

1. 내가 만든 기능을 내 마음대로 호출할 수 없고, 누군가에게 call / 호출해달라고 부탁해야 하는 것 대표적으로 프레임워크가 있다.

2. caller나 호출되는 function이 콜백이라고 생각하면 안 된다.  왜냐? caller는 프레임워크이기 때문이다

3. 콜백함수로 사용되는 파라미터는 개수가 정해져 있다. 거의 4개 

---

✔️forEach

 

forEach는 각각의 배열의 요소 하나하나마다 call 해준다. 

       const callbackproc = function(value, index, array)

       {

         console.log(`value = ${value}, index = ${index}`);

       }

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

 

       num.forEach(callbackproc);

 

    // 상단 코드를 하단처럼 사용가능하다.

 

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

 

       num.forEach(function(value, index, array)

                   {

                     console.log(`value = ${value}, index = ${index}`);

                   } ) ;