[javascript] function 그리고 일급객체

본 글은 "모던자바스크립트 Deep Dive"를 보던 중에 정리용으로 기록한 글입니다.

▣ 함수

함수 리터럴

• 자바스크립트의 함수는 객체 타입의 값이다.
• 리터럴은 값을 생성하기 위한 표기법이다.
• 아래의 함수 리터럴은 값을 생성하며 이 값은 객체이다. 함수는 객체이다.

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

▣ 함수 생성 방법

1. 함수선언문

function plusOne(num) {
    return num + 1;
}

2. 함수표현식

• 자바스크립트의 함수는 일급객체여서 값으로 활용될 수 있다.
• 즉 특정 변수에 담길 수 있으므로 아래와 같이 표현가능하다.

const plusOne = function (num) {
  return num + 1;
}
console.log(plusOne(1)); // 2

3. Function 생성자 함수

• 자바스크립트가 제공하는 빌트인 함수
• 이런게 있구나 정도만 확인한다.

const plusOne = new Function('num', 'return num + 1');
console.log(plusOne(1)); // 2

4. arrow function

• ES6에서 도입된 화살표 함수는 function 키워드 대신 화살표 함수를 통해 함수를 선언한다.
• 표기법만 축약시키는 의미외에도 내부 동작 또한 간결화 시킨다.
• 생성자 함수로 사용할 수 없고, 기존 함수와 this 바인딩 방식도 다르다.

const plusOne = (num) => num + 1;
console.log(plusOne(1)); // 2

함수 기타

1. 즉시 실행 함수

• IIFE (Immediately Invoked Function Expression)
• 함수 정의와 동시에 즉시 호출되는 함수, 즉 다시 호출될 수 없다
• 그룹연산자로 함수를 묶는 이유는 함수 리터럴로 평가를 해서 함수 객체를 생성하기 위해서다.
• 함수 객체로 평가되면 호출이 가능해진다.
• 즉시 함수 내에 코드를 모아 두면 변수나 함수이름 충돌을 막을 수 있어서 라이브러리에서 주로 쓰인다.

// 반드시 그룹연산자()로 감싸야 한다.
(function () {
    var test = 10;
    return test;
}());

// Uncaught SyntaxError: Function statements require a function name
// 함수선언문은 함수 이름을 필수로 가져야 한다.
function () {
    var test = 10;
    return test;
}();

// Uncaught SyntaxError: Unexpected token ')'
// 자바스크립트는 함수 코드 블럭의 닫는 중괄호 뒤에 ";"을 묵시적으로 추가한다.
// 아래와 같이 풀리게 된다.
// function test() { ... return test; }; 
// (); // 여기 단락에서 에러가 난다.
function test() {
    var test = 10;
    return test;
}();

2. Callback & High Order Function(HOF)

• 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백
• 함수의 외부에서 콜백 함수를 전달받은 함수를 고차함수(HOF) 라고 한다.

function highOrderFunction(count, callback) {
    for (let i = 0; i < count; i++) {
        callback(i);
    }
}

const logAllFunc = (i) => console.log("logAllFunc :: " + i);
const logOddFunc = (i) => { if (i % 2) { console.log("logOddFunc :: " + i) } };

highOrderFunction (3, logAllFunc);

---

▣ 일급 객체

• 함수가 일급객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 것을 의미한다.
• 객체는 값이므로 값이 위치할 수 있는 곳 모든 곳에 리터럴로 정의될 수 있다.
• 일급객체로 함수가 가지는 가장 큰 특징은 일반 객체와 같이 함수의 매개변수에 전달할 수 있으며 리턴값으로 함수를 반환받을 수 있다.

일급객체 조건

• 1) 무명의 리터럴로 생성할 수 있다. 즉 런타임에 생성이 가능하다.
• 2) 변수나 자료구조(객체, 배열등)에 저장할 수 있다.
• 3) 함수의 매개변수에 전달할 수 있다.
• 4) 함수의 반환값으로 사용할 수 있다.

// 1,2 
const plusOne = function (num) {
    return num + 1;
}

const minusOne = function (num) {
    return num - 1;
}

// 2 
const funcObject = {plusOne, minusOne} => 해당 선언식은 아래와 같이 내부적으로 풀림
const funcObject = {
    plusOne: function (num) {
        return num + 1;
    },
    minusOne: function (num) {
        return num - 1;
    }
}

// 3, 4
function makeExecutor(command) {
    let num = 0;
    return function() {
        num = command(num);
        return num;
    }
}

// 3
const plusExecutor = makeExecutor(funcObject.plusOne);
const minusExecutor = makeExecutor(funcObject.minusOne);

console.log(plusExecutor()); // 1
console.log(minusExecutor()); // -1

함수와 객체의 차이점

• 일반 객체는 호출이 불가능하다.
• 함수 고유의 프로퍼티를 가진다.