[Javascript] ES6 함수의 추가 기능

ES6에서는 기존의 함수에 몇 가지 새로운 기능과 스타일이 추가되었다. 이를 통해 기존보다 코드를 더 간결하게 작성하고 다양한 방식으로 활용할 수 있게 되었다. 지금부터 추가된 각 항목에 대해 정리해보자.

함수의 구분

• ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다.
• ES6 이전의 모든 함수는 사용 목적에 따라 명확한 구분이 없으므로 혼란스러우며 실수를 유발할 가능성이 있고 성능에도 좋지 않다.
• 이러한 문제를 해결하기 위해 ES6에서는 함수를 사용 목적에 따라 세 가지 종류로 명확히 구분했다.

1. 일반 함수(Normal): 함수 선언문이나 함수 표현식으로 정의된 함수
2. 메서드(Method): 객체의 속성으로 정의된 함수. 객체의 동작을 정의하는데 사용하며, 주로 this 키워드를 사용해 해당 객체를 참조한다.
3. 화살표 함수(Arrow Function): function 키워드 대신 => 문법으로 작성하며, 일반 함수와this 바인딩이 다르게 동작한다.

---

메서드

• ES6 사양에서 메서드는 메서드 축약표현으로 정의된 함수만을 의미한다.
• ES6 사양에서 정의한 메서드는 인스턴스를 생성할 수 없는 non-constructor다.
• ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 갖는다.
• 객체의 메서드는 function 키워드를 생략하여 바로 key() {...} 형식으로 선언한다.

const person = {
  name: "Sean",
  sayHello() {
    console.log(`Hello, I'm ${this.name}`);
  },
};
person.sayHello(); // Hello, I'm Sean

• this 키워드는 호출한 객체(person)을 가리킨다.

---

화살표 함수

• => 문법을 사용하여 작성하는 함수로 더 간결한 구문을 제공한다.

함수 정의

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

매개변수 선언

• 매개변수가 여러 개인 경우 소괄호 ()안에 매개변수를 선언한다.

const arrow = (a, b) => { ... };

• 매개변수가 한개인 경우 소괄호 ()를 생략할 수 있다.

const arrow = a => { ... };

• 매개변수가 없는 경우 소괄호()를 생략할 수 없다.

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

함수 몸체 정의

• 함수 몸체가 하나의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 {}를 생략할 수 있다.
  ↪ 이때 함수 몸체 내부의 문이 값으로 평가될 수 있는 표현식인 문이라면 암묵적으로 반환된다.

const power = a => a ** 2;
power(2); // 4

// 위 표현과 동일
const power = a => { return x ** 2; }; 

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

const create = (id, content) => ({ id, content });
create(1, 'Javascript'); // { id: 1, content: "Javascript" }

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

1. 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor다.
2. 일반 함수와 달리 화살표 함수는 중복된 매개변수를 선언할 수 없다.
3. 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.

this 바인딩

• 화살표 함수는 자신만의 this를 가지지 않으며 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다. 이를 lexical this라 한다.
  ↪ 이는 마치 렉시컬 스코프와 같이 화살표 함수의 this가 함수가 정의된 위치에 의해 결정된다는 것을 의미한다.

class Person {
	constructor(lastName) {
    	this.lastName = lastName
    }
	
    firstName(arr) {
    	return arr.map(function(name) {
        	return this.lastName + name;
            // TypeError: Cannot read property 'lastName' of undefined
        });
    }
}

const person1 = new Person('sean');
console.log(person1.firstName([' Kim', ' Lee']));

• 일반 함수로서 호출되는 모든 함수 내부의 this는 전역 객체를 가리킨다.
• 클래스 내부의 모든 코드에는 strict mode가 적용되기 때문에 map 메서드의 콜백 함수(일반 함수)의 내부의 this에는 undefined가 바인딩된다.
  ↪ TypeError 발생

class Person {
	constructor(lastName) {
    	this.lastName = lastName
    }
	
    firstName(arr) {
    	return arr.map(name => this.lastName + name);
    }
}

const person1 = new Person('sean');
console.log(person1.firstName([' Kim', ' Lee']));
// ['sean Kim', 'sean Lee']

• 화살표 함수를 사용하여 상위 요소의 this를 참조하게 함으로서 문제 해결

---

Rest 파라미터

• Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.
  ↪ 즉, 매개변수로 전달된 여러 인자를 배열 형태로 받을 수 있게 해준다.

function add(...numbers) {
  return numbers.reduce((sum, num) => sum + num, 0);
}
console.log(add(1, 2, 3, 4)); // 10

function num(a, b, ...rest) {
  console.log(a) // 1
  console.log(b) // 2
  console.log(rest) // [3, 4, 5]
}

num(1, 2, 3, 4, 5);

• 마지막 파라미터로 ...을 붙여서 사용한다.
• Rest 파라미터는 반드시 마지막 파라미터이어야 한다.
• Rest 파라미터는 단 하나만 선언할 수 있다.