[HUFS/GnuVil] #14 ES6 함수의 추가 기능

ES6 함수의 추가 기능

ES6 이후 사용 목적에 따른 함수의 구분

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

ES6 이후 메서드는 객체 내에서 축약 표현으로 정의된 함수만을 의미한다

 

const multiply = (x, y) => x * y;
multiply(2, 3); // -> 6

화살표 함수는 선언문이 아닌 표현식으로 정의해야 하며 호출 방식은 동일하다

* prototype 프로퍼티가 없어 인스턴스/프로토타입 생성 불가

 

class Prefixer {
  constructor(prefix) {
    this.prefix = prefix;
  }

  add(arr) {
    return arr.map(item => this.prefix + item);
  }
}

const prefixer = new Prefixer('-webkit-');
console.log(prefixer.add(['transition', 'user-select']));
// ['-webkit-transition', '-webkit-user-select']

화살표 함수는 다른 함수의 인수로 전달되어 콜백 함수로 사용되는 경우가 많으며 콜백 함수 내부의 this는 화살표 함수일 때 상위 스코프의 this를 그대로 참조한다 (lexical this)

 

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

// sayHi 프로퍼티에 할당된 화살표 함수 내부의 this는 상위 스코프인 전역의 this가 가리키는
// 전역 객체를 가리키므로 이 예제를 브라우저에서 실행하면 this.name은 빈 문자열을 갖는
// window.name과 같다. 전역 객체 window에는 빌트인 프로퍼티 name이 존재한다.
person.sayHi(); // Hi

// Good
const person = {
  name: 'Lee',
  sayHi() {
    console.log(`Hi ${this.name}`);
  }
};

person.sayHi(); // Hi Lee

메서드에서 화살표함수를 사용하는 것은 this가 전역 객체를 가리키기 때문에 바람직하지 않다

 

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

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

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

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

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

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

매개변수 rest는 인수들의 목록을 배열로 전달받는 Rest 파라미터이며 마지막에 위치해야 한다

 

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

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

인수가 넘어오지 않을 경우를 대비해 매개변수 기본값을 줄 수 있다

const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

기본값 설정에 Null 병합 연산자(Nullish coalescing operator) ??를 사용해줄 수도 있다

 

본 내용은 위키북스의 '모던 자바스크립트 Deep Dive'를 바탕으로 작성되었습니다.