[JavaScript] 화살표 함수 기본

화살표 함수 기본

함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이다.

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

이렇게 코드를 작성하면 인자 들을 받는 함수 func이 만들어지고

함수 func는 화살표 => 우측의 표현식을 평가하고 평가 결과를 반환

 

이 아래의 축약버젼이라고 할 수 있다. 예전엔 정말 이해 안됐는데

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

 

• 인수가 하나밖에 없다면 괄호 생략이 가능하고 없다면 괄호만 남겨놔야한다.

let double = n => n * 2;
// let double = function(n) { return n * 2 }과 거의 동일합니다.

alert( double(3) ); // 6

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ인자가 없다면
let sayHi = () => alert("안녕하세요!");

sayHi();

 

이 화살표 함수는 좀 더 동적으로 만들 수 있는데

let age = prompt("나이를 알려주세요.", 18);

let welcome = (age < 18) ?
  () => alert('안녕') :
  () => alert("안녕하세요!");

welcome();

이런 화살표 함수는 처음 접하면 가독성이 떨어지고 이해가 안되는데 내가 그랬다

익숙하지 않기 때문이니 당장 이해 안되면 추후에 다시 돌아봐도 좋겠다

 

본문이 여러 줄인 화살표 함수

이럴 때는 중괄호 안에 코드를 넣어줘야하고 꼭 return이 있어야 결괏값을 반환한다

let sum = (a, b) => {  // 중괄호는 본문 여러 줄로 구성되어 있음을 알려줍니다.
  let result = a + b;
  return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 합니다.
};

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

 

 

화살표 함수 좀 더 알아보기

단순히 짧게 쓰기 위한 용도로만 사용되지 않고 몇가지 독특하고 유용한 기능을 제공한다

동떨어진 곳에서 실행된 작은 함수를 작성해야 하는 상황을 자주 만나게 됨

예시:

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

이처럼 JS에서는 함수를 생성하고 그 함수를 어딘가에 전달하는 것이 아주 자연스러움

근데 어딘가에 함수를 전달하게 되면 함수의 컨텍스트(맥락)를 잃을(?) 수 있습니다

이럴 때 화살표 함수를 사용하면 현재 컨텍스트를 잃지 않아 편리.

 

화살표 함수에는 'this'가 없습니다.

화살표 함수 본문에서 this에 접근하면 외부에서 값을 가져옵니다.

이런 특징은 객체의 메서드 안에서 동일 객체의 프로퍼티를 대상으로 순회를 하는데 사용할 수 있따!

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

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

group.showList();

예시의 forEach에서 화살표 함수를 사용했기에 본문에 있는 this.title은 화살표 함수 바깥에 있는

메서드인 showList가 가리키는 대상과 동일해진다. 즉 this.title 은 group.title과 같습니다.

 

위 예시에서 일반 함수를 이용했다면 에러 떳을꺼임

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

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

group.showList();

에러는 forEach에 전달되는 함수의 this가  undefined로 잡히기 때문인데

즉 alert이 undefined.title에 접근하려해서 에러가 뜬 것

 

화살표 함수엔 'arguments'가 없습니다

일반 함수와는 다르게 모든 인수에 접근할 수 있게 해주는 유사 배열 객체  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초 후 "안녕, 철수"가 출력됩니다.