TIL : ES6 함수의 추가 기능

hihyeon_cho·2023년 3월 28일

JavaScript javascript deepdive

TIL

목록 보기

89/101

1. 함수의 구분

ES6 이전의 함수 호출방법

new 연산자로 호출
생성자 함수로서 호출
메서드로서 호출

⇒ 사용 목적에 따라 명확히 구분되지 않으므로 호출방식에 특별한 제약이 없고,

생성자 함수로 호출되지 않아도 프로토타입 객체를 생성할 수 있음

ES6 함수의 구분

: 사용 목적에 따라 세가지로 명확히 구분

일반함수 : 함수 선언문이나 함수 표현식으로 정의한 함수 ( ES6 이전의 함수와 동일 )
메서드 : 객체에 바인딩 된 함수 ⇒ 메서드 축약표현으로 정의된 함수
화살표함수 : function 키워드 대신 화살표를 사용하여 간략하게 함수를 정의할 수 있는 방법

2. 메서드

: 객체에 바인딩 된 함수 ⇒ 메서드 축약표현으로 정의된 함수

const obj = {
	x:1,
	foo(){return this.x;},  **// => 메서드**
	bar:function(){return this.x;} // **=> 일반함수**
}

new obj.foo(); // TypeError => non-constructor
new obj.bar();

obj.foo.hasOwnProperty('prototype'); // false
obj.bar.hasOwnProperty('prototype'); // true

super

: ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부슬롯 [[HomeObject]]를 가짐.

super 참조는 [[HomeObject]]를 사용하여 수퍼클래스의 메서드를 참조하기 때문에 super키워드 사용가능.

( ES6 메서드가 아닌 함수는 내부슬롯 [[HomeObject]]이 없어 super 키워드를 사용할 수 없음 )

👉🏻 본연의 기능 **super를 추가**하고 의미적으로 맞지 않는 **constructor기능은 제거**했다. 따라서 메서드를 정의할 때, 프로퍼티 값으로 익명 함수 표현식을 할당하는 방식은 사용하지 않는 것이 좋다.

3. 화살표함수

: function 키워드 대신 화살표를 사용하여 간략하게 함수를 정의할 수 있는 방법으로,

표현뿐만 아니라 내부 동작도 기존의 함수보다 간략하다. ( 일반 함수의 기능을 간략화 )

특히, 콜백함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용하다.

1. 화살표 함수 정의 문법

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

const arrow = x => {return const x = 1;};

const func = () => {...};

const create = (id, content) => ({id,content}); // 쉼표 연산자문으로 해석.

const sum = (a,b) => {
	const result = a + b;
	return result; // 반환값이 있다면 명시적으로 반환.
}

[1,2,3].map(v=>v*2); 
			// 화살표 함수도 일급객체이므로 고차함수에 인수로 전달할 수 있음.(콜백함수 정의할 때 유용 )

2. 일반함수와의 차이점

화살표함수는 인스턴스를 생성할 수 없는 non-constructor다. ⇒ prototype 생성 X
중복된 매개변수 이름을 선언할 수 없다.
함수자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.

⇒ 화살표 함수 내부에서 this, arguments, super, new.target을 참조하면 스코프 체인을 통해 상위 스코프의 this, arguments, super, new.target을 참조.

