[javascript]자바스크립트 화살표 함수 기본

rondido·2022년 9월 1일

JavaScript 자바스크립트 자바스크립트 화살표 함수 기분 화살표 함수 기분

Javascript

목록 보기

12/21

화살표 함수 기본

함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있다.
바로 화살표 함수(arrow function)를 사용하는 것. 화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌습니다.

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

이렇게 코드를 작성하면 인자 arg1...argN를 받는 함수 func이 만들어집니다. 함수 func는 화살표(=>)우측의 표현식(expression)을 평하하고,평가 결과를 반환
아래의 함수 축약 버전

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

좀 더 구체적인 예시

let sum = (a, b) => a + b;

/* 위 화살표 함수는 아래 함수의 축약 버전입니다.

let sum = function(a, b) {
  return a + b;
};
*/

console.log( sum(1, 2) ); // 3

인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략 가능

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

console.log( double(3) ); // 6

인수가 하나도 없을 땐 괄호를 비워놓으면 됩니다. 이 때 괄호는 생략할 수 없습니다.

let sayHi = () => console.log("안녕하세요!");

sayHi();

화살표 함수는 함수 표현식과 같은 방법으로 사용할 수 있습니다.

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

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

welcome();

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

위에서 소개해 드린 화살표 함수들은 => 왼쪽에 있는 인수를 이용해 => 오른쪽에 있는 표현식을 평가하는 함수들이었습니다.

그런데 평가해야 할 표현식이나 구문이 여러 개인 함수가 있을 수도 있습니다. 이 경우 역시 화살표 함수 문법을 사용해 함수를 만들 수 있습니다. 다만, 이때는 중괄호 안에 평가해야 할 코드를 넣어주어야 합니다. 그리고 return 지시자를 사용해 명시적으로 결괏값을 반환해 주어야 합니다.

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

console.log( sum(1, 2) ); // 3

화살표 함수 다시 살펴보기

화살표 함수는 단순히 함수를 '짧게' 쓰기 위한 용도로 사용되지 않습니다. 화살표 함수는 몇가지 독특하고 유용한 기능을 제공
자바스크립트는 사용하다 보면 저 멀리 동떨어진 곳에서 실행될 작은 함수를 작성해야하는 상황
예시
- arr.forEach(func) – func는 forEach가 호출될 때 배열 arr의 요소 전체를 대상으로 실행됩니다.
- setTimeout(func) – func는 내장 스케줄러에 의해 실행됩니다.
- 기타 등등…
이처럼 자바스크립트에선 함수를 생성하고 그 함수를 어딘가에 전달하는 것이 아주 자연스럽습니다.

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

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

메서드와 this 챕터에서 화살표 함수엔 this가 없다는 것을 배운 바 있습니다. 화살표 함수 본문에서 this에 접근하면,외부에서 값을 가져옵니다.
이런 특징은 객체의 메서드(showList())안에서 동일 객체의 프로퍼티(students)를 대상으로 순회

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

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

group.showList();

예시의 forEach에서 화살표 함수를 사용했기 때문에 화살표 함수 본문에 있는 this.title은 화살표 함수 바깥에 있는 메서드인 showList가 가리키는 대상과 동일해집니다. 즉 this.title은 group.title과 같습니다.
위 예시에서 화살표 함수 대신 '일반' 함수를 사용했다면 에러 발생

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

  showList() {
    this.students.forEach(function(student) {
      console.log(this.title + ': ' + student)
    });
  }
};

group.showList();

//undefined: 보라
//undefined: 호진
//undefined: 지민

화살표 함수는 new와 함께 실행할 수 없습니다.
- this가 없기 때문에 화살표 함수는 생성자와 함수로 사용할 수 없다는 제약
- 화살표 함수는 new와 함께 호출 할 수 없다.
화살표 vs bind
- 화살표 함수와 일반 함수를 .bind(this)를 사용해서 호출하는 것 사이에는 미묘한 차이
  - 화살표 함수는 어떤 것도 바인딩시키지 않습니다. 화살표 함수엔 단지 tihs가 없을 뿐 화살표 함수에서 this를 사용하면 일반 변수 서칭과 마찬가지로 this의 값을 외부 렉시컬 환경에서 찾습니다.

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

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

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

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

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

function sayHi(who) {
  console.log('안녕, ' + 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);
  };
}

위 내용은 javascript.info사이트에서 공부한 내용 정리
자세한 내용은 아래 링크를 참고하세요
https://ko.javascript.info/arrow-functions-basics

rondido

개발 옆차기

이전 포스트

[javascript]자바스크립트 함수표현식

다음 포스트