모던 자바스크립트 딥다이브, 면접과 함께 공부하기 - 18장 함수와 일급 객체

💡 아래 내용은 모던 자바스크립트 딥다이브를 공부하며 이해했던 내용을 다루고 있습니다. 혹시 틀렸거나 잘못된 정보가 있다면 알려주세요!

📌 18장 함수와 일급 객체

18.1 일급 객체

JS에서 함수는 "일급 객체"입니다.

18.2 함수 객체의 프로퍼티

18.2.1 arguments 프로퍼티

함수가 호출될 때 전달된 인수들의 정보를 담고 있는 유사 배열 객체입니다. arguments 객체는 함수 내부에서만 접근할 수 있습니다.

function sum() {
  let result = 0;
  for (let i = 0; i < arguments.length; i++) {
    result += arguments[i];
  }
  return result;
}

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

유사 배열 객체가 뭔가요?

배열처럼 인덱스를 통해 접근할 수 있고, length 프로퍼티를 가지지만, 배열의 내장 메서드를 사용할 수 없는 객체를 말합니다. 유사 배열 객체는 순회할 수 있지만, push, pop, slice, reduce 등과 같은 배열의 메서드를 사용할 수 없습니다. 또, for...of 반복문을 사용할 수 없습니다.

let similarArray = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

for (let i = 0; i < similarArray.length; i++) {
  console.log(similarArray[i]);  // 'a', 'b', 'c' 순서대로 출력됩니다.
}

18.2.2 caller 프로퍼티

함수 객체의 내장 프로퍼티로서, 해당 함수를 호출한 함수를 가리킵니다. 만약, 호출한 함수가 없다면 null을 가리킵니다.

function outerFunc() {
  innerFunc();
}

function innerFunc() {
  console.log(innerFunc.caller); // outerFunc
}

function myFunc() {
  console.log(myFunc.caller); // null
}

outerFunc();
myFunc();

18.2.3 length 프로퍼티

함수가 정의할 때 명시적으로 지정한 매개변수의 개수를 반환합니다. 기본 매개변수는 length 프로퍼티에 포함되지 않습니다

function minus(a, b) {
  return a - b;
}


function add(a, b = 0) {
  return a + b;
}

console.log(minus.length);  // 출력 결과: 2
console.log(add.length);  // 출력 결과: 1

18.2.4 name 프로퍼티

함수의 이름을 나타냅니다.

function myFunction() {
  // ...
}

console.log(myFunction.name); // "myFunction"

18.2.5 proto 접근자 프로퍼티

프로토타입 객체 그 자체를 가리키는 속성입니다. 예를 들어, 어떤 객체의 __proto__를 통해 그 객체의 프로토타입에 접근하거나 그 프로토타입을 다른 것으로 바꿀 수 있습니다.

하지만 __proto__를 직접 사용하는 것은 바람직하지 않습니다. 이는 자바스크립트에서 공식적으로 지원하는 기능이 아니라, 일부 브라우저에서만 지원하는 기능입니다. 또한 이를 통해 프로토타입을 변경하는 것은 코드를 이해하거나 예측하는 데 어려움을 줄 수 있습니다.

대신 Object.getPrototypeOf 또는 Object.setPrototypeOf 등의 메소드를 사용하여 객체의 프로토타입에 안전하게 접근하거나 변경하는 것이 좋습니다.

18.2.6 prototype 프로퍼티

다른 객체들이 공통으로 사용할 수 있는 속성이나 메소드를 가진 객체를 가리킵니다. 이 prototype 프로퍼티는 그 함수를 이용해 새로운 객체를 만들 때 중요한 역할을 합니다. 즉, new 키워드를 사용해서 함수로부터 객체를 생성하면, 그 객체는 자동으로 그 함수의 prototype 프로퍼티를 참조합니다.

function Dog(name) {
  this.name = name;
}

Dog.prototype.bark = function() {
  console.log(`${this.name} says woof!`);
}

let dog1 = new Dog('Max');
let dog2 = new Dog('Bella');

dog1.bark();  // "Max says woof!"
dog2.bark();  // "Bella says woof!"