[JS Deep Dive] 26장 . ES6 함수의 추가 기능

Status
완료

ES6 이전과 이후의 비교

함수의 구분

✅  가장큰 차이 → 함수를 사용목적에 따라 명확하게 구분 했는지의 유무

▫️ES6 이전

☑️ 명확한 구분 x → 한 함수를 생성자로서 호출도 가능하고, 일반함수로서 호출할수 도 있었다.

Callable (호출 가능 함수객체) : → 그냥 실행하면 일반 함수처럼 실행됨

Constructor (인스턴스 생성 가능): → new 를붙이면 생성자 함수로 동작

non-constructor : 인스턴스를 생성할 수 없는 함수 객체

▫️ ES6 이후

✅ 메소드 단축 문법 도입 → 객체 메소드를 명확하게 구분

✅  화살표 함수 도입 →this 바인딩 문제 해결

✅ 클래스(class) 도입 → 생성자 함수와 일반 함수를 구분

메서드

▫️ES6 이전

☑️ 일반적으로 객체에 프로퍼티로 할당된 함수 → 명확한 구분기준 x

☑️ function 키워드를 사용하여 정의 

const obj = {
  name: "Alice",
  sayHello: function () { //function 키워드로 정의
    return "Hello, " + this.name;
  }
};
console.log(obj.sayHello()); // Hello, Alice

▫️ ES6 이후

✅  단축 메소드 문법 추가
✅ 
메서드 축약표현으로 정의된 함수만을 의미 ⇒ 정확한 정의 규정
✅ 
내부슬롯을 가지게됨 ⇒ ES6의 super 키워드 사용가능 


const parent = {
  sayHello() { //ES6 단축문법 
    return "Hello from Parent";
  }
};

const obj = {
  name: "Alice",
  sayHello() {
    return super.sayHello() + `, I'm ${this.name}`;
  }
};

// `obj`의 프로토타입을 `parent`로 설정
Object.setPrototypeOf(obj, parent);

console.log(obj.sayHello()); // Hello from Parent, I'm Alice

화살표 함수

✅ ES6에 새로 등장한 함수
✅ 기존의 함수 정의방식보다 간략하게 함수 정의
✅ 콜백함수 내부에서 this 가 전역객체를 가리키는 문제의 대안으로 활용됨.

▫️ES6 이전

▫️ES6 이후

Rest 파라미터

▫️ ES6 이전

▫️ ES6 이후

매개변수 기본값

인수가 전달되지 않은 매개변수의 값은 undefined
⇒ 이를 방지하는 방식이 ES6 이전과 이후에 차이가 있음

ES6 이전

ES6 이후

function greet(name = "Guest") {
console.log(Hello, ${name}!);
}