요약 정리는 못 참지 않을까요? (9) 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

** ES6사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미합니다.

const obj = {
	x:1 ,
    foo() {return this.x}
	// foo는 메서드입니다.
	bar : function() {return this.x}
	//bar에 바인딩된 함수는 메서드가 아닌 일반 함수입니다.
}

따라서 ES6 사양에서 메서드는 인스턴스를 생성할 수 없으므로
prototype 프로퍼티가 없고 프로토타입도 생성하지 않습니다.
ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 갖습니다.

super 참조는 내부 슬롯 [[HomeObject]]를 사용하여 수퍼클래스의 메서드를 참조하기 때문에
내부 슬롯 [[homeobject]]를 갖는 ES6메서드는 super키워드를 사용할 수 있습니다.

---

🙄화살표 함수

화살표 함수는 function 키워드 대신 화살표를 사용하여 간략하게 함수를 정의할 수 있습니다.
화살표 함수는 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안이 됩니다.

1. 화살표 함수는 함수 표현식으로 정의해야합니다.
2. 매개변수가 여러개면 소괄호 안에 매개변수를 선언해야합니다.
3. 함수 몸체가 하나의 문으로 구성된다면 중괄호를 생략할 수 있습니다.
4. 화살표 함수도 즉시 실행 함수로 사용할 수 있습니다.
5. non-constructor 입니다.
6. 중복된 매개변수 이름을 선언할 수 없습니다.
7. 함수 자체의 this, arguments , super, new.target 바인딩을 갖지 않습니다.
8. this 바인딩을 갖지 않기 때문에 상위 스코프의 this를 참조합니다.

?? Lexical this ??
렉시컬 스코프와 비슷하게 화살표 함수의 this가 함수가 정의된 위치에 의해 결정되는 것을 말합니다.

//화살표 함수는 상위 스코프의 this를 참조합니다.
() => this.x

//익명 함수에 상위 스코프의 this를 주입한다. 위 화살표 함수와 동일하게 동작합니다.
(function () {return this.x}).bind(this)

만약 화살표 함수가 중첩되어 있다면 상위 화살표 함수에도 this 바인딩이 없으므로

스코프체인 상에서 가장 가까운 상위 함수 중 화살표 함수가 아닌 함수의 this를 참조합니다.

class Base { 
    constructor(name) {
        this.name = name
    }

    sayHi() {
        return `hi ${this.name}`
    }

}

class Derived extends Base {
    //화살표 함수의 super는 상위 스코프인 constructor의 super를 가리킨다.
    sayHi = () => ` ${super.sayHi()} how are you doing`
}

const derived = new Derived('lee')
console.log(derived.sayHi()) //hi lee how are you doing

화살표 함수는 함수 자체의 super 바인딩을 갖지 않습니다.

따라서 화살표 함수 내부에서 super를 참조하면 this와 마찬가지로 상위 스코프의 super를 참조합니다.

super 는 내부 슬롯 [[homeObject]]가 있는 ES6 메서드 내에서만 사용 가능한 키워드이지만

sayHi 클래스 필드에 할당한 화살표 함수는 ES6 메서드는 아니지만 super 바인딩을 갖지 않으므로

super를 참조해도 에러가 발생하지 않고 constructor의 super 바인딩을 참조합니다.

---

🙄Rest 파라미터가 뭔가요?

Rest 파라미터는 매개변수 이름 앞에 세개의 점 ...을 붙여서 정의한 매개변수를 의미합니다.
Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받습니다.
일반변수와 Rest 파라미터를 함께 쓰는 것도 가능합니다.
이때 rest 파라미터는 항상 마지막 파라미터여야하며 단 하나만 선언할 수 있습니다.

function foo(...rest) {
    //매개변수 rest는 인수들의 목록을 배열로 전달받는 Rest 파라미터입니다.
    console.log(rest)
}

foo(1,2,3,4,5) // [ 1, 2, 3, 4, 5 ]

---

🙄인수가 전달되지 않은 매개변수

인수가 전달되지 않은 매개변수의 값은 undefined입니다.
즉 매개변수에 인수가 전달되었는지 확인하여 인수가 전달되지 않은 경우
매개 변수에 기본값을 할당할 필요가 있습니다.

ES6에서 도입된 매개변수 기본값을 사용하면 초기화를 간소화 할 수 있습니다

function sum(x,y = 0) {
// ES6에 도입된 초기화

    x = x || 0
    //기존에 쓰던 방어코드
}

---