TIL

0l0l·2021년 4월 5일

목록 보기

6/86

함수 표현식과 함께 함수 형태로 자주 볼 수 있는 화살표 함수에 대해 알아보자.
한 줄로 간단히 작성 가능해 가독성을 높이고 효율적이나 지시어나 기호들이 생략되어 '괄호 안에 인자'와 '화살표 우측의 코드' 등이 무엇을 뜻하는지 의미를 알자! 문법을 눈에 익히기!

화살표 함수(arrow function)

함수 표현식보다 단순하고 간결한 문법으로 함수 생성

함수 본문이 한 줄인 간단한 함수는 화살표 함수를 사용해서 만드는게 편리(코드를 덜 작성하여 함수 생성 가능하다는 장점)

컨텍스트가 있는 긴 코드보다는 '자체' 컨텍스트가 없는 짧은 코드를 담을 용도로 만들어짐

//example
// 아래 함수의 축약 버전
const func = (arg) => expression

// 함수 표현식
const func = function(arg) {
  return expression;
};

=> 인자 arg를 받는 함수 func이 만들어짐.
함수 func는 화살표 우측의 표현식(expression)을 평가하고, 평가 결과를 반환

// 아래 함수의 축약 버전
const sum = (a, b) => a + b;

// 함수 표현식
const sum = function(a, b) {
  return a + b;
};

'(a, b) => a + b'는 인수 a와 b를 받는 함수이며,
함수가 실행되는 순간 'a + b'를 평가하고 그 결과를 반환.

const value = n => n + 1;
// const value = function(n) { n + 1 } 과 유사

const sayHi = () => alert("Hi, Hello!");

평가해야 할 표현식이나 구문(본문)이 여러 줄인 함수는 `중괄호 { } 안에 코드 작성하고, return 지시자를 사용해 명시적으로 결괏값을 반환

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

함수를 전달하게 되면 함수의 컨텍스트를 잃을 수 있으나,
화살표 함수를 사용하면 현재 컨텍스트를 잃지 않아 편리함

화살표 함수 본문에서 this에 접근하면, 외부에서 값을 가져옴
(일반 함수에는 this가 존재하기 때문에 에러 발생 가능)

객체의 메서드 안에서 동일 객체의 프로퍼티를 대상으로 순회하는 데 사용 가능
(화살표 함수 본문에 있는 'this.속성'은 화살표 함수 밖에 있는 메서드가 가리키는 대상과 동일해짐)

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

천방지축 빙글빙글