ZeroCho Blog

 안녕하세요. 이번 시간에는 함수의 변경점에 대해서 알아볼건데요. 정확히는 변경되었다기 보다는 화살표 함수라는 것이 추가되었습니다. 기존 ES5 코드를 보시죠.

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(); // 세 번 알림

잘 작동하죠? 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가 그대로 유지됩니다. function(매개변수) {} 대신 (매개변수) => {}로 바꿨더니요. =>는 상위 스코프의 this를 그대로 유지해주는 역할을 합니다. 마치 (forEach((function() {}).bind(this))를 한 것 같이요. 즉, 앞으로는 =>를 더 자주 쓰되, 바뀐 this가 필요할 때만 function() {}을 사용하면 되겠습니다! function 글자를 볼 일이 거의 없겠네요... 주의하셔야 할 점은 =>가 function을 완벽하게 대체하는 것이 아니기 때문에 function은 var처럼 쓸모 없어진 게 아니라는 겁니다! 화살표 함수에는 new를 붙일 수 없고(생성자로 쓸 수 없고) arguments를 사용할 수도 없습니다.

또한 함수가 별다른 처리없이 바로 return을 하는 경우, 더 간단하게 쓸 수 있습니다. 아래 코드를 보시죠.

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

또 다른 변경점은 기본 값(default)이 제공되는 겁니다.

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

위의 함수에서 msg 인자를 전달하지 않았기 때문에 당연히 undefined가 됩니다. 하지만 ES2015에서는 매개변수에 기본 값을 주어 혹시나 실수로 인자를 전달하지 않았을 경우를 대비하게 할 수 있습니다.

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

인자가 전달된 msg가 undefined면 자동으로 'hello'가 됩니다. (참고로 null은 그냥 null로 처리됩니다. undefined일 경우만 기본값을 넣어줘요!)

또 다른 것으로 인자의 나머지를 처리하는 방법이 있습니다.

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

위의 경우는 함수에 인자가 몇 개 들어올 지 확신을 못하는 상태입니다. 일단 x 하나는 들어온다는 것은 알겠는데 나머지 인자들이 몇 개가 들어올 지 모르기 때문에 Array.prototype.slice.call()로 나머지 인자를 처리하는 부분입니다. 이것을 ES2015에서는 기본적으로

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

위와 같이 할 수 있습니다. rest라고 하는 건데 x를 제외한 나머지 인자들은 y 배열로 만드는 겁니다. 이건 콘솔에서 실행이 안 될 수도 있습니다. 실행이 안 된다면 babel로 변환이 필요합니다.

...y와 같은 기능이 있기 때문에 기존 함수 선언문에서 사용했던 arguments는 사용할 수 없습니다. 또한 rest라는 이름처럼 ...y는 마지막에 와야 합니다. const func4 = (x, ...y, z) => {}같은 것은 성립하지 않습니다.

마지막으로 spread입니다. 배열을 펴준다고(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.apply(null, array); // 6

위의 방법도 생각해내셨다면 칭찬드립니다!  ES2015에서는 더 직관적이게 표현할 수 있게 바뀌었습니다.

func5(...array);

위의 rest와 비슷하죠? rest는 여러 인자를 배열로 만들어주는 거라면, spread는 배열을 여러 인자로 만들어주는 겁니다. rest와 다른 점은 spread 후 다른 값을 추가로 넣을 수 있습니다. func5(...array, 4, 5, 6)처럼요.

default, rest, spread가 있으면 코딩이 더 편합니다!

다음 시간에는 템플릿 문자열에 대해서 알아보겠습니다!