🐸 [JavaScript] 함수와 일급 객체

뭔가 코드로 공부하는 게 좀 더 잘 와닿는 기분이라서,, 이번 글 부터는 코드 폭탄 포스트가 될 것 같다..ㅎㅎ

---

일급 객체

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

// 1. 함수는 무명의 리터럴에 저장할 수 있다.
// 2. 함수는 변수에 저장할 수 있다. 
// runtime에 함수 리터럴이 평가되어 함수 객체가 생성되고, 변수에 할당된다.
const increase = function (num) {
    return ++num;
};

const decrease = function (num) {
    return --num;
};

// 2. 함수는 객체에 저장할 수 있다.
const auxs = { increase, decrease };

// 3. 함수의 매개변수에 전달할 수 있다.
// 4. 함수의 반환값으로 사용할 수 있다.
function makeCounter(aux) {
    let num = 0;

    return function () {
        num = aux(num);
        return num;
    };
}

// 3. 함수는 매개변수에 함수를 전달할 수 있다.
const increaser = makeCounter(auxs.increase);
console.log(increaser()); // 1
console.log(increaser()); // 2

// 3. 함수는 매개변수에게 함수를 전달할 수 있다.
const decreaser = makeCounter(auxs.decrease);
console.log(decreaser()); // -1
console.log(decreaser()); // -2

---

함수 객체의 프로퍼티

function square(number) {
    return number * number;
}

// console.dir : 함수 객체의 내부를 들여다보는 메서드
console.dir(square); // [Function: square]

------------------------------------------
// 모든 property의 property attribute를 확인하는 메서드
console.log(Object.getOwnPropertyDescriptors(square));

function square(number) {
    return number * number;
}

// __proto__는 square 함수의 프로퍼티가 아니다.
console.log(Object.getOwnPropertyDescriptor(square, '__proto__')); // undefined

// __proto__는 Object.prototype 객체의 접근자 프로퍼티다.
// square 함수는 Object.prototype 객체로부터 __proto__ 접근자 프로퍼티를 상속받는다.
console.log(Object.getOwnPropertyDescriptor(Object.prototype, '__proto__'));

- arguments 프로퍼티

function multiply (x, y) {
    console.log(arguments);
    return x * y;
}

console.log(multiply());
console.log(multiply(1));
console.log(multiply(1, 2));
console.log(multiply(1, 2, 3));

- arguments 객체의 Symbol(Symbol.iterator) 프로퍼티

function multiply (x, y) {
  	// 이터레이터
    const iterator = arguments[Symbol.iterator]();

  	// 이터레이터의 next 메서드를 호출하여 이터러블 객체 arguments를 순회
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
  	console.log(iterator.next());

    return x + y;
}

multiply(1, 2, 3);

JS에서는 선언된 매개변수의 개수와, 함수를 호출할 떼 전달하는 인수의 개수를 확인하지 않는다.
그런데 함수가 호출되면, 인수의 개수를 확인한 다음, 이에 따라 함수의 동작을 달리 정의할 필요가 있을수도 있다.

이 때 arguments 객체가 유용하게 사용된다.

function sum() {
    let res = 0;

    // arguments 객체는 length 프로퍼티가 있는 유사 배열 객체.
    // for문으로 순회 가능하다.
    for (let i=0; i < arguments.length; i++){
        res += arguments[i];
    }

    return res;
}

console.log(sum());         // 0
console.log(sum(1, 2));     // 3
console.log(sum(1, 2, 3));  // 6

// 하지만 arguments는 어디까지나 유사 배열 객체이다.
// 배열은 아니므로, 배열 메서드를 사용하면 error가 발생한다.

function sum() {
  	// 그래서 Function.prototype.call, Function.prototype.apply 를 통해 간접 호출해야 함
    const array = Array.prototype.slice.call(arguments);
    return array.reduce(function (pre, cur) {
        return pre + cur;
    }, 0);
}

console.log(sum(1, 2));           // 3
console.log(sum(1, 2, 3, 4, 5));  // 15


// => 매번 간접 호출하기는 너무 번거로움!!

// 그래서 ES6 에서는, Rest 파라미터를 도입함

function sum(...args) {
    return args.reduce((pre, cur)=> pre + cur, 0);
}

console.log(sum(1, 2));
console.log(sum(1, 2, 3, 4, 5));

- caller 프로퍼티

• ECMAScript 사양에는 포함되지 않음

function foo(func) {
    return func();
}

function bar() {
    return 'caller : ' + bar.caller;
}

// 브라우저에서의 실행한 결과
console.log(foo(bar));
console.log(bar());

- length 프로퍼티

• 함수를 정의할 때 선언한 매개변수의 개수를 가리킴
• arguments 객체와 함수 객체의 length 프로퍼티 값은 다를 수 있다.
  • arguments : 인수의 개수
  • 함수 : 매개 변수의 개수

function foo() {}
console.log(foo.length);  // 0

function bar(x) {
    return x;
}
console.log(bar.length);  // 1

function baz(x, y) {
    return x * y;
}
console.log(baz.length);  // 2

- name 프로퍼티

• 함수 객체의 name 프로퍼티는, 함수의 이름을 나타냄
• ES6부터 표준이 됨 (그 전에는 비표준)
  • 익명 함수 표현식의 경우
    • ES5 : 빈 문자열을 값으로 가짐
    • ES6 : 함수 객체를 가리키는 식별자를 값으로 가짐

var namedFunc = function foo() {};
console.log(namedFunc.name);     // foo

var anonymousFunc = function() {};
console.log(anonymousFunc.name); // anonymousFunc

function bar() {}
console.log(bar.name); // bar

- __proto__ 프로퍼티

• 모든 객체는 [[Prototype]]이라는 내부 슬롯을 가짐
• __proto__ : 접근자 프로퍼티
  • [[Prototype]] 내부 슬롯이 가리키는 프로토타입 객체에 접근하기 위해,,,

const obj = { a: 1 };

// Object.prototype : 객체 리터럴 방식으로 생성한 객체의 프로토타입 객체
console.log(obj.__proto__ === Object.prototype);

// 객체 리터럴 방식으로 생성한 객체는 프로토타입 객체인 Object.prototype의 프로퍼티를 상속받음
// hasOwnProperty 메서드 : Object.prototype의 메서드
console.log(obj.hasOwnProperty('a'));
console.log(obj.hasOwnProperty('__proto__'));

- prototype 프로퍼티

• 생성자 함수로 호출할 수 있는 객체만이 소유하는 프로퍼티
  • constructor만이 소유 가능
• 일반 객체, non-constructor에는 protytype 프로퍼티가 없음
  

---

확실히 코드를 직접 손으로 쳐보니까, '오 그러네' 정도의 이해라도 가능한 것 같다.

앞으로도 이렇게 공부를 해봐야겠다..!