[JS] 화살표 함수(Arrow Functions)

 

 

 

 

 

화살표 함수는 ES6에서 도입된 함수 정의 방식이며, 기존 방식보다 짧은 코드로 함수를 선언할 수 있다.

 

// 기존 함수 선언(ES5)
function (인자) {
	함수 로직
}

// 화살표 함수 선언(ES6)
(인자) => {
	함수 로직
}

 

 

 

 

1. 화살표 함수의 선언

// 1) 매개변수가 없는 경우
const area = () => { return 100; };

// 2) 매개변수가 한 개인 경우 () 괄호를 생략할 수 있다.
const area = width => { return width; };
const area = (width) => { return width; };

// 3) 매개변수가 두 개 이상인 경우 () 괄호를 생략할 수 없다.
const area = (width, height) => { return width * height ;};

// 4) 함수 몸체가 한 줄의 구문이라면 {}를 생략할 수 있고 암묵적으로 return이 적용된다.
const area = (width, height) => { return width * height; }; 
const area = (width, height) => width * height;

// 5) 함수 몸체가 여러 줄의 구문이라면 {}, return을 생략할 수 없다.
const area = (width, height) => {
  const result = width * height;
  return result;
};

// 6) 객체를 반환할 때는 소괄호를 사용한다.
const area = () => { return { width: 100, heigth: 200 }; };
const area = () => ( { width: 100, height: 200 } );

 

 

 

 

2.화살표 함수의 특징

2-1 익명 함수로만 생성 가능

// ES5
var area = function (width, height) { return width * height; };

// ES6
const area = (width, height) => width * height;

// 만약 콜백 함수로 사용할 경우 이전보다 간결하게 표현할 수 있다.
var arr = [1, 2, 3];

// ES5
var pow = arr.map(function(x) { return x * x });

// ES6
const pow = arr.map(x => x * x);

 

2-2 Lexical this

자신만의 this를 생성하지 않고 자신을 포함하고 있는 상위 context로부터 this를 상속 받는다

function Greeting(greet) {
  this.greet = greet;
}

Greeting.prototype.name = function (arr) {
  return arr.map(x => {
    console.log(this);
    return `${this.greet} ${x}`
  });
};

const greet = new Greeting('Hi');
const arr = ['Lee', 'Kim'];
console.log(greet.name(arr));

 

2-3 화살표 함수의 스코프에는 arguments가 없음

const myFun = () => {
  console.log(arguments);
}

myFun(1, 2, 3, 4) // Uncaught ReferenceError : arguments is not defined

//rest parameter을 이용하면 arguments가 아닌 진짜 배열을 이용할 수도 있다.

const myFun = (...args) => {
  console.log(args)
}

myFunc(1, 2, 3, 4) // [1, 2, 3, 4] (유사배열이 아닌 진짜 배열)

 

 

 

 

3. Vue에서의 화살표 함수

//ES5
new Vue({
  data: {
    size: 'large',
    items: [ { size: 'small' }, { size: 'large' } ]
  },
  computed: {
    filterBySize() {
      let size = this.size;
      return this.items.filter(function(item) {
        return item.size === size;
        // 참고 : 여기서 this.size를 접근하면 undefined
      });
    }
  }
});


//화살표 함수 사용시
filterBySize() {
  return this.items.filter((item) => {
    return item.size === this.size;
  });
}

 

 

※ 뷰 인스턴스의 속성을 정의할 때는 화살표 함수를 사용할 수 없다

// 일반적인 자바스크립트 함수(ES5)
var regular = new Vue({
  data: {
    val: 'Hello world'
  },
  computed: {
    upperCase: function() {
      return this.val.toUpperCase();
    }
  }
});
console.log(regular.upperCase); // HELLO WORLD

// 화살표 함수 (ES6)
var arrow = new Vue({
  data: {
    val: 'Hello world'
  },
  computed: {
    upperCase: () => {
      return this.val.toUpperCase();
    }
  }
});
console.log(arrow.upperCase);
// Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

 

 

 

 

 

 

 

#참고사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

https://cbw1030.tistory.com/34?category=1142019 

https://joshua1988.github.io/web-development/translation/essential-es6-features-for-vuejs/