화살표함수(Arrow Function)

안병욱·2022년 6월 5일
0

화살표 함수

화살표 함수 사용 방법

const add = (a,b) => {
	return a+b;
}

const sum = add(1,2);

console.log(sum);

// 3

const hello = (name) => {
  console.log(`hello ${name} 반가워!`);
}

hello('병욱');

화살표 함수 return값만 사용 할 때 간결하게 사용하는 방법

const add = (a,b) => a+b;

const sum = add(12,13);

console.log(sum);
//25

화살표 함수(arrow function)

화살표 함수는 단순히 함수를 짫게 쓰기 위한 용도로 사용지 않는다.

화살표 함수는 몇 가지 독특하고 유용한 기능을 제공을 한다.

자바스크립트를 사용하다 보면 저 멀리 동떨어진 곳에서 실행될 작은 함수를 작성해야 하는 상황이 자주 발생하게 된다.

예시:

  • **arr.forEach(func)** - func 는 forEach 가 호출될 떄 배열 arr의 요소 전체를 대상으로 실행이 된다.
  • **setTimeout(func)** - func는 내장 스케줄러에 의해 실행된다.

이처럼 자바스크립트에선 함수를 생성하고 그 함수를 어딘가에 전달하는 것이 아주 자연스럽습니다.

그런데 어딘가에 함수를 전달하게 되면 함수의 컨텍스트를 잃을 수 있습니다. 이럴 때 화살표 함수를 사용하면 현태 컨텍스트를 잃지 않아 편리 하게 됩니다.

화살표 함수에는 this 가 없다!!

화살표 함수에는 일반 함수와는 다르게 this가 없다. 화살표 함수에서 this를 참조하면, 화살표 함수가 아닌 ‘평범한’ 외부 함수에서 this 값을 가져온다. 아례 에시에서 함수 arrow()의 this는 외부 함수 user.sayHi()의 this가 된다.

let user = {
  firstName: "보라",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi(); // 보라

별개의 this가 만들어지는 건 원하지 않고, 외부 컨텍스트에 있는 this를 이용하고 싶은 경우 화살표 함수가 유용하다.

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

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

group.showList();

위의 코드를 실행을 하게되면 에러가 발생하게 된다. 그 이유는

showList() 메서드를 실행 하였을때 this의 가리키는 방향이

group이 아닌 함수를 생성한 자기 자신이 되기 때문입니다.

하지만 화살표 함수를 사용하게 되면 group을 가리키게 됩니다.

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

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

group.showList();

화살표 함수는 new 와 함께 실행할 수 없다!

this가 없기 떄문에 화살표 함수는 생성자 함수로 사용할 수 없다는 제약이 있다.

화살표 함수엔 ‘arguments’가 없다. → 이해x 추후공부예정

화살표 함수는 일반 함수와는 다르게 모든 인수에 접근할 수 있게 해주는 유사 배열 객체 arguments 를 지원하지 않는다.

이런 특징은 현재 this 값과 arguments 정보를 함께 실어 호출을 포워딩해 주는 데코레이터를 만들 때 유용하게 사용이 된다.

아래 예시에서 데코레이터 defer(f,ms)는 함수를 인자로 받고 이 함수를 래퍼로 감싸반환하는데, 함수 f는 ms 밀리초 후에 호출이 된다.

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

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

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

화살표 함수를 사용하지 않고 동일한 기능을 하는 데코레이터 함수를 만들면 다음과 같다.

function defer(f, ms) {
  return function(...args) {
    let ctx = this;
    setTimeout(function() {
      return f.apply(ctx, args);
    }, ms);
  };
}

일반 함수에선 setTimeout에 넘겨주는 콜백 함수에서 사용할 변수 ctx와 args를 반드시 만들어 줘야 한다.

0개의 댓글