카테고리 없음

자바 스크립트 2주 3~4강 - 일급객체로서의 함수

8나지 2024. 4. 23. 10:00

5가지 특징 : 변수를 함수에 할당

일급객체 : 다른객체와 같음. ; 매개변수로 전달, 리턴문으로 출력 가능 => 함수도 가능

함수를 유연하게 사용가능

 

특징1. 변수를 함수에 할당 - 함수가 값처럼 취급, 나중에 사용될 수 있도록 조치됨

                                                                 변수의 선언 = 함수

ex) const sayhello = function () {          sayhello 이름를 가지고 (어디서나 함수 호출가능

         console.log('hello')                          & 함수를 객체처럼, 변수처럼 넣거나 매개변수로)

}

 

특징2. 함수를 인자로 다른 함수에 전달          () 열고 닫는 것 - 실행하는 것

function callFunction(func;매개변수) {                  매개변수로 받은 변수가 사실 함수

  func();                                                                    () 여기서 괄호 열고 닫을 수 있어서

}

 

const sayHello = function() {                         세이헬로우를 콜펑션에 실행할때

   console.log('Hello!');                                   함수를 매개변수로 던질 수있음

};                                                                        매개변수로 던진다면 function callFunction(func;매개변수)

                                                                          여기로 sayhello라고 저장된 함수 전달

callFunction(sayHello);                                 "Hello!" 출력

 

(함수의 리턴이 함수다)

특징2-1 : 콜백 함수 - 콜백 함수는 매개변수로 쓰이는 함수를 말해요. 

특징2-2 : 고차 함수 - 함수를 인자로 받거나 함수를 출력으로 반환(리턴)하는 함수를 ; 콜백함수는 고차함수의 한 종류

 

특징3. 함수를 반환 할 수 있다.

function createAdder(num) {

  return function(x) {                                          함수 리턴

       return x + num;                                           그 함수는 또 리턴 (x를 매개변수로 받아오는)

     };

}

const addFive = createAdder(5);                     createAdder에 ()열고 닫았음=>실행한 결과 대체, num이 5를 대체

                                                                                      리턴문 펑션대체

리턴문 펑션 이  대체

console.log(addFive(10));                                위 처럼 이번에는 10 으로 => 15 출력

 

=> 다시 ===

function createAdder(num) {

  return function(x) {                                         

       return x + num;                                           

     };

}

const addFive = createAdder(5);       =>            const addFive = function (x) {

                                                                                   return x + 5;    };  이렇게 해석하면 됨

console.log(addFive(10));                                


특징4. 객체의 프로퍼티로 함수 할당

const person = {                                            객체이므로

    name: 'John',                                             키-벨류페어(문자, 숫자,불리언,객체,함수 다 가능)

    sayHello: function() {                                그래서 여기도 함수들어감         

       console.log("Hello, my name is" + this.name);

     }

};

 

person.sayHello();                                                              "Hello, my name is John" 출력

 

console.log("Hello, my name is" + this.name);

다른표현1. ``사용하면 => console.log(`Hello, my name is ${this.name}`);

다른표현2. 화살표함수=>  const person = {

                                         name: 'John',

    sayHello: () => { 

    console.log(`Hello, my name is ${this.name}`);            근데 화살표 함수는 이렇게 하면 언디파인남

     }                                      **  3주차때 설명  **                      키워드: this 를 바인딩 하지않음               

};

 

특징5. 배열의 요소로 함수할당

const myArray = [                                  

   function(a, b) {                                  함수가 arry 형태로 들어간 a,b

         return a + b;                                 a랑 b랑 더해서 리턴해주기 

    },                                                        함수 2개를 속성(;요소)으로 갖는 배열

    function(a, b) {

          return a - b;

     }

];

console.log(myArray[0](5, 10));          0번째 요소인  return a + b에 (5,10넣기) => 15 출력 

console.log(myArray[1](10, 5));                                                                            => 5 출력

 

function multiplyBy(num) {                   펑션을 리턴하는 고차함수               

     return function(x) {                           리턴하는 펑션 역시 매개변수  x 받아서

         return x * num;

          }

      }

function add(x, y) {

     return x + y;                                        x+y해서 리턴

          }

const multiplyByTwo = multiplyBy(2);  num에 2넣으면 뭐가 나오는지

const multiplyByThree = multiplyBy(3);

 

const result = add(multiplyByTwo(5), multiplyByThree(10));

console.log(`FINAL => ${result}`);                                            ;   FINAL => 40 출력