1. 함수의 구분

var foo = function () {
	return 1;
}
//일반 함수 
foo();
//생성자 함수
new foo();

var obj = {
  foo : foo
};

obj.foo();
//1

ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다.
즉, callable + constructor이다.
호출할수 있는 함수 객체이자 인스턴스를 생성할 수 있는 함수 객체

[1,2,3].map(function(item){
  return item*2;
});

콜백함수도 constructor이고 프로토타입 형성

사용 목적에 따른 구분이 없어서 호출 방식에 제약도 없고, 생성자 함수로 호출되지 않아도 프로토타입 객체를 형성하기에 성능이 떨어짐

📍 ES6에서는 세가지로 나눔

1. 일반함수
   constructor prototype arguments
2. 메서드
   super arguments
3. 화살표 함수

2. 메서드

축약 표현으로 정의된 함수
인스턴스를 생성할 수 없는 non-construtor
prototype도 없음
단, 자신을 바인딩한 객체를 가리키는 [[HomeObject]] 가짐

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

3. 화살표 함수

콜백 함수 내부에서 this가 전역객체를 가리키는 문제를 해결하기 위한 대안!

함수 몸체가 표현식이 아닌 문이라면 중괄호를 생략할 수 없다.

const arrow = () => {const x = 1;};

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

const create = (id, content) => ({id, content});

여러개의 문으로 구성되어도 중괄호 생략 불가
반환 값이 명시되어 있어야함

const sum = (a,b) =>{
  const result = a+ b;
  return result;

📍 특징

• 화살표함수는 인스턴스를 생성할 수 없는 non-constructor
  • 생성자 함수로서 호출될 수 없다.
  • 프로토타입 생성 못함
• 중복된 매개변수 이름 선언 불가
• 함수자체의 this , arguments, super ,new.target 바인딩을 갖지 않음

📍 this

함수 자체의 바인딩이 없음

• 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조
  lexical this

class Prefixer{
  constructor(prefix){
    this.prefix = prefix;
  }
  
  add(arr){
    return arr.map(item => this.prefix + item);
  }
}
const prefixer = new Prefixer('seohee');
console.log(prefixer.add(['000112','sejong']));
//[seohee000112, seoheesejong]

메서드를 화살표 함수로 정의하는 것은 피해야 한다

const person = {
 name :'Hong',
 sayHi: () => console.log(`Hi ${this.name}`)
 //Hi
 //sayHi() { console.log(`Hi ${this.name}`));
}
const person = new Person();
person.sayHi()

📍 Super

this와 마찬가지로 상위 스코프의 super를 참조

class Base{
 constructor(name){
   this.name = name;
 }
 sayHi(){
   return `Hi ${this.name}`;
 }
}
class Derived extends Base{
sayHi = () => `${super.sayHi()} how are you`;
}

const derived = new Derived('Hong');
console.log(derived.sayHi());
//Hong how are you

📍 arguments

상위 스코프의 arguments 참조

4. Rest 파라미터

... 정의한 매개변수
함수에 전달된 인수들의 목록을 배열로 전달받음

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

• 순차적으로 할당
• 단 하나만선언할수 있음
• 함수 정의시 선언한 매개변수 개수를 나타내는 함수 객체의 length 프로퍼티에 영향을 주지 않음

5. 매개변수 기본값

함수를 호출할 때 매개변수의 개수만큼 전달되지 않으면
매개변수의 값은 undefined 이다.

function sum(x=0, y=0){
return x+y;
}
console.log(sum(1,2));	//3
console.log(sum(1));	//1

• Rest 파라미터에는 기본값을 지정할 수 없음