이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌4 - ECMAScript - 2년 전 등록 / 7달 전 수정

ES2015(ES6) Function(함수)

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

 안녕하세요. 이번 시간에는 함수의 변경점에 대해서 알아볼건데요. 새로운 기호부터 알아보죠.

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() {}).bind(this)를 한 것 같이요. 즉, 앞으로는 =>를 더 자주 쓰되, 바뀐 this가 필요할 때만 function() {}을 사용하면 되겠습니다! function 글자를 볼 일이 거의 없겠네요... 주의하셔야 할 점은 =>가 function을 완벽하게 대체하는 것이 아니기때문에 function은 var처럼 없어진 게 아니라는 겁니다!

또한 함수가 별다른 처리없이 바로 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'

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

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는 사용할 수 없습니다.

마지막으로 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는 배열을 여러 인자로 만들어주는 겁니다. default, rest, spread가 있으면 코딩이 더 편합니다!

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

목록
투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

3개의 댓글이 있습니다.
한 달 전
안녕하세요 무턱대고 node.js 공부하겠다고 교과서 샀다가 자바스크립트 모르면 안되는거 이제야 알고 자바스크립트 부터 공부하고 있습니다 ㅜㅜ 내용중에
alertFriends: function() {
var self = this;
this.friends.forEach(function(friend) {
alert(self.name + ' and ' + friend);
});
}
여기가 잘 이해가 되지 않아서요.
forEach안의 this는 서로 다른 함수스코프를 가지고 있어서 self로 돌려서 쓴다고 하셨는데
그럼 forEach안의 this는 무엇을 가르키는 건가요?
한 달 전
alertFriends의 this는 객체 자신을 가리키고, forEach의 this는 friend를 가리킵니다. 그래서 forEach안에서 객체 자신을 가리키려면 self를 써야합니다. 이건 제 자바스크립트 강좌 중 this는 무엇인가나 실행 컨텍스트 쪽을 보시면 더 좋습니다.
8달 전
const func4 = (x, ...y) {
console.log(y.length);
};
func4(1, 2, 3, 4)
이 예문에서
= (x, ...y) => {
화살표 빠져있는거 오타 맞나요?
8달 전
감사합니다 ㅠㅠ
2년 전
아까 문제는 제가 실수했었군요.. 그런데 기본값 부분에서 alert(msg)하는 부분이요
es6에서 어디가 기본값이 제공된다는거죠?
msg에 hello를 넣었기때문에 나오는게 맞는거지 않나요?
2년 전
msg = 'hello' 이 부분이 ES6에서 새로 생긴 기본값이죠. 이 문법이 ES5에서는 안 됩니다.
2년 전
아아 감사합니다