ECMAScript (ES6) 화살표 함수

ES6 때 자바스크립트에 화살표 함수가 추가되었습니다!

 

 

기존 함수 코드

var object = {
  name: 'Zero',
  friends: ['One', 'Two', 'Three'],
  alertFriends: function() {
    var self = this;
    this.friends.forEach(function(friend) {
      alert(self.name + ' and ' + friend);
    });
  }
};
object.alertFriends(); // 세 번 알림

function(매개변수){} 

forEach문 안에서 this가 바뀌기 때문에 미리 self에 object의 this를 저장해서 활용했습니다. 

 

 

 

화살표 함수 코드 

const object2 = {
  name: 'Zero',
  friends: ['One', 'Two', 'Three'],
  alertFriends() {     
    this.friends.forEach((friend) => {
      alert(this.name + ' and ' + friend);
    });
  }
};
object2.alertFriends();

매개변수 => {}

=> this를 그대로 유지해주는 역할을 합니다 

 

※주의해야할점※

화살표 함수는 생성자로 쓸수 없고 arguments로 쓸 수 없습니다. 

 

 

 

  

---

• 함수가 별다른 처리 없이 바로 return 하는 경우

var long = function(x) {
 return x + 1
};


const short = (x) => x + 1;

화살표 함수를 사용하면 더욱 간결하게 코드 구현 가능합니다!

 

 

• 기본 값 제공 (default) 

var func = function(msg) {
  alert(msg);
};
func(); // undefined

const func2 = (msg = 'hello') => {
  alert(msg);
};
func2(); // 'hello'

기본 함수에서는 매개변수에 인자 값을 전달하지 않아서 함수가 undefined로 호출되는데, 

화살표 함수에서는 매개변수에 직접 인자 값을 주어 인자를 전달하지 않았을 경우를 대비할 수 있습니다.

 

• 인자의 나머지를 처리 하는 방법  (rest) 

var func3 = function(x) {
  var args = Array.prototype.slice.call(arguments, 1);
  console.log(args.length);
};
func3(1, 2, 3, 4); // 3

const func4 = (x, ...y) => {
  console.log(y.length);
};
func4(1, 2, 3, 4) // 3

두 함수 모두 인자가 몇개 들어오는지 모르는 상태

 

기존함수 

fun3을 보면 함수에 매개변수가 x는 들어오는데 몇개가 들어올 지 모르는 상태입니다. 

나머지 인자들을 받기 위해 Array.prototype.slice.call() 을 통해 인자를 처리합니다. 

 

화살표함수 

rest로 처리 가능합니다!

rest랑 x를 제외한 나머지 인자들을 y배열로 만드는 건데, 

...y와 같이 사용하여 기존 함수의 arguments같은 역할을 해줍니다. 

그리고 ...y는 마지막에 와야합니다. 

 

예를 들어 const fun4 = (x, ...y, z) => {} 와 같은 함수는 실행되지 않습니다. 

 

 

• 배열을 펴주는 방법 (spread) 

var array = [1, 2, 3];
var func5 = function(x, y, z) {
  alert(x + y + z);
};
func5(array[0], array[1], array[2]); // 6

func5(...array); //6

 

기존함수 

함수 매개변수에 배열 인자를 일일이 넣어줘야합니다.

번거로워서 조금 불편하겠죠??

 

화살표함수 

func5(...array)와 같이 사용하면 배열의 인자들을 펼쳐주어 1,2,3이 각각 x,y,z에 들어가게 됩니다. 

rest와 비슷하지만 다른 점은 func5(...array, 4,5,6)과 같이 spread 후 다른 값을 추가로 넣을 수 있습니다!