arrow function

더 짧은 함수와 바인딩 되지않은 this.

자바스크립트는 함수의 인자로 함수를 넣을 수 있고, 반환값으로 함수를 사용할 수 있다. 이때 arrow 함수를 사용하면 코드가 보기가 좀더 낫다.

또한 화살표 함수에는 this가 없다. 화살표 함수를 포함하는 객체 값이 사용된다. arrow function은 자신을 포함하는 외부 scope에서 this를 계승받는다.

 

arrow function 사용법

// 기존 function 
var multiply= function(x){
    return x*2;
}

// arrow function 
const multiply = (x) => {
    return x*2;
}

// 매개변수가 1개인 경우 소괄호 생략 가능
const multiply = x => {return x*2}

// 함수가 한줄로 표현가능하면 중괄호 생략 가능하고, 자동으로 return됨
const multiply = x => x * 2

// 매개변수가 두 개 이상일 때
const sum = (x,y) => x + y

// 매개변수가 없을 때
const sum = () => { ... }
 
//return 바로할땐 소괄호 사용
const Immediately = () => ({a:1})

 

this

arrow function은 자신만의 this를 생성하지 않는다. (Lexical this)

// setInterval에 전달 된 함수 내의 this 값은 화살표 함수를 둘러싼 함수의 this와 같은 값을 갖는다.
function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the person object
  }, 1000);
}

var p = new Person();

function LexicalThis(lexical) {
  this.lexical = lexical;
}

// Es5
LexicalThis.prototype.lexicalThisWindow = function (arr) {
  console.log(this.lexical);// 'A'
  return arr.map(function (x) {
    return this.prefix + ' ' + x; // 여기서 this.prefix는 undefined. 여기서 this는 window객체다.
  });
};

// Es6 arrow function
LexicalThis.prototype.lexicalThis = function (arr) {
  return arr.map(x => `${this.lexical}  ${x}`); // arrow function에서는 내부 함수여도 this가 arrow function이 선언된 곳에서 상위의 context를 가리키므로 LexicalThis객체 lexcial를 가리키므로 this.lexcial가 A를 가리켜 개발자가 예상한대로 작동한다.
};

var lexWindow = new LexicalThis('A');
var lex = new LexicalThis('A');
console.log(lex.lexicalThis(['Kim', 'Jye']));

this 주의사항

1. 객체의 메소드를 정의할 때는 사용하면 안된다.

2. arrow function을 생성자 함수로 사용할 수 없음.
3. addEventListener 함수의 콜백 함수에서 사용하면 this가 상위 컨텍스트를 가리킴

const obj = {
  name : 'KimJye',
  sayName : () => {console.log(this.name);}
};
obj.sayName()
// 객체의 this를 바인딩하지 않고 전역 객체가 바인딩된다.

 

매개변수에 default 값 적용 가능

const f = (msg ='default args') => {
    alert(msg);
}
f(); // 'default args'

 

arguments 대신 args 사용

// ES5
var foo = function(){
    console.log(arguments);
}
foo(1,2); // { '0':1, '1':2 }

function sum(){
  var arr = Array.prototype.slice.call(arguments);
  return arr.reduce(function(pre, cur){
    return pre + cur;
  });
}
console.log(sum(1,2,3,4));
 
// ES6
var foo1 = (...args) => {
	console.log(args);
}

const sum1 = (...args) => {
  return args.reduce((pre, cur) => pre + cur);
}
console.log(sum1(1,2,3,4));

 

 

Reference 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%ED%95%A8%EC%88%98

https://jeong-pro.tistory.com/110