[JavaScript] 화살표 함수

정의

전통적인 함수 표현보다 더 간편하게 함수를 작성할 수 있는 대안이다.

 

기본 형태

let func = (arg1, arg2, ...argN) => expression

// 아래 함수 표현식의 축약 버전이다.
let func = function(arg1, arg2, ...argN) {
	return expression;
}

// 인수가 하나도 없다면, 괄호를 비워 놓는다. 이 때 괄호는 생략 불가하다.
let sayHi = () => alert("안녕하세요!")

sayHi()

 

본문이 여러 줄인 화살표 함수는 '중괄호'와 'return'을 사용해야 한다.

let sum = (a, b) => {
  let result = a + b
  retun result
}

alert(sum(1, 2))  // 3

 

+ 화살표 함수에는 this가 없다. 그래서 객체의 메서드 안에서 동일 객체의 프로퍼티를 대상으로 순회를 하는 데 this를 이용할 수 있다. 마치 아래의 예시처럼.

let group = {
  title: "1모둠",
  students: ["보라", "호진", "지민"],

  showList() {
    this.students.forEach(
      student => alert(this.title + ': ' + student)
    );
  }
};

group.showList();

 

위 코드를 실행하면 학생 이름이 차례대로 세 번 alert로 띄워진다.

 

 

https://ko.javascript.info/arrow-functions-basics

화살표 함수 기본

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

화살표 함수 - JavaScript | MDN

 

unsplash jannerboy62