⇒ 화살표 함수가 중첩되어 있다면 가장 가까운 상위 함수 중에서 함수가 아닌 함수의 this, arguments, super, new.target을 참조
- this
  - 화살표함수의 this는 일반함수의 this와 다르게 동작
    ⇒ 콜백함수 내부의 this와 외부함수의 this가 다르기 때문에 발생하는 문제를 해결하기 위해 의도적으로 설계됨.
  - 화살표 함수는 함수 자체의 this 바인딩을 갖지 않기 때문에 화살표 함수 내부에서 this를 참조하면 상위스코프의 this를 그대로 참조한다. ( lexical this = 렉시컬 스코프와 같이 화살표함수의 this가 함수가 정의된 위치에 의해 결정 )
  - 화살표 함수가 중첩되어 있거나 프로퍼티에 할당한 함수라면 가장 가까운 상위 함수 중에서 함수가 아닌 함수의 this를 참조한다.
  - 전역함수라면 화살표 함수의 this는 전역 객체를 가리킨다.
  - .call 이나 .apply, .bind 메서드를 사용해도 화살표 함수내부의 this를 교체할 수 없고 언제나 상위스코프의 this 바인딩을 참조한다.
  - 화살표함수로 메서드를 정의 X ( ES6 메서드 사용. 화살표 함수 내부의 this는 메서드를 호출한 객체를 가리키지 않기 때문. )
  - 프로토 타입 객체의 프로퍼티에 화살표 함수를 할당 X ( 일반 함수 할당 )
    객체가 아닌 ES6 메서드를 동적 추가하고 싶다면 객체 리터럴을 바인딩하고 , 프로토타입의 constructor 프로퍼티와 생성자 함수간의 연결을 재설정한다.
  - 클래스 필드 정의 제안을 사용하여 클래스 필드에 화살표 함수를 할당할 수 있다.
    이 때, 상위 스코프는 클래스 외부이지만 this는 class를 생성할 인스턴스를 참조. constructor내부의 this 바인딩은 클래스가 생성한 인스턴스를 가리키므로, 화살표 함수 내부의 this 또한 클래스가 생성한 인스턴스를 가리키기 때문에 인스턴스 메서드가 된다.
    ⇒ ES6메서드 사용하는 것이 좋다.
- arguments
  - 매개변수의 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용, 화살표함수에서 사용 X
  - arguments 객체를 참조할 수는 있지만 자신에게 전달 된 인수 목록 확인 할 수 없고, 상위 함수에 전달된 인수목록을 참조함
  - 가변 인자 함수를 구현해야 할 때에는 반드시 Rest 파라미터를 사용해야한다.

	constructor	prototype	super	arguments 객체
일반함수	✅	✅	❌	✅
메서드	❌ ( non-constructor)	❌	✅	✅
화살표함수	❌ ( non-constructor)	❌	❌	❌

4. Rest 파라미터

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

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

매개변수 이름 앞에 …을 붙여서 정의한 매개변수. 함수에 전달된 인수들의 목록을 배열로 전달받음.
일반 매개변수와 함께 사용할 수 있으며, 이 때 전달된 인수들은 매개변수와 Rest 파라미터에 순차적으로 할당된다.
반드시 마지막 파라미터여야 하며, 단 하나만 선언할 수 있다.
.length 프로퍼티에 영향을 주지않는다.
arguments 객체는 배열이 아닌 유사 배열 객체이므로 배열 메서드를 사용하려면 .call 이나 .apply 메서드로 arguments 객체를 배열로 변환해야하는 번거로움이 있었는데 rest 파라미터를 사용하여 인수 목록을 배열로 직접 전달 받을 수 있으면서 번거로움을 피할 수 있다.
함수와 ES6 메서드는 arguments 객체와 Rest 파라미터 모두 사용가능하지만, 화살표 함수는 arguments 객체를 갖지 않기 때문에 반드시 Rest 파라미터를 사용해야한다.

5. 매개변수 기본값

자바스크립트 엔진은 매개변수의 개수와 인수의 개수를 체크하지 않는다. 그렇기 때문에 매개변수의 개수만큼 인수를 전달하지 않아도 에러가 발생한다. 이 때, 전달되지 않는 매개변수의 값은 undefined이다. 그러므로 매개변수에 기본값을 할당할 필요가 있는데, ES6에서 도입된 매개변수 기본 값을 사용하면 함수 내에서 수행하던 인수 체크 및 초기화를 간소화할 수 있다.

function sum(x,y){
	x = x || 0;
	y = y || 0;

	return x + y;
}

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

매개변수 기본 값은 매개변수에 인수를 전달하지 않은 경우와 undefined 를 전달한 경우에만 유효하며, Rest 파라미터에는 기본값을 지정할 수 없다.
이는 함수 정의 시 선언한 매개변수 개수를 나타내는 함수 객체의 .length 프로퍼티와 arguments 객체에 영향을 주지않는다.