[JavaScript/DeepDive]26.ES6 함수의 추가 기능

• [26.1] 함수의 구분
• ES6 이전의 함수는 동일한 함수라도 다양한 형태로 호출할 수 있다.
  • var foo = function ( ) {
         return 1;
    };
    
    // 일반적인 함수로서 호출
    foo( ); // ->1
    
    // 생성자 함수로서 호출
    new foo ( ); // -> foo { }
    
    // 메서드로서 호출
    var obj = { foo: foo };
    obj.foo( ); // -> 1
• ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다.
  • 다시 말해, ES6 이전의 모든 함수는 callable이면서 constructor다.
• ES6에서는 함수를 사용 목적에 따라 세 가지 종류로 명확히 구분했다.

ES6 함수의 구분	constructor	prototype	super	arguments
일반 함수(Normal)	O	O	X	O
메서드(Method)	X	X	O	O
화살표 함수(Arrow)	X	X	X	X

 

 

 

• [26.2] 메서드
• 일반적으로 메서드는 객체에 바인딩된 함수를 일컫는 의미로 사용되었다.
• ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다.
  • const obj = {
         x: 1,
         // foo는 메서드다.
         foo( ) { return this.x; },
         // bar에 바인딩된 함수는 메서드가 아닌 일반 함수다.
         bar: function( ) { return this.x; }
    };
    console.log(obj.foo( )); // 1
    console.log(obj.bar( )); // 1
• ES6사양에서 정의한 메서드(이하 ES6 메서드)는 인스턴스를 생성할 수 없는 non-constructor다.
  • 따라서 ES6 메서드는 생성자 함수로서 호출할 수 없다.
• ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 갖는다.
  • 내부 슬롯 [[HomeObject]]를 갖는 ES6 메서드는 super 키워드를 사용할 수 있다.
• ES6 메서드가 아닌 함수는 super 키워드를 사용할 수 없다.

 

 

 

• [26.3] 화살표 함수
• 화살표 함수는 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용하다.
• 화살표 함수 정의
• 화살표 함수는 함수 선언문으로 정의할 수 없고 함수 표현식으로 정의해야 한다.
• 매개변수가 한 개인 경우 소괄호 ( )를 생략할 수 있다.
• 함수 몸체가 하나의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 { }를 생략할 수 있다.
  • 함수 몸체의 문이 표현식이 아닌 문이라면 중괄호를 생략할 수 없다.
• 객체 리터럴을 반환하는 경우 객체 리터럴을 소괄호 ( )로 감싸 주어야 한다.
• 화살표 함수도 즉시 실행 함수로 사용할 수 있다.
  • const person = ( name => ({
         sayHi( ) { return `Hi? My name is ${name}. `; }
    }))('Lee');
    
    console.log(person.sayHi( )); // Hi? My name is Lee.
• 화살표 함수와 일반 함수의 차이
• 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor다.
  • 화살표 함수는 인스턴스를 생성할 수 없으므로 prototype 프로퍼티가 없고 프로토타입도 생성하지 않는다.
• 중복된 매개변수 이름을 선언할 수 없다.
• 화살표 함수는 함수 자체의 this, argument, super, new.target 바인딩을 갖지 않는다.
• this
• this 바인딩은 함수의 호출 방식, 즉 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다.
• 고차 함수 내부에서 호출되는 콜백 함수도 중첩 함수라고 할 수 있다.
• 화살표 함수는 함수 자체의 this 바인딩을 갖지 않는다.
  • 따라서 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다.
    • 이를 lexical this라 한다.
• 만약 화살표 함수와 화살표 함수가 중첩되어 있다면 상위 화살표 함수에도 this 바인딩이 없으므로 스코프 체인 상에서 가장 가까운 상위 함수 중에서 화살표 함수가 아닌 함수의 this를 참조한다.
• 만약 화살표 함수가 전역 함수라면 this는 전역 객체를 가리킨다.
  • 전역 함수의 상위 스코프는 전역이고 전역에서 this는 전역 객체를 가리키기 때문이다.
