ES6 함수의 추가 기능

오늘은 ES6 함수의 추가 기능에 대해 알아보려한다.

ES6 이전의 함수는 명확한 구분이 없었으나, ES6 이후 함수는 다음과 같은 구분을 가진다.

1. 일반 함수
2. 메서드 (ES6)이전에는 없었다!!
3. 화살표 함수 (ES6)이전에는 없었다!!

여기서 일반 함수의 경우, 메서드와 화살표 함수와는 달리 constructor 와 prototype 을 가진다고 한다. 이는 ES6전과 동일하다!

메서드

객체안에 선언된 함수를 우리는 메서드라고 부른다!
이때 축약표현으로 정의된 함수만 메서드, 일반적으로 정의 된 함수는 일반함수이다.

const jiyun = {
      x:1, 
  // 메서드 
  apple() {return this.x;}, 
  // 일반 함수
  banana: function() {return this.x;}
};  

ES6에서의 메서드는 다음과 같은 특징들을 가진다

메서드가 할수없는 것들

// 1. 생성자 함수로 호출 불가! (apple은 안되고 일반함수인 banana만 가능) 
new jiyun.apple(); // TypeError: jiyun.apple is not a constructor
new jiyun.banana; // banana {}

// 2. 메서드는 인스턴스를 만들 수 없다. 그래서 prototype 프로퍼티가 없다! 
jiyun.apple.hasOwnProperty('prototype') // false 

화살표 함수

화살표 함수는 콜백 함수 내부에서 this가 전역을 가르키는 문제를 해결하기 위해 만들어짐!

화살표 함수를 정의하는 여러가지 방법

// 1. 일반적인 방법 (매개변수 다 들어가는 일반적인 방법) 
const apple = (x,y) => x*y; 

// 2. 매개변수 여러개일 때 소괄호 안에 매개변수 선언 
const banana = (a,b) => { 함수 내용 }; 

// 3. 매개변수 한개일 때 소괄호 생략 
const pineapple = a => { 함수 내용 }; 

// 4. 매개변수 없는 경우엔 소괄호만 
const peach = () => { 함수 내용 블라 블라 };  

// 5. 표현식의 하나의 문으로 구성되었다면 중괄호 생략 (1번 참고) 

// 6. 객체 리터럴을 반환하는 경우엔 소괄호 씌워주기 
const candywrap = (a , b) => ({a, b}); 
candywrap(1, 'strawberry'); // {a: 1, b: 'strawberry'}

// 7. 즉시 실행 함수로 사용 가능! 
const market = (fruit => ({
  buy() {return `I'll buy ${fruit}.`;}
}))('apple'); 
console.log(market.buy()); // I'll buy apple.

화살표 함수의 this

화살표 함수가 일반 함수와 다른 점은 this와,다른 함수의 인수로 전달될 수 있다는 점이다. 화살표 함수의 this 는 조금 특별하기도 하다.

어떤 점들이 특별한지 알아보자!

먼저 화살표 함수 내부에서 this를 참조하면 상위스코프의 this를 참조한다.

class 붕어빵틀 {
  constructor(붕어빵) {
    this.붕어빵 = 붕어빵; 
  }

  add(arr) {
    return arr.map(item => this.붕어빵 + item); 
  }
}

const 팥붕어빵 = new 붕어빵틀('-webkit-'); 
console.log(팥붕어빵.add(['transition', 'user-select']));

여기서 다시 this 바인딩이란...

• 일반 함수의 this는 window,
• 객체 안의 함수의 this 는 객체,
• 내부 함수 호출 시 this는 window,
• 엄격모드의 this는 undefined,
• 생성자 함수의 this는 객체,
• 화살표함수의 this는 상위스코프인 것이다.
  "Lexical This"라고도 부른다고 한다

그렇다면 화살표 함수에 화살표 함수를 넣으면..?

(function () {
const bar = () => () => console.log(this); 
bar()();
}).call({ person:"jiyun" }); 
// {person: 'jiyun'}

화살표 함수의 this는 전역 객체를 가르키는 것을 확인했다!

화살표 함수로 하지 않아야 할 것 (지양할 것):
일반 객체의 메서드로 사용하지 않는 것

const animal = {
  name: "lion", 
  roar: () => console.log(`roar ${this.name}`)
}; 
animal.roar(); // roar 

위의 화살표 함수는 객체인 animal.name 을 가르키지 않는다.. 상위스코프인 전역 객체를 가르키게 된다! 따라서 메서드로서 화살표 함수의 사용은 바람직하지 않다.

 

Rest 파라미터 (나머지 매개변수)

rest 파라미터는 매개변수 앞 ... 점 세개를 넣어 정의한 매개변후이다. 함수에 전달된 인수의 목록을 배열로 전달해준다!

function jiyun(...rest) {
  console.log(rest);
}

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

 

rest 파라미터를 쓸 때 주의할 점:

1. 반드시 마지막 파라미터여야 함!

function jiyun(...rest, param1, param2) {
  console.log(rest);
}

jiyun(1,2,3,4,5); 
//Uncaught SyntaxError: Rest parameter must be last formal parameter 

2. rest 파라미터는 한번만 선언 가능!

   function jiyun(...rest1, ...rest2) {
   console.log(rest);
   }
   
   jiyun(1,2,3,4,5);
   //Uncaught SyntaxError: Rest parameter must be last formal parameter

 

3. 매개변수의 개수를 나타내는 length 프로퍼티가 잡아내지 못한다! 
```js 
function jiyun(a, b, ...rest) {}
  console.log(jiyun.length); // 2

매개변수 기본값

ES6이전의 함수의 매개변수에 인수를 전달하지 않으면 값은 undefined가 되었었다.
하지만 ES6이후엔 인수를 미리 전달 할 수 있게 되었다! (간소화됨!!)

function jiyun (x = 0, y = 0) {
  return x * y; 
}
console.log(jiyun(2,3)); // 6 

//원래는 다음과 같이 인수 전달 (번거롭) 
function jiyun (x, y) {
  x = x || 0; 
  y = y || 0; 
  return x * y; 
} 

여기까지 ES6에 추가된 기능들을 알아보았다!

QUIZ

const banana = {
kind: "fruit", 
from: "hawaii", 
what: ()=> console.log(`I'm from ${this.from}`)
}; 

banana.what(); 
// what would happen? 

해당 글은 모던자바스크립트 딥다이브를 참고했습니다