2-2 (중요)일급 객체로서의 함수

 

일급 객체란 ? 다른 객체에 적용 가능한 연산을 모두 지원하는 객체이다.

 

함수가 일급 객체로 취급되기 때문에, 함수를 매우 유연하게 사용할 수 있다.

 

 

종류

 

1.(중요)변수에 함수를 할당 가능하다.

 

위의 같이 변수에 함수를 할당하면

이렇게 생성 가능하다.

 

사용 이유 :

1. 함수를 마치 값으로 취급 가능하다.

2. 함수가 나중에 사용될 수 있도록 조치가 된다.

 

2. (중요)함수를 다른 함수의 매개변수로 전달

1을 활용하면 함수를 다른 함수의 매개변수로 전달 할 수 있다.

 

callFunction이 sayHello와 sayBye 함수를

호출해 sayHello와 sayBye의 로직이

동작하는 것을 볼 수 있다.

 

함수를 다른 함수의 매개변수로 전달이 가능해서

 

콜백 함수와 고차함수라는 개념이 생긴다.

 

콜백 함수 : 매개변수로써 쓰이는 함수

(고차함수의 일부)

 

고차함수 : 함수를 인자로 받거나 return 하는 함수

 

(향후 4주차에 추가 학습할 예정)

 

(중요)return 하는 함수를 만들어보면

먼저 addFive = createAdder(5)로

createAdder 함수가 호출되고

매개변수 값으로 5가 전달 된다.

그 후 매개변수 num(5)와 fuction(x)

함수가 addFive 변수에 저장된다.

 

console.log(addFive(10)) 호출에서

addFive에 저장 됐던 매개변수 값

num(5)와 fuction(x)가 호출되고

매개변수 x에 10이 저장된다.

 

그 후 return x + num의 결과가 출력된다.

 

3. (중요)객체의 value에 함수 주기

 

객체에서 key에 따른 value가 함수일 경우

 

key : function()

{

로직

}

 

으로 작성 가능하다.

 

로직 안에서 객체 본인의 key에 따른 value를

사용하고 싶으면, this 연산자를 사용해야한다.

this.key 이름

 

만약, this를 넣지 않을 경우

위와 같은 오류 메시지가 출력 된다.

(this를 생략할 수 없다!!)

 

함수 내부 로직을 템플릿 리터럴로 표현하면

 

`

~~~~

`

가능했다. 그리고 본인 객체의 key에 따른 value에

접근하는 방법으로는 ${this.name}으로 사용 가능했다.

(this. 생략 불가능)

 

그리고 함수를 간략하게 화살표 함수로 표현하면

 

(중요)화살표 함수로 표현

 

 

key : () =>

{
        console.log
        (
            `
            Hello,
            my name
            is ${this.name}`
        )

}

,

key : () => console.log

        (

          `

             ~~~

          `

        )

 

로 표현 가능했다.

 

그런데, 결과로

(중요)

${this.name}을 해준 부분이

"undefined"로 출력 되는걸 볼 수 있다.

 

4. (중요)배열의 요소로 함수 주기

 

사용 방법 : 

 

배열 안에 함수를 만들어 넣는 방식으로 사용 가능하다.

 

함수 호출 방법으로는

 

변수명[함수 해당 index](input 값)

 

으로 배열 안의 함수를 호출 가능했다.

 

ex)

 

 

문제

어떻게 동작될 것이라 생각 하는가?

 

multiplyByTwo = return function(x)

                           {

                                return x * 2

                           }

 

multiplyByThree = return function(x)

                           {

                                return x * 3

                           }

 

이 있을 것 같다.

 

으로 함수가 들어가 있다는 사실은 알 수 있는 상황이다.

(함수의 재사용(Refactoring))

 

이제

 

multiplayByTwo(2)

multiplayByTwo(3)

 

을 주면

 

multiplyByTwo = return function(2)

                           {

                                return 2 * 2

                           }

 

multiplyByThree = return function(3)

                           {

                                return 3 * 3

                           }

 

과정을 거쳐서 

 

multiplyByTwo = 4

multiplyByThree  = 9

 

가 변수에 저장될 것이다.

 

만약 여기에서 약간 변화를 준

result에 어떤 과정과 결과가 나오는지 풀어보아라.

 

위의 동작 방식처럼

 

multiplayByTwo(2) = 4

multiplayByThree(3) = 9

 

을 가지게 될 것이고,

 

function add(4, 9)

{

    return 4 + 9

}

 

add 함수에 의해

4와 9가 더해진

13이 반환될 것이다.

 

const result = 13