non-constructor 함수

non-constructor 함수는 생성자 함수가 아닌 일반적인 함수들을 말합니다. 이러한 함수들은 객체를 인스턴스화하거나 새로운 객체를 생성하는 목적이 아닌 다른 기능을 수행합니다.

1. 화살표 함수 (Arrow functions)

화살표 함수는 => 기호를 사용하여 정의됩니다. 주요 특징은 다음과 같습니다:

• 함수 내부에 자체적인 this 컨텍스트를 생성하지 않습니다. 대신, 함수가 선언된 위치의 컨텍스트를 상속받습니다.
• 화살표 함수는 항상 익명 함수로 정의되며, 변수에 할당하거나 다른 함수의 인자로 전달될 수 있습니다.

// 매개변수 없이 반환값을 출력하는 화살표 함수
const sayHello = () => {
  console.log("Hello!");
};

sayHello(); // 출력: Hello!

// 매개변수를 받아 합을 반환하는 화살표 함수
const sum = (a, b) => a + b;

console.log(sum(2, 3)); // 출력: 5

2. ES6 메서드 축약 표현 (ES6 Method Shorthand)

ES6에서는 객체의 메서드를 정의하는 간결한 문법이 도입되었습니다. 메서드 축약 표현은 함수를 객체의 프로퍼티로 할당하는 과정을 간단화합니다.

• 함수 정의 시 함수 이름을 생략할 수 있습니다.
• 메서드 축약 표현은 화살표 함수와는 달리 자체적인 this 컨텍스트를 생성합니다.

const person = {
  name: "John",
  age: 30,

  // ES6 메서드 축약 표현으로 정의된 메서드
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  },
};

person.sayHello(); // 출력: Hello, my name is John
person.sayAge(); // 출력: I am undefined years old

---

위 두가지 함수의 this 차이점

const person = {
  name: "John",
  age: 30,

  // ES6 메서드 축약 표현으로 정의된 메서드
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  },

  // 화살표 함수로 정의된 메서드
  sayAge: () => {
    console.log(`I am ${this.age} years old`); // 'this'는 전역 객체를 가리킵니다.
  }
};

person.sayHello(); // 출력: Hello, my name is John
person.sayAge(); // 출력: I am undefined years old

1. sayHello: ES6 메서드 축약 표현으로 정의

person 객체 내부의 this는 객체 자체를 가리킵니다.

2. sayAge: 화살표 함수로 정의

this는 전역 객체를 가리킵니다.