📆 2025.04.21 ‐ 2025.04.22 ‐ Function invocation [멋쟁이사자처럼부트캠프 프론트엔드13기]

rogie·2025년 4월 22일

JavaScript 멋쟁이사자처럼후기 자바스크립트

likelion-posting

목록 보기

7/10

🧠 배운 점 & 정리

함수로 호출

일반적인 함수 호출 방법
함수();

this 는 window 객체

window 객체는 어디서나 참조 가능하므로 this를 사용할 필요 없음

function f1(){
  console.log(this);
  this.alert();
  window.alert();
  alert();
};
f1();

const f2 = function(){
  console.log(this);
};
f2();

메서드
- 메서드로 호출
  - 객체에 정의된 메서드를 호출할 때
  - 객체 메서드명
  - this 는 메서드를 정의한 객체
    - this 는 생성된 객체를 참조하므로 객체에 종속적인 속성을 부여하는게가능
    - 함수를 하나만 정의하고 여러 객체에서 메서드로 사용
    - 자바스크립트로 객체지향 프로그래밍을 가능하게 하는 중요한 특징
```
window.name = "global"; // window 브라우저가 가지고 있는 전역 객체
global.name = "global"; // node.js가 가지고 있는 전역 객체
globalThis.name = "global"; // 브라우저면 window로 인식하고 node.js는 global로 인식함
```
- 화살표 함수 호출
  - 일반 함수나 메서드와 동일하게 호출하지만 함수 내부에 arguments 나 this 가 생성되지 않고 상위 컨텍스트의 arguments, this 를 사용하게 됨
```
const getPingName = () => {
  console.log(this);
  return this.name;
};

const ping1 = { name: '바로핑', age: 11, getName: getPingName };
const ping2 = { name: '라라핑', age: 9, getName: getPingName };

console.log(baro.age, baro.getName());
console.log(rara.age, rara.getName());
```

apply(), call()

apply(), call() 메서드로 호출
- 함수에 정의된 메서드
- 함수명.apply(), 함수명.call() 형태로 호출
- this 는 apply(), call() 메소드의 첫번째 인자로 전달되는 객체
- this 를 명시적으로 지정할 수 있음
- 콜백 함수 호출 시 주로 사용

apply(p1, p2)

두 개의 매개변수를 가짐
첫 번째 매개변수 (p1) 에는 this 로 사용할 객체를 전달 ⇒ 생략가능
두 번째 매개변수 (p2) 에는 함수에 전달할 인자값 배열 ⇒ 생략가능

단 매개변수가 2개 이상으로 들어가야할때는 p2를 배열로 전달한다

ex02-05.js

function add(x, y) {
  console.log(this);
  return x + y;
}

console.log(add.apply({ name: "apply" }, [100, 10])); // this는 {name: "apply"}
// 출력 결과 {name: "apply"}
// x= 100, y=10 => x + y = 100 + 10 = 110

ex02-15.js

globalThis.name = "global"; // 브라우저면 window로 인식하고 node.js는 global로 인식함

const getPingName = function () {
  return this.name;
};

const baro = new Object();
baro.name = "바로핑";
baro.age = 9;
baro.getName = getPingName;

const rara = {
  name: "라라핑",
  age: 8,
  getName: getPingName,
};

// 함수 호출하는 방법 1 - 일반 함수로 호출(this는 window)
console.log(getPingName());

// 함수 호출하는 방법 2 - 메서드로 호출(this는 메서드를 정의한 객체, this는 baro )
console.log(baro.age, baro.getName()); // getName의 this는 baro
console.log(rara.age, rara.getName()); // getName의 this는 rara

console.log("=========================================");
console.log(baro.getName(), baro.getName.apply(rara)); 
// this는 각각     baro,     rara

call(p1, p2, p3, …)

여러 개의 매개변수를 가짐
첫 번째 매개변수 (p1) 에는 this 로 사용할 객체를 전달

두 번째 이후의 매개변수 (p2, p3, …) 에는 함수에 전달할 인자값을 차례대로지정

ex02-05.js

function add(x, y) {
  console.log(this);
  return x + y;
}
console.log(add.call({ name: "call" }, 60, 10)); // this는 {name: "call"}
// 출력 결과 {name: call}
// x= 60, y=10 => x + y = 60 + 10 = 70

ex02-15.js

globalThis.name = "global"; // 브라우저면 window로 인식하고 node.js는 global로 인식함

const getPingName = function () {
  return this.name; // 호출한 객체의 name 속성을 반환함
};

const baro = new Object(); // 바로라는 이름을 가진 새로운 객체 생성
baro.name = "바로핑"; // name 속성 설정
baro.age = 9; // age 속성 설정
baro.getName = getPingName; // getPingName 함수를 메서드로 할당

