[모던 JS] CH26. ES6 함수의 추가 기능 (#14)

CH26. ES6 함수의 추가 기능

26.1 함수의 구분

- ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있음

- 일반적으로 메서드라고 부르던 객체에 바인딩된 함수도 callable이며 constructor

- 객체에 바인딩된 함수도 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있음

var obj = {
    x:10,
    f:function() { return this.x; }
};

console.log(obj.f()); // 10

var bar = obj.f;
console.log(bar());

console.log(new obj.f());

 

- 일반 함수는 함수 선언문이나 함수 표현식으로 정의한 함수

26.2 메서드

- ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미함

- 메서드는 인스턴스를 생성할 수 없는 non-constructor

- 프로토타입 프로퍼티도 없고, 프로토타입도 생성하지 않음

- 표준 빌트인 객체가 제공하는 프로토타입 메서드와 정적 메서드는 모두 non-constructor

- 자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 가짐

- ES6메서드가 아닌 함수는 super 키워드 사용 불가

  : 내부 슬롯 [[HomeObject]]를 갖지 않기 때문

26.3 화살표 함수

26.3.1 화살표 함수 정의

- 함수 정의

const multiply = (x, y) => x * y;
multiply(2, 3);

 

- 매개변수 선언

: 매개변수가 여러개인 경우 소괄호 안에 매개변수 선언

: 매개변수가 한 개인 경우 소괄호 생략 가능

: 매개변수가 없는 경우 소괄호 생략 불가

const arrow = (x, y) => {...};
const arrow = x => {...};
const arrow = () => {...};

 

- 함수 몸체 정의

: 함수 몸체가 하나의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 {} 생략 가능

: 함수 몸체가 여러 개의 문으로 구성된다면 중괄호 생략 불가능

: 반환값이 있다면 명시적으로 반환해야 함

: 화살표 함수도 즉시 실행 함수로 사용할 수 있음

const power = x => x ** 2;
power(2);

const power = x => {return x ** 2};

26.3.2 화살표 함수와 일반 함수의 차이

1. 화살표 함수는 인스턴스를 생성할 수 없음

2. 중복된 매개변수 이름을 선언할 수 없음

3. 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않음

26.3.3 this

- 화살표 함수는 함수 자체의 this 바인딩을 갖지 않음

- 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조함 (lexical this)

 

- 클래스 필드에 할당한 화살표 함수는 프로토타입 메서드가 아니라 인스턴스 메서드가 됨

- 메서드를 정의할 때는 ES6 메서드 축약 표현으로 정의한 ES6 메서드를 사용하는 것이 좋음

class Person {
    name = 'Lee';
    
    sayHi() { console.log(`Hi ${this.name}`); }
}

const person = new Person();
person.sayHi();

26.3.4 super

- 함수 자체의 super 바인딩을 갖지 않음

- 상위 스코프의 super를 참조함

26.3.5 arguments

- 함수 자체의 arguments 바인딩을 갖지 않음

- 상위 스코프의 arguments를 참조함

26.4 Rest 파라미터

26.4.1 기본문법

- Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받음

- 일반 매개변수와 함께 사용 가능, 순차적 할당

- Rest 파라미터가 반드시 마지막 파라미터이어야 함

- 단 하나만 선언 가능

- 함수 정의 시 매개변수를 나타내는 함수 객체의 length 프로퍼티에 영향을 주지 않음

function foo(...rest) {
    console.log(rest);
}

foo(1, 2, 3, 4, 5);

26.4.2 Rest 파라미터와 arguments 객체

- 함수 호출 시 전달된 인수들의 정보를 담고 있는 순회 가능한 유사 배열 객체

- 함수 내부에서 지역 변수처럼 사용할 수 있음

26.5 매개변수 기본값

- 인수가 전달되지 않은 경우 매개변수에 기본값을 할당할 필요가 있음

- 매개변수 기본값은 매개변수에 인수를 전달하지 않은 경우와 undefined를 전달한 경우에만 유효함

- Rest 파라미터에는 기본값 지정 X

- 함수 정의 시 매개변수를 나타내는 함수 객체의 length 프로퍼티와 arguments 객체에 아무런 영향을 주지 않음

function sum (x=0, y=0) {
    return x + y;
}

console.log(sum(1, 2));
console.log(sum(1));