[자바스크립트 필기] #16 - ES6 함수의 추가 기능

 

*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. 

 

1. 함수의 구분 

ES6 이전에는 동일한 함수라도 다양한 형태로 호출할 수 있었다. 

var foo = function () {
    return 1;
};

// 일반적인 함수
foo(); // -> 1

// 생성자 함수
new foo(); // -> foo {}

// 메서드 
var obj = { foo: foo};
obj.foo(); // -> 1

이 처럼 ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있느 것은 물론 생성자 함수로서 호출할 수 있다. 

그래서 혼란스럽고 실수를 유발할 가능성이 있고 성능에도 좋지않다. 

그래서 ES6에서는 함수를 사용 목적에 따라 세 가지 종류로 명확히 구분했다. 

ES6 함수의 구분	constructor	prototype	super	arguments
일반 함수	O	O	X	O
메서드	X	X	O	O
화살표 함수	X	X	X	X

 

2. 메서드 

ES6 기준으로 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다. 

이 축약형으로 정의한 메서드는 인스턴스를 생성할 수 없는 non-constructor다. 

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

console.log(obj.foo()); // 1
console.log(obj.bar()); // 1

 

3. 화살표 함수 

function 키워드 대신 화살표( => )를 사용해서 간략하게 함수를 정의하는 방식이다. 

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

 

함수 정의

무조건 함수 표현식으로 정의해야한다. 

 

매개변수 선언 

• 여러개인 경우 소괄호 () 안에 매개변수를 선언한다. 
• 한개라면 생략할 수 있다. 
• 없는 경우에는 생략할 수 없다. 

함수 몸체 정의

함수 몸체가 하나의 문으로 구성된다면 중괄호 {} 를 생략할 수 있다. 

 

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

• 화살표 함수는 non-constructor다.
• 중복된 매개변수 이름을 선언할 수 없다. 
• 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다. - 따라서 상위 스코프에서 참조를 한다. 

4. Rest 파라미터 

기본문법 

매개변수 이름 앞에 세개의 점 ... 을 붙인다. 이 Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다. 

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

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

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

 

5. 매개변수 기본값

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

console.log(sum(1, 2)); // 3
console.log(sum(1)); // 1

이러한 기본값은 인수를 전달하지 않은 경우와 undefined를 전달한 경우에만 쓸 수 있다. 

 

여기까지 입니다 - 틀린 점이 있다면 꼭 지적해주세요!