[딥 다이브 스터디] 24.04.11 함수와 일급 객체

18.1 일급 객체 - 내가 발표할 부분✨

1. 무명의 리터럴로 생성할 수 있다. 즉 런타임에 생성이 가능하다.

2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.

3. 함수의 매개변수에 전달할 수 있다.

4. 함수의 반환값으로 사용할 수 있다.

// 1. 함수는 무명의 리터럴로 생성할 수 있다.
function sayHello() {
    console.log('Hello!');
}
// 2. 함수는 변수에 저장할 수 있다.
// 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다.
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
// 4. 함수의 반환값으로 사용할 수 있다.
const decreaser = makeCounter(auxs.decrease);
console.log(decreaser()); // -1
console.log(decreaser()); // -2

1. 함수는 무명의 리터럴로 생성할 수 있습니다.
1. 즉, 이름 없이 함수 표현식을 사용하여 함수를 생성할 수 있습니다. 여기서 increase와 decrease 함수는 이름 없이 정의되었고, 변수에 할당되었다는 것을 확인할 수 있다.

2. 함수는 변수에 저장할 수 있습니다.
1. increase 함수와 decrease 함수가 각각 increase, decrease 변수에 저장됩니다. 이는 함수를 값처럼 다룰 수 있음을 의미한다.

3. 함수는 객체에 저장할 수 있습니다.
1. increase와 decrease 함수는 auxs 객체의 프로퍼티로 저장됩니다. 이렇게 하면 함수를 객체의 메소드처럼 사용할 수 있다.

4. 함수의 매개변수에 전달할 수 있습니다.
1. makeCounter 함수는 함수(aux)를 매개변수로 받고, 이 함수를 내부에서 호출하여 결과를 사용한다.
2. 이는 고차 함수의 한 예로, 함수를 다른 함수의 인자로 전달할 수 있음을 보여준다.

5. 함수의 반환값으로 사용할 수 있습니다.
1. makeCounter 함수는 또 다른 함수를 반환합니다. 이 반환된 함수는 num 변수의 값을 increase 또는 decrease 함수를 이용해 변경한 후 그 결과를 반환한다.
2. 이 패턴은 클로저를 생성하며, 반환된 함수는 makeCounter 함수의 지역 변수 num에 접근할 수 있다.

18.2 함수 객체의 프로퍼티 - 내가 발표할 부분✨

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

console.log(Object.getOwnPropertyDescriptors(square));
/**
{
    length: { value: 1, writable: false, enumerable: false, configurable: true },
    length: 함수가 기대하는 인자의 수를 나타낸다.

    name: {
        value: 'square',
        writable: false,
        enumerable: false,
        configurable: true
    },
    name: 함수의 이름을 나타낸다.

    arguments: {
        value: null,
        writable: false,
        enumerable: false,
        configurable: false
    },
    arguments: 함수의 인자에 대한 정보를 담고 있으나, 
    최신 자바스크립트 표준에서는 사용되지 않는다.

    caller: {
        value: null,
        writable: false,
        enumerable: false,
        configurable: false
    },
    caller: 함수를 호출한 함수에 대한 참조를 담고 있으나, 
    최신 자바스크립트 표준에서는 사용되지 않는다.

    prototype: { value: {}, writable: true, enumerable: false, configurable: false }
    prototype: 함수가 생성자로 사용될 때, 
    이 함수로 생성된 객체들의 부모 역할을 하는 프로토타입 객체를 가리킨다.

}
*/
/*
	함수 객체의 내장 프로퍼티 확인하기: Object.getOwnPropertyDescriptors(square)
	를 통해 square 함수 객체의 모든 자체 속성 설명자를 가져온다. 
	여기서 length, name, arguments, caller, prototype 등의 프로퍼티가 나타난다.
	 각 프로퍼티는 함수 객체와 관련된 다양한 메타데이터를 담고 있으며, 
	 이들은 함수의 동작 방식과 관련이 있다.
*/

console.log(Object.getOwnPropertyDescriptor(square, '__proto__')); // undefined
/*
	__proto__ 접근자 프로퍼티: 
	__proto__는 객체의 내부 프로토타입(즉, [[Prototype]] 내부 슬롯)에 접근하기 
	위한 접근자 프로퍼티이다. 
	Object.getOwnPropertyDescriptor(square, '__proto__')가 undefined를 반환하는 것은,
	__proto__가 실제로는 square 함수 객체의 직접적인 프로퍼티가 아니라, 
	Object.prototype에서 상속받은 접근자 프로퍼티이기 때문이다.
*/

//  __proto__는 Object.prototype 객체의 접근자 프로퍼티이다.
// quare 함수는 Object.prototype 객체로부터 __proto__ 접근자 프로퍼티를 상속받는다.
console.log(Object.getOwnPropertyDescriptor(Object.prototype, '__proto__'));
/*
    {
    get: [Function: get __proto__],
    set: [Function: set __proto__],
    enumerable: false,
    configurable: true
    }
    
    Object.getOwnPropertyDescriptor(Object.prototype, '__proto__')를 통해 
    __proto__ 접근자 프로퍼티의 속성 설명자를 확인할 수 있다. 
    이 설명자는 __proto__ 프로퍼티의 getter와 setter 함수를 포함하고, 
    이는 객체의 프로토타입 체인을 읽거나 수정할 때 사용된다.
     
    enumerable이 false로 설정되어 있어 열거되지 않으며, 
    configurable이 true로 설정되어 있어 삭제하거나 수정할 수 있다.
*/

18.2.1 arguments 프로퍼티

function sum(){
	let res = 0;

    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

• 유사 배열 객체는 배열이 아니므로 배열 메서드를 사용할 경우 에러가 발생한다. 따라서 배열 메서드를 사용하려면 Function.prototype.call, Function.prototype.apply를 사용해 간접 호출해야 하는 번거로움이 있다.

• 이러한 번거로움을 해결하기 위해 ES6에서는 Rest 파라미터를 도입했다.
ES6 Rest 파라미터의 도입으로 모던 자바스크립트에서는 arguments 객체의 중요성이 이전 같지는 않지만 언제나 ES6만 사용하지는 않을 수 있기 때문에 알아둘 필요가 있다.

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

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

18.2.2 caller 프로퍼티

18.2.3 length 프로퍼티

18.2.4 name 프로퍼티

18.2.5 __proto__ 접근자 프로퍼티

18.2.6 prototype 프로퍼티