*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다.
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를 전달한 경우에만 쓸 수 있다.
여기까지 입니다 - 틀린 점이 있다면 꼭 지적해주세요!
