ES6의 함수

기존 블로그에 작성한 내용을 velog로 이전한 글입니다

1. ES6의 함수 구분

구분	constructor	prototype	super	arguments
일반 함수	O	O	X	O
메소드(단축표현)	X	X	O	O
화살표 함수	X	X	X	X

2. 메소드

• ES6에선 단축표현으로 작성된 함수만 메소드로 인정한다.

• 메소드는 [[HomeObject]]를 가지고 있어 super사용이 가능하다.

3. 화살표 함수

3.1. 작성법

// ()는 매개변수가 들어갈 자리, 한 줄일 경우 return 생략 가능
const arrow1 = () => console.log("화살표 함수");

// 매개변수가 있을 시 () 생략 가능
const arrow2 = (x) => x * x;

// 매개변수가 두 개 이상일 경우 () 생략 불가
const arrow3 = (x, y) => x * y;

// 코드가 두 줄 이상인 경우 {} 생략 불가
const arrow4 = (x, y) => {
  console.log(x);
  console.log(y);
};

3.2. 장점

• non-constructor라 prototype을 만들지 않는다.

• 매개변수 이름을 중복선언 할 수 없다.

• 화살표 함수의 this, arguments, super, new.target는 상위 스코프(화살표 함수가 아닌)를 참조 하기 때문에 중첩함수로 사용할 시 편하다.

3.3. 화살표 함수의 this

• 화살표 함수의 this, arguments, super, new.target는 상위 스코프(화살표 함수가 아닌)를 참조 한다.

  // 즉시 실행 함수의 this는 전역 객체를 가리킨다.
  // call을 사용하여 호출가 동시에 새 객체를 this에 바인딩한다.
  // 화살표함수는 자체적 this 바인딩이 없어 상위 스코프의 this를 찾는다
  // 따라서 새 객체가 화살표 함수의 this가 된다.
  (function () {
    const foo = () => console.log(this);
    foo();
  }.call({ a: 1 })); // { a: 1 }

• 화살표 함수의 this는 call, apply, bind로 변경 불가하다.

  window.name = "Yu";
  
  const arrow = () => console.log(this.name);
  
  arrow.call({ name: "Kim" }); // Yu

  따라서 this를 사용하는 메소드나 프로토타입 메소드를 화살표 함수로 정의하면 위험하다.

3.4. 화살표 함수의 super, arguments

super를 바인딩 하지 않고 상위 스코프의 super를 가져온다.

class Base {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    return `Hi! ${this.name}`;
  }
}

class Derived extends Base {
  // super 키워드는 ES6 메소드 내에서만 사용 가능하다.
  // 화살표 함수는 함수 자체의 super 바인딩이 없다.
  // 화살표 함수 sayHi의 상위 컨텍스트는 constructor이다.
  // 화살표 함수 sayHi의 super는 constructor의 super를 가리킨다.
  // 클래스 필드 정의 제안으로 클래스 필드에 화살표 함수를 할당한다.
  sayHi = () => `${super.sayHi()} how are you doing?`;
}

// Derived의 constructor는 Derived.prototype에 존재한다.
// 따라서 constructor의 super는 Base.prototype이 된다.
console.log(Object.getOwnPropertyNames(Derived.prototype)); // [ 'constructor' ]

4. Rest 파라미터

• ...arg처럼 앞에 ...을 함께 쓴다.

• 매개변수로 사용시 함수.length에 영향을 주지 않는다.

• Rest 파라미터는 단 한 개만 사용해야 한다.

function sum(...args) {
  // Rest 파라미터 args에는 배열 [1, 2, 3, 4, 5]이 할당된다.
  return args.reduce((pre, cur) => pre + cur);
}
console.log(sum(1, 2, 3, 4, 5)); // 15

5. 매개변수 기본 값

function logName(name = "Lee") {
  console.log(name);
}

logName(); // Lee
logName(undefined); // Lee
logName(null); // null

• 매개변수에 값이 전달되지 않거나 undefined일 경우 들어갈 기본 값을 설정할 수 있다.

• Rest 파라미터는 기본 값을 설정할 수 없다.

참고자료: poiemaweb.com