26장 ES6 함수의 추가 기능

inhalin·2021년 4월 11일

자바스크립트 스터디

목록 보기

7/9

26.1 함수의 구분

ES6 이전의 자바스크립트 함수는 callable이면서 constructor이다. (즉, 모든 함수는 함수로서 호출할 수 있고 생성자 함수로서 호출할 수 있다.)
ES6에서는 함수를 사용 목적에 따라 세 가지 종류로 구분한다.
일반함수는 constructor이지만 메서드와 화살표 함수는 non-constructor이다.

구분	constructor	prototype	super	arguments
일반 함수	o	o	x	o
메서드	x	x	o	o
화살표 함수	x	x	x	x

26.2 메서드

메서드는 메서드 축약 표현으로 정의된 함수만을 말한다.
메서드는 인스턴스를 생성할 수 없는 non-constructor이다.
그렇기 때문에 prototype 프로퍼티가 없고 프로토타입도 생성하지 않는다.
메서드는 자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 갖기 때문에 수퍼클래스의 메서드를 참조하므로 super 키워드를 사용할 수 있다.

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

// 메서드는 인스턴스 생성 불가한 non-constructor
new obj.foo()	// TypeError: obj.foo is not a constructor
// prototype 프로퍼티 없음, 프로토타입 생성 불기
obj.foo.hasOwnProperty('prototype');	// false

const base = {
  name: 'Kim',
  sayHi() {
    return `Hi, ${this.name}!`;
  }
};

const derived = {
  __proto__: base,
  sayHi() {
    return `${super.sayHi()} How are you doing?`;
  }
};

console.log(derived.sayHi());	// Hi, Kim! How are you doing?

26.3 화살표 함수

26.3.1 화살표 함수 정의

화살표 함수는 기존 방식보다 간략하게 함수를 정의할 수 있다. 또한 내부 동작도 기존와 함수보다 간략하다.
화살표 함수는 함수 표현식으로 정의한다.
매개변수가 여러개인 경우 소괄호 안에 매개변수를 선언한다. (한개인 경우 생략 가능, 없는 경우 생략 불가)
함수 몸체가 하나의 문이면 중괄호 생략 가능. 생략한 경우 내부 문이 표현식이 아니면 반환할 수 없기 때문에 에러 발생
객체 리터럴을 반환하는 경우 소괄호로 감싸주어야 한다.
화살표 함수도 즉시 실행 함수로 사용할 수 있다.

//매개변수 한개인 경우 소괄호 생략 가능
const arrow = x => {};
// 매개변수 없는 경우 소괄호 필수
const noParam = () => {};
// 매개변수 여러개면 소괄호, 함수 몸체 하나면 중괄호 생략 가능
const multiply = (x, y) => x * y;
// 반환값 없는 문은 중괄호 필수
const noReturn = () => { const x = 1; };
// 객체 리터럴 반환은 소괄호 필수
const create = (id, content) => ({ id, content });

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

// 생성자 함수로 호출 불가
const foo = () => {};
new foo();	// TypeError: foo is not a constructor
// prototype 프로퍼티 없고 프로토 타입 생성 안함
foo.hasOwnProperty('prototype');	// false
// 중복된 매개변수 이름 선언 불가
const sum = (a, a) => a + a;	// SyntaxError: Duplicate parameter name not allowed in this context

함수 자체의 this.arguments, super, new.target 바인딩을 갖지 않는다.

26.3.3 this

26.3.4 super

26.3.5 arguments

26.4 Rest 파라미터

Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.
일반 매개변수와 Rest 파라미터는 같이 사용할 수 있고 Rest 파라미터가 마지막에 와야한다.
Rest 파라미터는 단 하나만 선언할 수 있다.
함수 객체의 length 프로퍼티에 영향을 주지 않는다.
Rest 파라미터를 사용해 가변 인자 함수의 인수 목록을 배열로 직접 전달받기 때문에 arguments 객체를 배열로 변환하지 않아도 된다.

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

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

function foo(...rest) {};
function bar(param1, ...rest) {};
function baz(param1, para2, ...rest) {};

console.log(foo.length);	// 0
console.log(bar.length);	// 1
console.log(baz.length);	// 2

function sum(...args) {
  return args.reduce((pre, cur) => pre + cur, 0);
}

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

26.5 매개변수 기본값

매개변수 기본값을 사용해서 인수 체크와 초기화를 간소화할 수 있다.
단, 매개변수에 인수를 전달하지 않은 경우와 undefined를 전달한 경우에만 유효하다.
Rest 파라미터에는 기본값을 지정할 수 없다.
매개변수 기본값은 함수 정의 시에 선언한 매개변수의 개수를 나타내는 함수 객체의 length 프로퍼티와 arguments 객체에는 영향을 주지 않는다.

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

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

function logName(name = 'Kim') {
  console.log(name);
}

logName();	// Kim
logName(undefined);	// Kim
logName(null);	// null

function sum(x, y = 0) {
  console.log(arguments);
}

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