const rara = { // rara라는 이름을 가진 새로운 배열을 만듦
  name: "라라핑", // 이름
  age: 8, // 나이
  getName: getPingName, // 나의 이름
};

// 함수 호출하는 방법 1 - 일반 함수로 호출(this는 window)
console.log(getPingName());  // this.name => global

// 함수 호출하는 방법 2 - 메서드로 호출(this는 메서드를 정의한 객체, this는 baro )
console.log(baro.age, baro.getName()); // getName의 this는 baro
console.log(rara.age, rara.getName()); // getName의 this는 rara

// call을 사용하여 this를 명시적으로 지정
console.log("=========================================");
console.log(getPingName(), getPingName.call(baro), getPingName.call(rara));
// this는  window,                          baro,                   rara

배열의 push() 메서드 기능
- 배열의 마지막에 지정한 요소를 추가한다.
- this로 지정된 Array 객체의 length 속성값에 해당하는 속성을 만들고 지정한 요소를 저장한 후 length를 하나 증가시킨다.
Array의 push() 메서드를 이용하여 객체를 배열처럼 동작시키기
- length 속성 추가
- Array.prototype.push.call(객체, 추가할 요소) ⇒ ex01-28.js

생성자 함수
- 생성자 함수 (객체지향 언어의 클래스와 비슷) 호출
  - 함수를 생성자로 사용할 경우
    - new 함수명()
    - this는 생성자를 통해 생성된 객체
- 생성자로 호출될 때의 내부 동작 (ex02-19.js)
```
/*
함수 호출 방법 4 생성자 함수
*/

globalThis.name = "global"; // 브라우저면 window로 인식하고 node.js는 global로 인식함

const getPingName = function () {
  return this.name;
  // 화살표 함수를 만들면 this를 생성하지 않음
};

// 객체를 생성해서 반환하는 함수(생성자)
function Ping(name, age) {
  this.name = name;
  this.age = age;
  this.getName = function () {
    return this.name;
  };
}

/**
 * new의 동작
  * 1. 빈 객체를 참조하는 this 생성
  * 2. this를 생성자 함수에 전달
  * 3. 생성자 함수가 아무것도 리턴하지 않는다면 this를 자동으로 리턴
  */
const baro = new Ping("바로핑", 7);
const rara = new Ping("라라핑", 8);
const copyPing = new Ping("카피핑", 12);

baro.age++;
rara.age++;

console.log("이 핑의 이름은:", baro.getName(), "| 나이는:", baro.age); // getName의 this는 baro
console.log("이 핑의 이름은:", rara.getName(), "| 나이는:", rara.age); // getName의 this는 rara
console.log("이 핑의 이름은:", copyPing.getName(), "| 나이는:", copyPing.age); // getName의 this는 copyPing
```
  - 비어있는 객체를 새로 생성
```
const baro = new Ping("바로핑", 7);
```
  new Ping(...)을 호출하면, 자바스크립트는 내부적으로
  
  this = {} 와 같은 비어 있는 객체를 먼저 생성한다.
  - 새로 생성된 객체는 this 매개변수로 생성자 함수에 전달
```
function Ping(name, age) {
  this.name = name;
  this.age = age;
  this.getName = function () {
    return this.name;
  };
}
```
  위에서 만들어진 this = {}는
  
  Ping 함수 안으로 this라는 이름으로 들어감
  
  그런 다음 this.name, this.age 같은 속성들이 채워짐
  - 명시적으로 반환하는 객체가 없다면 생성된 객체를 반환
```
// Ping 함수에는 return이 없음
```
  Ping 함수는 명시적으로 return을 하지 않음 →
  
  그래서 자바스크립트는 자동으로 채워진 this 객체를 리턴함
  
  즉, baro 변수에는 { name: "바로핑", age: 7, getName: function }이 저장됨
  - 객체지향 프로그램의 new 연산자와 비슷한 동작
```
const baro = new Ping("바로핑", 7);
```
  이 전체 흐름은 Java, C++ 같은 객체지향 언어에서의 new와 유사함
  
  즉, new는 객체 생성 + 초기화 + 반환까지 한 번에 해주는 키워드야
- 생성자를 작성할 때 고려해야 할 것들
  - 일반 함수처럼 호출할 수 있지만, 이럴 경우 생성자 내부의 this는 window 객체를 가리키므로 객체에 종속적인 값을 지정할 수 없으므로 의미가 없다.
  - 명명(naming) 규칙
    - 일반 함수: 작업한 동작을 나타내는 동사로 이름 짓고 소문자로 시작
    - 생성자: 생성할 객체를 나타내는 명사로 이름 짓고 대문자로 시작