javaScript. ES2015 - Function(함수)

ES6(2015) - 함수(Function)

- 화살표 함수(Arrow Function) 추가됨.

 

 

- 기존 ES5 코드

var object = {
  name: 'Zero',
  friends: ['One', 'Two', 'Three'],
  alertFriends: function() {
    var self = this;                            // 객체의 this를 변수로 저장해둠. 왜? 🔻
    this.friends.forEach(function(friend) {     // forEach 안에선 this가 바뀌므로.
      alert(self.name + ' and ' + friend);
    });
  }
};
object.alertFriends(); // 세 번 알림

 

- this.friends는 해당 객체 내의 friends 변수(=배열)이다.

- 즉, Array.forEach(함수) 구조를 만족. 대신, friend라는 매개변수 설정.

- 함수명은 없고, forEach 내에선 객체의 this를 활용 못하므로 미리 저장해둔 self 변수를 사용하면

- 객체(this).name = self.name이 된다.

 

// 결과 : Zero and One , Zero and Two ,  Zero and Three

 

 

 

- ES6 변경된 코드 (화살표함수)

const object2 = {
  name: 'Zero',
  friends: ['One', 'Two', 'Three'],
  alertFriends() {                      // 메소드 - function 생략 가능
    this.friends.forEach((friend) => {   // forEach(함수)에서 function 생략함.  (매개변수)=> 내용
      alert(this.name + ' and ' + friend);   // 여기서는 객체의 this를 그대로 유지
    });
  }
};
object2.alertFriends();

화살표함수를 이용한다.

- 즉, forEach( function(매개변수) {} ) 대신

       forEach( (매개변수) => {} ) 로 바꾼다.

 

❗❗ 화살표함수에서 => 는 this를 그대로 유지해주는 역할을 한다.

 

>> 마치 forEach( (function() {}).bind(this)와 같은 역할.

 

 

// 결과 : Zero and One , Zero and Two ,  Zero and Three

 

 

 

 

** bind() 란 무엇인지? / 함수 바인딩이란 무엇인지에 대해 다음 포스팅에서 다루겠다.

javaScript. 함수 바인딩과 bind() 메서드

📌 bind() method

- this값을 바꿔주는 메서드. 모든 함수에 내장되어 있음.

- SYNTAX

func.bind(thisArg[, arg1[, arg2[, ...]]])

- thisArg     :   바인딩 함수가 대상 함수(target function)의 this에 전달하는 값.

>> thisArg로 전달된 원시 값은 객체로 변환된다.

 

 

 

___

 

따라서, function(매개변수) {} 는

바뀐 this가 필요할 때에만 사용한다.

 

그렇다고 var처럼 아예 사용하지 않는 것은 아님.

>> 왜?

 

화살표 함수에는 new를 붙여서 생성자로 쓸 수 없고.

argument를 사용할 수도 없기 때문!

 

 

 

 

---

 

 

- 기본 값(default)가 제공됨.

 

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

원래의 function을 이용하면,

msg라는 매개변수에 인자(argument)를 전달하지 않았기 때문에 undefined가 된다.

 

 

그러나, 화살표 함수에서는 매개변수에 기본값을 주어서

실수로 인자를 전달하지 않았을 경우를 대비한다.

 

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

❗❗ 주의 > undefined인 경우에만 기본값이 처리된다. null인 경우는 X.

 

 

---

 

- 인자의 나머지를 처리 가능

 

var func3 = function(x) {
  var args = Array.prototype.slice.call(arguments, 1);     // 인자 개수를 세기 위해 배열로 저장함
  console.log(args.length);        
};
func3(1, 2, 3, 4); // 3      // 즉, 1개는 확실히 들어오고 나머지 인자는 몇개인지

** call()은 상위 context(this)를 바꾸는 메서드임.

argument는 함수의 매개변수에 접근할 수 있는 속성(property).

 

 

위 함수에서는 함수에 인자가 몇 개 들어올지 모르는 상태이다.

일단 x 하나가 들어오는 것은 확실 - 나머지 인자는 몇개가 들어올지 모름.

 

따라서, Array.prototype.slice.call()로 나머지 인자를 처리하는 것임.

>> 이 코드가 존재하는 함수의 매개변수로 넘어온 값을 array로 변환하겠다는 뜻.

예)  function func(a, b){} 에서 a와 b를 arguments[0]과 arguments[1]로 접근가능.

단, 여기서 argument는 array가 아닌 object임! >> 따라서 array로 변환할 필요가 있는 경우 사용.

 

 

 

- ES2015에서는 rest(...) 를 이용하여 처리할 수 있다.

slice.call() 대신에 ...을 이용해서 ' 나머지 ' 처리가 가능!

 

const func4 = (x, ...y) => {      // x를 제외한 나머지 인자들을 y 배열로 만듬
  console.log(y.length);
};
func4(1, 2, 3, 4) // 3

단, 콘솔에서 실행이 안될 수 있다.

 

 

** 주의

... y는 맨 마지막에 와야 함.

 

 

 

 

 

+)https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/arguments

arguments 객체 - JavaScript | MDN

argument 객체 = 함수에 전달된 인수에 해당하는 Array 형태의 객체

(즉, 배열같이 생겼지만 객체임!)

 

 

___

 

 

** slice() 메서드

 

arr.slice([begin[, end]])

- 배열의 begin부터 end까지(시작 이상 - 끝 미만) 에 대한 얕은 복사본을 새로운 배열로 반환함.

- 원본 배열은 바뀌지 않음.

 

예>

 const foods = ['cake', 'pasta', 'pizza', 'chicken', 'stew'];
 
 
 foods.slice(2);  // Array ['pizza', 'chicken', 'stew']
 foods.slice(2, 4);  // Array ['pizza', 'chicken']

 

 

___

 

 

 

++) call()과 apply()의 차이

call()	상위 context를 변경해줌.	매개변수를 넘겨주는 2번째 인자가 인수 목록
apply()		매개변수를 넘겨주는 2번째 인자가 인수 배열

 

 

 

---

 

- 배열을 sperad 할 수 있음

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


func5(array[0], array[1], array[2]); // 6   // 1) 일일히 넣어주는 방법

func5.apply(null, array);     // 6         // 2) argument 배열에 해당하는 array를 apply()로 넣어줌

func5(...array);           // 6           // 3) 배열을 여러 인자로 만들어줌 (spread)

 

rest와 같이 ...을 사용하긴 하지만

spread는 그 후에 추가로 값을 넣을 수 있다.

 

예> func5( ...array, 4, 5, 6) 

 

 

 

 

 

---

REFERENCE

https://www.zerocho.com/category/ECMAScript/post/5759abc132522e883c6f6dda

(ECMAScript) ES2015(ES6) Function(함수)

이 포스팅은 zerocho님의 javascript 강의를 보고 작성한 글입니다.

공부+기록 용으로 작성한 것이며, 자세한 것은 위 포스팅을 참고하세요!