JavaScript 문법 종합 2주차(일급 객체로서의 함수💫)

자바스크립트에서 함수는 일급 객체(First-Class Object)라고 한다. 그래서 함수를 객체처럼 여러가지 방식으로 다룰 수 있고, 일반 객체와 달리 함수는 특별한 능력을 가지고 있다.

자바스크립트의 기본 타입(data type)은 객체(object)입니다.

객체란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합입니다.
프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드(method)라고 합니다.

자바스크립트에서는 숫자, 문자열, 불리언, undefined 타입을 제외한 모든 것이 객체입니다.
하지만 숫자, 문자열, 불리언과 같은 원시 타입은 값이 정해진 객체로 취급되어, 객체로서의 특징도 함께 가지게 됩니다.

객체이름.프로퍼티이름
또는
객체이름["프로퍼티이름"]

객체이름.메소드이름()

(메소드를 참조할 때 메소드 이름 뒤에 괄호(())를 붙이지 않으면, 메소드가 아닌 프로퍼티 그 자체를 참조하게 됩니다. 따라서 괄호를 사용하지 않고 프로퍼티 그 자체를 참조하게 되면 해당 메소드의 정의 그 자체가 반환됩니다.)

일급 객체로서의 함수

일급객체(First-class Object)란, 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. (다른 객체들과 일반적으로 같다. 함수도 가능하다!)

 

함수가 일급 객체로 취급되기 때문에, 우리는 함수를 매우 유연하게 사용할 수 있으며 자바스크립트에서의 함수는 매우 중요한 개념이다

 

특징(5)

변수에 함수를 할당

함수는 변수에 할당할 수 있다. 함수는 값으로 취급되기 때문에, 다른 변수와 마찬가지로 변수에 할당할 수 있다. 변수에 할당된 함수는 나중에 사용할 수 있다.

// const 변수
// function 함수

const sayHello = function() {
  console.log('Hello!');
};

sayHello(); // "Hello!" 출력

 

함수를 인자로 다른 함수에 전달

함수는 다른 함수에 인자로 전달될 수 있다. 함수가 값으로 취급되기 때문에, 다른 함수의 인자로 전달할 수 있다. 이것은 콜백(callback)이나 고차 함수(higher-order function)를 작성하는 데 사용된다.

콜백 함수. 그리고, 고차 함수(Higher-Order Function)란?
- 콜백 함수는 어떠한 함수의 매개변수로 쓰이는 함수
- 고차 함수는 함수를 인자로 받거나 함수를 출력으로 반환return하는 함수, 함수를 다루는 함수라고도 함.
(콜백함수는 고차함수라고도 할 수 있음)

function callFunction(func) {
  // 매개변수func로 받은 변수가 사실, 함수다
  func();
}
// 2. = 
// function callFunction(function () {
//     console.log('Hello!');
// });)
// func();


const sayHello = function() {
  console.log('Hello!');
};

callFunction(sayHello); // "Hello!" 출력
// 1. = 
// callFunction(function() {
//     console.log('Hello!');
// };)

매개변수로써 함수가 들어간 콜백함수 였다

 

함수를 반환

함수는 다른 함수에서 반환될 수 있다. 함수는 값으로 취급되기 때문에, 다른 함수에서 반환할 수 있다. 이것은 함수 팩토리(factory)나 클로저(closure)를 작성하는 데 사용된다.

function createAdder(num) {
  return function(x) {
    return x + num;
  }
}
const addFive = createAdder(5);
console.log(addFive(10)); // 15 출력


// 이렇게 해석
const addFive = createAdder(5);
// const addFive = function(x) {
//  return x + 5;
// };
console.log(addFive(10));
// const addFive = createAdder(10);
// const addFive = function(10) {
//  return 10 + 5;
// };
// 15

 

객체의 프로퍼티로 함수를 할당

함수는 객체의 프로퍼티로 할당될 수 있고, 객체의 메소드로 함수를 호출할 수 있다.

// 객체
const person = {
    name: 'John',
    age: 31,
    isMarried: true,
    // 함수도 들어갈 수 있다.
    sayHello: function() {
        // { }안에서의 this 자신_person을 가르킴
    //console.log("Hello, my name is" + this.name);
      console.log(`Hello, my name is ${this.name}`);
    }
  };
  
  person.sayHello(); // "Hello, my name is John" 출력

// 객체
const person = {
    name: 'John',
    age: 31,
    isMarried: true,
    // 화살표 함수는 this를 바인딩 하지 않는다. undefined, 즉 화살표 함수를 쓰면 안된다.(this)
    sayHello: () => {
        console.log(`Hello, my name is ${this.name}`); // undefined
    }
  };
  
  person.sayHello(); // Hello, my name is undefined

 

배열의 요소로 함수를 할당

함수는 배열의 요소로 할당될 수 있고, 이것은 함수를 배열에서 사용할 수 있게 한다.

//함수를 배열myArray의 요소로 받음
const myArray = [
    // 이 첫번째 함수는 myArray의 0번째 요소
    function(a, b) {
      return a + b;
    },
    // 이 두번째 함수는 myArray의 1번째 요소
    function(a, b) {
      return a - b;
    }
  ];
  
  // 함수이름() -> 배열의 요소로 접근하는 방법으로
  // myArray의 0번째 요소인 a+b를 반환하는 함수에 a는1, b는3 대입
  console.log(myArray[0](1, 3)); // 4 출력
  // myArray의 1번째 요소인 a-b를 반환하는 함수에 a는10, b는7 대입
  console.log(myArray[1](10, 7)); // 3 출력

function multiplyBy(num) {
    return function (x) {
        return x * num;
    }
}

function add(x, y) {
    return x + y;
}

const multiplyByTwo = multiplyBy(2);
// const multiplyByTwo = return function (x) {
//      return x * 2;
//  };
console.log(multiplyByTwo(10));
// 20


const multiplyByThree = multiplyBy(3);
// const multiplyByThree = return function (x) {
//      return x * 3;
//  };
console.log(multiplyByThree(10));
// 30

const result = add(multiplyByTwo(5), multiplyByThree(10)); // 40 출력
// 10 + 30