ES6 함수의 추가 기능

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

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

 

메서드

ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다

const obj={
  x:1,
  //메서드인 foo와 일반함수인 bar
  foo(){return this.x},
  bar: function(){return this.x}
}
console.log(obj.foo());
console.log(obj.bar());

생성자 함수로서 호출
new obj.foo() -> TypeError
new obj.bar() -> bar {}

생성자 함수로서 호출시 에러가 발생하는 이유는 메서드는 non-constructor이여서 인스턴스 생성이 불가능하고

그에 따라서 prototype 프로퍼티가 없고 생성하지도 않는다

앞장에 [[HomeObject]]라는 개념을 잠깐 다룬적이 있다.

ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부 슬롯[[HomeObject]]를 갖는다

반대로 ES6 메서드가 아닌 함수는 내부슬롯 [[HomeObject]]가 없고 super키워드 사용이 불가능하다

화살표 함수

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

객체 리터럴을 반환하는경우 소괄호()로 꼭 감싸 줘야한다

const arrow=(a,b)=>({a,b})
arrow(1,2)

()로 감싸지 않으면 {a,b}를 함수 몸체 내의 쉼표 연산자문으로 해석한다

*쉼표 연산자
피 연산자를 왼쪽에서 오른쪽으로 평가하고, 마지막 연산자 값을 반환한다
let x = 1;

x = (x++, x);

console.log(x);
// expected output: 2

x = (2, 3);

console.log(x);
// expected output: 3

this

function으로 콜백

class AddItem{
  constructor(item){
    this.item=item
  }
  add(arr){
    return arr.map(function(i){
      return this.item+i;
      // TypeError : Cannot read property 'item' of undefined
    })
  }
}

const plus=new AddItem('-hi-')
console.log(plus.add(['bye','hello']));

여기서 오류가 발생하는 원인은 this에 있다 -> map 내부에서 this.item이 undefined여서 문제 발생

map메서드가 콜백 함수를 일반 함수로서 호출하기 때문이다

 

화살표함수로 콜백

class AddItem{
  constructor(item){
    this.item=item
  }
  add(arr){
    return arr.map((i)=>{
      return this.item+i;
    })
  }
}

const plus=new AddItem('-hi-')
console.log(plus.add(['bye','hello']));

[ '-hi-bye', '-hi-hello' ]

 

화살표 함수는 함수 자체의 this 바인딩을 갖지 않고 상위 스코프의 this를 그대로 참조한다. 이를 lexical this라고한다

 

화살표 함수로 메서드를 정의

const person={
  name:'hi',
  say: ()=>{console.log(`Say ${this.name}`);}
}
person.say() // Say undefined

super,arguments도 위에서 언급한 것 처럼 상위 스코프를 그대로 참조한다

 

REST 파라미터

• ...변수 형태로 사용한다
• REST 뜻처럼 반드시 마지막 파라미터여야한다

function sum(){
  console.log(arguments); //[Arguments] { '0': 1, '1': 2 }
}

sum(1,2)

사용법

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

sum(1,2,3,4,5)

 

*매개변수의 기본값은 undefined다.

 

모듈

ES6모듈을 ESM이라고 한다

ESM 파일의 확장자는 mjs를 사용할 것을 권장한다

<script type="module" src="app.mjs"></script>