이번 포스팅에서는 ES5에서 ES6로 넘어오면서 변경된 내용 중, 함수에 관련된 내용을 정리해보려고 한다.

크게 달라진 점은 없고 몇 가지 기능이 추가된 것뿐이니, 어떤 것이 달라졌는지 천천히 알아보자!😆

메서드 선언 단축

ES6 에서는 객체의 프로퍼티인 함수, 즉 메서드의 선언을 다음과 같이 단축할 수 있다.

const obj = {
    name : 'I\'m Object!',
    func() {console.log(this.name)},
    add(a, b) {console.log(a + b)}
};

obj.func();
obj.add(10, 5);

기존 방식과 다르게 function 키워드 없이 함수명과 몸체만으로도 메서드의 생성이 가능하다!

물론 익명 함수의 생성은 불가능하니 참고하도록 하자.

매개 변수의 기본 값

ES5에서 매개 변수에 값을 할당하지 않았다면 기본으로 undefined를 자동으로 할당했지만, ES6는 함수의 매개 변수에 기본값을 설정해줄 수 있다.

const multiply = function(a, b, c) {
    return a * b * c;
};

console.log(multiply(1, 2, 3)); // 6
console.log(multiply(1, 2)); // NaN

위의 코드처럼 매개 변수에 값을 할당해주지 않았다면 자동으로 undefined가 할당되서 Number 타입과 Undefined의 곱셈 연산으로 인해 NaN가 반환된 것을 볼 수 있다.

let multiply = function(a = 1, b = 1, c = 1) {
    return a * b * c;
};

console.log(multiply(3, 5, 10)); // 150
console.log(multiply(4)); // 4

하지만, ES6에선 위와 같이 매개 변수에 기본값 지정이 가능해서 의도치 않은 동작을 막을 수 있다!

화살표 함수(Arrow Function)

화살표 함수는 화살표 표현식을 이용해 함수의 선언 과정을 간소화시킨 함수이다.

역시 말로만 들으면 무슨 소리인지 이해가 잘 가지 않는다...😓 코드를 보며 이해해보자!

const add = function(a, b){
    return a + b;
};

const add = (a, b) => {return a + b};

const print = function(input){
    console.log(input);
};

const print = (input) => {console.log(input)};

두 개씩 선언한 add 함수와 print 함수는 모두 동일한 동작을 하는 함수다.

위의 코드처럼 (매개 변수) => {함수 몸체}의 형식으로 만들어진 함수를 화살표 함수 라고 한다.

그리고 화살표 표현식은 매개 변수가 하나면 괄호의 생략이 가능하고, 함수 몸체가 표현식 하나뿐이라면 아래처럼 중괄호와 return까지 생략이 가능하다!😲

const add = (a, b) => a + b;

const print = input => console.log(input);

print(add(10, 5)); // 15

그런데 굳이 함수 선언의 간소화 때문에 화살표 함수를 사용하느냐고 하면 그건 또 아니다.

위에서 보았듯이 화살표 함수는 모두 익명 함수로 생성되서 콜백 함수로 이용하기 좋고, 화살표 함수 호출 시 this 바인딩은 일반 함수와는 다르기 때문이다.

그렇다면 화살표 함수의 this 바인딩이 일반 함수와 어떻게 다른지 한 번 알아보자!

화살표 함수의 this 바인딩

사실상 일반 함수와 화살표 함수의 가장 큰 차이점이라고 할 수 있다. 일반 함수의 this 바인딩은 this 그리고 apply, call, bind에 자세히 정리돼있으니 넘어가도록 하겠다!

코드를 통해 화살표 함수의 this 바인딩이 어떻게 다른지 보도록 하자!😉

const obj = {
    name : 'JaeungE',
    outer() {
        const inner = () => {console.log(this.name)};
        inner();
    }
}

obj.outer(); // "JaeungE"

obj 객체의 메서드 outer() 의 내부 함수 inner() 에서 this.name을 console에 출력하도록 했더니, obj 객체의 name이 출력되었다!😱

만약 화살표 함수가 아닌 일반 함수를 이용해서 내부 함수를 만들었다면, this는 전역 객체의 name 을 참조하려고 했을 것이다.

이처럼 화살표 함수의 this는 정적으로 상위 스코프의 this를 따라간다는 것을 명심하도록 하자!

주의점

화살표 함수는 장점만 있는 것은 아니다!... 일반 함수와는 달리 생성자로 사용이 불가능하고, arguments 객체 또한 사용할 수 없다.

이 외에도 메서드 호출 시 this 바인딩 혹은 addEventListener() 함수의 콜백 함수로 사용할 경우, 상위 스코프의 this를 참조하는 화살표 함수의 특성상 전역 객체에 바인딩 되는 경우가 많으므로 무분별하게 사용해서는 안 된다는 점을 명심하자.