26 ES6 함수의 추가 기능
26.1 함수의 구분
- ES6 이전의 함수는 사용 목적에 따라 명확히 구분되지 않음
-> 사용 목적에 따라 명확한 구분이 없으므로 호출 방식에 특별한 제약이 없고 생성자 함수로 호출되지 않아도 프로토타입 객쳬를 생성
=> 혼란스러우며 실수를 유발할 가능성이 있고 성능에도 좋지 않음
=> ES6에서는 함수를 사용 목적에 따라 세 가지 종류로 명확히 구분함
26.2 메서드
메서드: 메서드 축약 표현으로 정의된 함수 (ES6 메서드)
=> - 인스턴스를 생성할 수 없는 non-constructor
- 생성자 함수로서 호출할 수 없음
- prototype 프로퍼티가 없고 프로토타입도 생성하지 않음
=> - 자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]을 가짐
- super 키워드 사용할 수 있음
- ES6 메서드는 본연의 기능
super을 추가하고 의미적으로 맞지 않는 기능constructor은 제거함
-> 프로퍼티 값으로 익명 함수 표현식을 할당하는 ES6 이전의 방식 지양
3. 화살표 함수
화살표 함수: function 키워드 대신화살표(=>)를 사용하여 기존의 함수 정의 방식보다 간략하게 함수를 사용
-> 내부 동작도 기존의 함수보다 간략함 (콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용)
26.3.1 화살표 함수 정의
함수 정의
화살표 함수는 함수 선언문으로 정의할 수 없고 함수 표현식으로 정의해야 함
const multiply = (x, y) => x * y;
multiply(2, 3); // 6매개변수 선언
- 매개변수가 여러 개인 경우 소괄호 안에 매개변수를 선언
- 매개변수가 한 개인 경우 소괄호를 생략
- 매개변수가 없는 경우 소괄호를 생략할 수 없음
함수 몸체 정의
-
함수 몸체가 하나의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 {}를 생략할 수 있음
-> 함수 몸체 내부의 문이 값으로 평가될 수 있는 표현식인 문이라면 암묵적으로 반환됨 (표현식이 아닌 문이라면 에러 발생 - 반환 불가) -
객체 리터럴을 반환하는 경우 객체 리터럴을 소괄호로 감싸주어야함 (감싸지 않으면 객쳬 리터럴의 중괄호 {}를 함수 몸쳬를 감싸는 중괄호 {}로 잘못 해석함)
-
함수 몸체가 여러 개의 문으로 구성된다면 중괄호를 생략할 수 없음 (반환값이 있다면 명시적으로 반환)
-
화살표 함수도 즉시 실행 함수로 사용 가능
-
화살표 함수는 일급 객체이므로 고차 함수(Array.prototype.map / filter / reduce) 인수로 전달 가능
26.3.2 화살표 함수와 일반 함수의 차이
-
화살표 함수는 인스턴스를 생성할 수 없는 non-constructor다.
-> prototype 프로퍼티가 없고 프로토타입도 생성하지 않음 -
중복된 매개변수 이름을 선언할 수 없다.
-> 일반 함수는 중복된 매개변수 이름을 선언해도 에러가 발생하지 않음(strict mode 제외) -
화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.
-> 화살표 함수 내부에서 참조하면 스코프 체인을 통해 상위 스코프 것을 참조
26.3.3 this
-
화살표 함수의 this는 일반 함수의 this와 다르게 동작함
-> 콜백 함수 내부의 this가 외부 함수의 this와 다르기 때문에 발생하는 문제(콜백 함수 내부의 this 문제)를 해결하기 위해 의도적으로 설계된 것 -
this 바인딩은 함수의 호출 방식에 따라 동적으로 결정됨
-> 위에 언급한 콜백 함수 내부의 this 문제 발생
=> 화살표 함수의lexical this로 해결 -
lexical this: 화살표 함수는 함수 자체의 this 바인딩을 갖지 않음. 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조함
-> 화살표 함수의 this가 함수가 정의된 위치에 의해 결정된다는 것을 의미 -
화살표 함수는 함수 자체의 this 바인딩을 갖지 않기 때문에 this를 교체할 수 없고 언제나 상위 스코프의 this 바인딩을 참조함
-
화살표 함수로 메서드를 정의하는 것은 바람직하지 않음
-> ES6 메서드를 사용
26.3.4 super
- 화살표 함수는 함수 자체의 super 바인딩을 갖지 않음
-> 화살표 함수 내부에서 super을 참조하면 this와 마찬가지로 상위 스코프의 super를 참조함
26.3.5 arguments
-
화살표 함수는 함수 자체의 arguments 바인딩을 갖지 않음
-> 화살표 함수 내부에서 arguments를 참조하면 this와 마찬가지로 상위 스코프의 arguments를 참조함 -
화살표 함수로 가변 인자 함수를 구현해야할 때는 반드시 Rest 파라미터를 사용
26.4 Rest 파라미터
26.4.1 기본 문법
-
Rest 파라미터: 매개변수 이름 앞에 점 3개 ...를 붙여서 정의한 매개변수
-> Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받음 -
일반 매개변수와 Rest 파라미터는 함께 사용할 수 있음 (전달된 인수들은 매개변수와 Rest 파라미터에 순차적으로 할당됨)
-
Rest 파라미터는 이름처럼 먼저 선언된 매개변수에 할당된 인수를 제외한 나머지 인수들로 구성된 배열이 할당됨
-> 반드시 마지막 파라미터이어야 함 & 단 하나만 선언 가능 -
Rest 파라미터는 함수 정의 시 선언한 매개변수 개수를 나타내는 함수 객체의 length 프로퍼티에 영향을 주지 않음 (얘 빼고 셈)
26.4.3 Rest 파라미터와 arguments 객체
-
arguments 객체: 함수 호출 시 전달된 인수들의 정보를 담고 있는 순회 가능한 유사 배열 객쳬, 함수 내부에서 지역 변수처럼 사용 가능
-> 배열 유사 객체이지 배열은 아님 -
Rest 파라미터를 사용하여 가변 인자 함수의 인수 목록을 배열로 직접 전달받을 수 있음
-> 유사 배열 객체인 arguments 객체를 배열로 변환하는 번거로움을 피할 수 있음 -
함수와 ES6 메서드는 Rest 파라미터와 arguments 객쳬를 모두 사용 가능 / 화살표 함수는 함수 자쳬의 arguments 객쳬를 갖지 않으니 Rest 파라미터 사용
26.5 매개변수 기본값
-
자바스크립트 엔진이 매개변수의 개수와 인수의 개수를 쳬크하지 않음 (에러 발생하지 않음, 전달되지 않은 매개변수의 값은 undefined)
-> 의도치 않은 결과 발생 가능 -
인수가 전달되지 않은 경우 매개변수에 기본값을 할당할 필요 있음 (= 방어코드)
-> ES6에서 도입된매개변수 기본값을 사용 (매개변수를 인수에 전달하지 않은 경우와 undefined를 전달한 경우에만 유효함) -
Rest 파마리터에는 기본값을 지정할 수 없음
-
매개변수 기본값은 함수 정의 시 선언한 매개변수의 개수를 나타내는 함수 객체의 length 프로퍼티와 arguments 객체에 아무런 영향을 주지 않음
