화살표 함수(arrow function)

Ye Seo Lee·2022년 7월 21일

함수형 프로그래밍 JS es6+

목록 보기

3/5

1. 기본 표현법

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

let func = function(arg1, arg2 ...argN){
	return expression;
}


// 예를 들면...

let sum = (a, b) => a + b // 라는 표현은 아래 함수의 축약 버전임
let sum = function(a, b){
	return a + b
}

// 화살표 함수에서 괄호()는 받아오는 인수를 의미한다.
// 인수가 1개 일때 : 생략 해도됨
let double = n=> n*2 

// 인수가 없을 때 : 생략 안됨
let sayHi = () => alert('HELLO!!!');
let f1 = () => () => 1

2. 여러줄 표현법

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

3. 동적 생성

(3항 연산 가능함)

let age = prompt('Tell me your age', 18);
let welcome = (age < 18) ?
	() => alert('안녕') :
    () => alert('안녕하세요');

4. 특징

1) 화살표 함수는 this 자체가 없다.

화살표 함수 본분에서 this에 접근하면, 외부에서 값을 가져온다.
아론 툭장운 갹채우ㅏ 매소두언애소 동일 객체의 프로퍼티를 대상으로 순회를 하는데 사용이 가능하다.

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

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

일반 함수를 사용했을 때 에러 발생

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

  showList() {
    this.students.forEach(function(student) {
      // TypeError: Cannot read property 'title' of undefined
      alert(this.title + ': ' + student)
    });
  }
};

화살표 함수는 new와 함께 실행할 수 없다.
this가 없기 때문에 화살표 함수는 생성자 함수로 사용할 수 없다는 제약으로인해 new함수와 함께 호출할 수 없다.

2) 화살표 함수엔 'arguments'가 없다.

화살표 함수는 일반 함수와는 다르게 모든 인수에 접근할 수 있게 해주는 유사 배열 객체 arguments를 지원하지 않는다.
이런 특징은 현재 this 값과 arguments 정보를 함께 실어 호출을 포워딩해 주는 데코레이터를 만들 때 유용하게 사용된다.

function defer(f, ms) {
  return function() {
    setTimeout(() => f.apply(this, arguments), ms)
  };
}

function sayHi(who) {
  alert('안녕, ' + who);
}

let sayHiDeferred = defer(sayHi, 2000);
sayHiDeferred("철수"); // 2초 후 "안녕, 철수"가 출력됩니다.

화살표 함수를 사용하지 않고 동일한 함수를 만들면..

// 일반 함수에선 setTimeout에 넘겨주는 콜백 함수에서 사용할 변수 ctx와 args를 반드시 만들어야 한다.
function defer(f, ms) {
  return function(...args) {
    let ctx = this;
    setTimeout(function() {
      return f.apply(ctx, args);
    }, ms);
  };
}