ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 4. 일급 객체로써의 함수 (2)
    JavaScript/2주차-ES6, 일급객체, Map, Set 2023. 5. 24. 20:58

     

     

    일급객체로써의 함수 (2)

     

    4. 객체의 value값에 함수를 할당


    객체 key-value pair에서 value에는 어떤 데이터타입도 들어갈 수 있다. (데이터 타입은 string, number, boolean 등 다양.)
    여기의 value 자리에, 함수도 들어갈 수 있다. 

     

    아래에서는 sayHello의 key 값에 value값으로 함수를 넣었다.

     

    const person = {
        name : 'jake',
        age : 31,
        gender : 'male',
        height : 186,
        isMarried : false,
        sayHello : function() {
            console.log("hello, my name is " + this.name)
        }
    }
    person.sayHello();

    this = 자기자신을 가르키는 것. 중괄호 (스코프)안에서의 this는 항상 자기자신 객체를 가리킴.
    즉 아래 객체에서 this는 person을 가리킨다. 즉 this.name은 person안에 있는 name인 jake이다.

     

     

    아래는 템플릿 리터럴 (백틱)을 이용한 풀이. ` ` 백틱 안에 ${불러올 값} 입력

    const person = {
        name : 'jake',
        age : 31,
        gender : 'male',
        height : 186,
        isMarried : false,
        sayHello : function() {
            console.log(`hello, my name is ${this.name}`)
        }
    }
    person.sayHello();

     

    화살표 함수를 이용한 풀이 

    (여기서는 name에 undefined가 나온다. 왜냐하면 화살표함수는 this를 바인딩하지 않기 때문.)

    즉 화살표 풀이로는 this를 쓸 수 없다.

    const person = {
        name: 'jake',
        age: 31,
        gender: 'male',
        height: 186,
        isMarried: false,
        sayHello: () => {
            console.log(`hello, my name is ${this.name}`);
        },
    };
    person.sayHello();

    이렇게 하면 name에 undefined가 나옴.

     

     

     

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

     

    보통 배열 (대괄호 [ ])이라고 하면 하나하나의 요소들의 나열이지만, 함수를 배열의 요소로써 할당할 수 있다.

     

    const myArr = [
        fucntion ( ) { }, function ( ) { }
    ]

     

    배열의 특징은 나열된 순서대로 index값을 갖는다는 것. 0, 1, 2, 3..
    여기서 대괄호 안 배열의 첫번째 function이 0, 두번째 function이 1이다.
    나열이므로 function과 function 사이에 콤마를 쓴다.

     

     

    const myArr = [
        function (a, b) {
            return a + b
        }, function (a, b) {
            return a - b
        }
    ]

    첫번째 함수는 a+b를 출력, 두번째 함수는 a-b를 출력

     

    console.log(myArr[0](1, 3));
    console.log(myArr[1](10, 7));

    첫번째 console.log(myArr [0] (1, 3));

    myArr함수의 0번째요소 (index)즉 첫번째 function값. 소괄호에는 a, b에 들어갈 매개변수 (1, 3) 입력

    1 + 3 = 4 출력

     

    두번째 console.log(myArr [1] (10, 7));

    myArr함수의 1번째요소 (index)즉 두번째 function값. 소괄호에는 a, b에 들어갈 매개변수 (10, 7) 입력

    10 - 7 = 3 출력

     

     

    고차함수 : 함수function을 return함.

     

    function multiplyBy(num){
        return function (x){
            return x * num
        }
    }
    
    function add(x, y) {
        return x + y;
    }
    
    const multiplyByTwo = multiplyBy(2);
    const multiplyByThree = multiplyBy(3);

    const multiplyByTwo에서는 num 자리에 2
    const multiplyByTwo = function (x) {
        return x + 2;
    }

    const multiplyByTwo에서는 num 자리에 3
    const multiplyByTwo = function (x) {
        return x + 3;
    }

    function multiplyBy(num){
        return function (x){
            return x * num
        }
    }
    
    function add(x, y) {
        return x + y;
    }
    
    const multiplyByTwo = multiplyBy(2);
    const multiplyByThree = multiplyBy(3);
    
    console.log(multiplyByTwo(10)) 
    console.log(multiplyByThree(20))

    console.log(multiplyByTwo(10)) // x * num => 10 * 2 20
    console.log(multiplyByThree(20)) // x * num => 20 * 3 60

     

    위에서 multiplyByTwo와 multiplyByThree에 괄호쓰고 매개변수를 쓴 이유는, 그 매개변수를 입력한 함수를 실행했을 때 값을 구해야 하기 때문.
    여기서 임의로 입력한 10과 20은 매개변수 x에 들어가는 값. 내가 구하기 위해 넣은 값임.
    그냥 multiplyByTwo만 쓰면 funcion값이 찍힘. (multiplyByThree도 마찬가지)


    즉 그냥 multiplyByTwo만 쓰면

    console.log(multiplyByTwo) = console.log(function(x){return x * num}) 로 출력하고자 하는 값이 입력되지 않음.

     

     

    문제 하나 더.

    function multiplyBy(num){
        return function (x){
            return x * num
        }
    }
    
    function add(x, y) {
        return x + y;
    }
    
    const multiplyByTwo = multiplyBy(2);
    const multiplyByThree = multiplyBy(3);
    
    const result = add(multiplyByTwo(5), multiplyByThree(10));
    console.log (`FINAL => ${result}`)

     

    // x * num => (5 * 2) + (10 * 3) = 40 

    'JavaScript > 2주차-ES6, 일급객체, Map, Set' 카테고리의 다른 글

    6. Set 문법  (0) 2023.05.25
    5. Map 문법  (0) 2023.05.25
    3. 일급 객체로써의 함수 (1)  (2) 2023.05.24
    2. ES6 문법 (2)  (0) 2023.05.24
    1. ES6 문법 (1)  (1) 2023.05.24

    댓글

Designed by Tistory.