26 ES6 함수의 추가기능

26.1 함수의 구분

es6 이전의 모든 함수는 일반함수로서 호출할수 있는 것은 물론 생성자 함수로서 호출할수있다.

26.2 메서드

메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다.

es6에서 정의한 메서드는 인스턴스를 생성할수 없는 non-constructor 이다 .

ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부슬롯 HomeObject를 가진다

ES6 메서드가 아닌 함수는 내부슬롯 HomeObject를 갖지않기때문에 super 키워드를 사용할수 없다.

26.3 화살표 함수

26.3.1 화살표 함수 정의

함수정의

함수 선언문으로 정의할수 없고 함수 표현식으로 정의해야한다.

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

매개변수선언

여러개인 경우 소괄호

한개인 경우 소괄호 생략

매개변수가 없는경우 생략 불가능

const arrow = (x,y) => x+y 
const arrow = x =>{}
const arrow = () => {}

함수 몸체정의

함수 몸체가 하나의 문으로 구성된다면 생략 가능

cosnt power = x=> x**2

객체 리털럴을 반환하는 경우 소괄호로 감싸주어야한다.

객체 리터럴을 소괄호() 로 감싸지 않으면 객체 리터럴을 중괄호{}를 함수 몸체를 감싸는 중괄호{} 잘못 인식한다.

const create = (id,content) => ({id,content}) 

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

1. 화살표 함수는 인스턴스를 생성할수 없는 non-constructor 이다

const foo = () => {};
new foo(); //TypeError: foo is not a constructor

const Foo = () => {};
console.log(Foo.hasOwnProperty("prototype")); //false

1. 중복된 매개변수 이름을 선언할수 없다.

const arrow = (a,a) => a+a

1. 화살표 함수는 함수 자체의 this,arguments, super,new.target 바인딩을 갖지 않는다. 화살표 내부에서 참조하면 스코프 체인을 통해 상위 스코프의 this,arguments, super,new.target 참조한다.

26.3.3 this

화살표 함수는 다른 함수의 인수로 전달되어 콜백 함수로 사용되는 경우가 많다.

this 바인딩은 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다.

class PreFixer {
  constructor(prefix) {
    this.prefix = prefix;
  }

  add(arr) {
    console.log(this); //PreFixer { prefix: '-webkit-' }

    return arr.map(function (item) {
        return this.prefix + item; //Cannot read properties of undefined (reading 'prefix')
    });
  }
}
const prefixer = new PreFixer(`-webkit-`);
console.log(prefixer.add(["transition", `user-select`]));

일반함수로서 호출된 모든 함수 내부의 this는 전역 객체가 아니라 undefined가 바인딩된다 . 이때 발생하는 문제가 바로 콜백함수의 this 문제이다 . 즉 콜백함수의 this 와 외부함수의 this가 서로 다른값을 가리키고 있기때문에 typeError가 발생

화살표 함수를 사용하여 콜백함수의 this 문제 해결

class PreFixer {
  constructor(prefix) {
    this.prefix = prefix;
  }

  add(arr) {
    console.log(this); //PreFixer { prefix: '-webkit-' }

    return arr.map((item) => this.prefix + item);
  }
}
const prefixer = new PreFixer(`-webkit-`);
console.log(prefixer.add(["transition", `user-select`]));

화살표 함수는 함수 자체의 this 바인딩을 갖지 않는다. 따라서 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다. 이를 lexical this 라 한다

화살표 함수를 제외한 모든 함수에는 this바인딩이 반드시 존재한다. 화살표 함수 자체는 this 바인딩이 존재하지 않기때문에 화살표 함수 내부에서 this를 참조하면 일반적인 식별자처럼 스코프 체인을 통해 상위 스코프에서 this를 탐색한다.

스코프 체인 상에서 화살표 함수가 아닌 함수의 this를 참조한다.

메서드를 화살표 함수로 정의할경우 this가 가리키는것은 메서드를 호출한 객체가 아니고 상위 스코프인 전역의 this를 가리키게 된다.

26.3.4 super

화살표 함수는 함수 자체의 super 바인딩을 갖지 않는다 . 화살표 함수 내부에서 super를 참조하면 this와 마찬가지로 상위 스코프의 super를 참조한다.

26.3.5 arguments

화살표 함수는 함수 자체의 arguments 바인딩을 갖지않는다. 화살표 함수내부에서 참조할경우

상위 스코프의 arguments를 참조한다.

26.4 Rest 파라미터

26.4.1 기본문법

Rest 파라미터는 매개변수 이름 앞에 세개의 점 … 을 붙여서 정의한 매개변수를 의미한다.

Rest 파라마터는 함수에 전달된 인수들의 목록을 배열로 전달받는다 .

function foo(param, ...rest) {
  console.log(param);
  console.log(rest);
}
foo(1, 2, 3, 4, 5);

이름 rest 그대로 먼전 선언된 매개변수에 할당된 인수를 제외후 나머지 인수로 배열 구성 rest 파라미터는 반드시 마지막 이어야한다.

Rest 파라미터는 단 하나만 선언할수 있다. length 프로퍼티에 영향을 주지 않는다.

26.4.2 Rest 파라미터와 arguments 객체

argument 객체는 배열이 아닌 유사 배열 객체이므로 배열 메서드를 사용하려면 Function.prototype.call 이나 Function .prototype.apply 메서드를 사용해 arguments 객체를 배열로 변환해야 하는 번거로움이 있었다 .

rest 파라미터를 사용할경우 가변인자 함수의 인수목록을 배열로 직접 전달받을수 있다.

화살표 함수는 함수 자체의 arguments 객체를 갖지 않는다. 화살표 함수로 가변인자를 구현할때는

반드시 Rest 파라미터를 사용해야한다.

26.5 매개변수 기본값

매개변수 기본값을 사용하면 함수 내에서 수행하던 인수 체크및 초기화를 간소화 할수 있다.

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

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

Rest 파라미터에는 기본값을 지정할수 없다