• 프로퍼티에 할당한 화살표 함수도 스코프 체인 상에서 가장 가까운 함수 중에서 화살표 함수가 아닌 함수의 this를 참조한다.
  • // increase 프로퍼티에 할당한 화살표 함수의 스코프는 전역이다.
    // 따라서 increase 프로퍼티에 할당한 화살표 함수의 this는 전역 객체를 가리킨다.
    const counter = {
         num: 1,
         increase: ( ) => ++this.num
    };
    console.log(counter.increase( )); // NaN
• 메서드를 화살표 함수로 정의하는 것은 피해야 한다.
  • 메서드를 정의할 때는 ES6 메서드 축약 표현으로 정의한 ES6 메서드를 사용하는 것이 좋다.
• super
• 화살표 함수는 함수 자체의 super 바인딩을 갖지 않는다.
  • 따라서 화살표 함수 내부에서 super를 참조하면 this와 마찬가지로 상위 스코프의 super를 참조한다.
• arguments
• 화살표 함수는 함수 자체의 arguments 바인딩을 갖지 않는다.
  • 따라서 화살표 함수 내부에서 arguments를 참조하면 this와 마찬가지로 상위 스코프의 arguments를 참조한다.
• 화살표 함수로 가변 인자 함수를 구현해야 할 때는 반드시 Rest 파라미터를 사용해야 한다.
• [26.4] Rest 파라미터
• Rest 파라미터(나머지 매개변수)는 매개변수 이름 앞에 세 개의 점 ...을 붙여서 정의한 매개변수를 의미한다.
• Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.
• function foo(...rest) {
       // 매개변수 rest는 인수들의 목록을 배열로 전달받는 Rest 파라미터다.
       console.log(rest); // [1,2,3,4,5]
  }
  foo(1,2,3,4,5);
• 일반 매개변수와 Rest 파라미터는 함께 사용할 수 있다.
  • 이때 함수에 전달된 인수들은 매개변수와 Rest 파라미터에 순차적으로 할당된다.
• Rest 파라미터는 반드시 마지막 파라미터여야 한다.
• Rest 파라미터는 단 하나만 선언할 수 있다.
• Rest 파라미터는 함수 정의 시 선언한 매개변수 개수를 나타내는 함수 객체의 length 프로퍼티에 영향을 주지 않는다.
  • function baz(x, y, ...rest) { }
    console.log(baz.length); // 2
• Rest 파라미터를 사용하여 가변 인자 함수의 인수 목록을 배열로 직접 전달받을 수 있다.
  • 이를 통해 유사 배열 객체인 arguments 객체를 배열로 변환하는 번거로움을 피할 수 있다.
    • function sum(...args) {
           // Rest 파라미터 args에는 배열 [1,2,3,4,5]가 할당된다.
           return args.reduce((pre, cur)=>pre + cur, 0);
      }
      console.log(sum(1,2,3,4,5)); // 15
• 화살표 함수는 arguments 객체가 없으므로 가변 인자 함수를 구현할때는 반드시 Rest 파라미터를 사용해야 한다.

 

 

 

• [26.5] 매개변수 기본값
• 함수를 호출할 때 매개변수의 개수만큼 인수를 전달하는 것이 바람직하지만 그렇지 않은 경우에도 에러가 발생하지 않는다.
• ES6에서 도입된 매개변수 기본값을 사용하면 함수 내에서 수행하던 인수 체크 및 초기화를 간소화할 수 있다.
• function sum (x = 0, y = 0) {
       return x + y;
  }
  console.log(sum(1, 2)); // 3
  console.log(sum(1)); // 1
• 매개변수 기본값은 매개변수에 인수를 전달하지 않은 경우와 undefined를 전달한 경우에만 유효하다.