🚦본론

본 파트에서는, 함수가 왜ES6에서 다른 방식으로도 사용할 수 있게 되었는지를 서술하고 있습니다.

함수의 구분

생각해보면, 자바스크립트의 함수는 다목적성을 갖고 있습니다.

• 일반적인 함수
• 생성자 함수
• 메서드

등으로 사용할 수 있는데요.
실제로는 이러한 것들이 하나하나 내부에서는 parse할 때 고려할 게 많아지다 보니, 성능상으로도 그렇게 좋다고 보기 힘들었습니다.

💡 따라서, ES6에서는 메서드와, 화살표 함수라는 새로운 아이들이 추가되었던 것이죠.

메서드

ES6부터 메서드에 대한 정의를 명확하게 규정하였습니다.
ES6부터는 메서드를 메서드 축약 표현으로 정의된 함수만을 메서드로 의미하기 시작했습니다.

그리고 우리는 이 메서드에 관해 이야기를 이미 했죠.
바로, non-constructor하다는 것입니다. 따라서 ES6 메서드를 통해 우리는 더욱 안정적인 프로그래밍이 가능해지게 된 것입니다.

const test = {
	score: 100,
  	getScore1() {
    	console.log(this.score)
    },
  	getScore2: function () {
    	console.log(this.score)
    }
}

const a = new test.getScore1(); // Uncaught TypeError: test.getScore1 is not a constructor
const b = new test.getScore2(); // undefined;

또한, [[HomeObject]]를 통해, super 키워드를 사용할 수 있게 됩니다.
해당 내부슬롯은, 자신을 바인딩하고 있는 객체를 기억하고 있기 때문에, 이를 통해 super로 호출할 수 있는 것입니다.

화살표 함수

화살표 함수의 핵심은 this다. 화살표 함수는 this를 가지고 있지 않다.
오직 상위 렉시컬 스코프의 this를 가져올 뿐이죠. 이를 lexical this라고도 합니다.

this가 없다는 것은 꽤나 많은 효과들을 가져오게 되었습니다.
예컨대, 생성자 함수를 만들 수 없다는 것입니다. 따라서 화살표 함수는 new 연산자를 사용할 수 없는 non-constructor 함수입니다.
또한 super, arguments 등 역시 갖고 있지 않으며, this처럼 상위 스코프를 참조하게 됩니다.

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

그리고 이건 이번에 알게 되었는데요, 화살표 함수는 중복된 파라미터명을 사용한다면 에러를 발생시킵니다.

const a = (b,b) = {}; // Uncaught SyntaxError: Duplicate parameter name not allowed in this context

또한, 클래스에서 필드로 사용한다면 이는 인스턴스 프로퍼티로 만들기 때문에, 메서드 축약표현을 쓰는 것이 바람직합니다.

// Bad

class A {
	b = () => {}
}

// Good

class A {
	b() {}
}

Rest 파라미터

화살표 변수는 전술했듯, arguments를 갖지 않습니다. 그저 상위 스코프의 arguments를 참조할 뿐이죠.

대신, Rest 파라미터가 이러한 가변 인자 함수를 구현하기 위한 도움을 제공합니다.

rest 파라미터에 해당하는 가변 인자들은 배열의 형태로 전달됩니다.

const go = (target, ...functions) => {
  return functions.reduce((acc, func) => func(acc), target)
}

console.log(go(
  	1, 
	(val) => { return val + 2 }, 
    (val) => { return val + 3 })
) // 6

매개변수 기본값

매개변수의 기본값은 undefined입니다.
이때, 적절한 변수 기본값 할당을 미리 하지 않으면 에러의 원인이 되기도 하는데요.
ES6에서는 이를 위해 매개변수에 기본값을 미리 할당해줄 수 있습니다.

const add = (a = 0, b = 0) => a + b;
add(5) // 5

다만 주의할 것은, Rest 파라미터에는 기본값을 지정할 수 없습니다.
또한, arguments 객체에 영향을 미치지도 않습니다.

🎉 마치며

생각보다 사실 이미 체화된 것들이 많아서, 큰 내용은 없는 듯한? 느낌을 받았어요.
다만, 이 파트가 있는 것 자체가 그만큼 ES6 전후로 엄청난 문법적 변화가 있었다는 것을 시사하는 듯 합니다.

그럼, 다들 즐거운 공부하시길 바라요. 이상!