화살표 함수 : Arrow Function : ( => ) in Javascript ES6

horiz.d·2021년 12월 16일

JavaScript web

JS 꿀단지

목록 보기

22/35

화살표 함수

화살표 함수 (Arrow Function)은 ES6의 새로운 함수 선언 방법이다.
일반 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있다.

모습

Basic 함수 선언법과 Arrow함수 선언법의 모습을 비교해보자.

Basic 함수 선언 1

function sum(a, b) {
  return a + b;
}

Basic 함수 선언 2 : 익명함수 변수 할당

let sum = function(a, b) {
  return a + b;
};
console.log( sum(1,2) );

Arrow 함수 선언

Arrow함수는 function 키워드를 생략하며, function 키워드 대신 매개변수 입력괄호 () 만 유지해준다.
(but 인자가 한개일 경우 괄호생략)

1.expression이 한줄이라면 중괄호{}를 생략할 수 있으며 유일한 expression 줄을 return값으로 반환한다.

=> 뒤에서 return 없이 expression을 곧바로 반환한다.

2.expression이 여러줄이라면 일반함수와 동일하게 중괄호{}와 return 지시자를 사용해준다.

expression의 Line 갯수에 따라

아래와 같은 이유로, 화살표 함수는 expression이 한줄인 함수를 작성할 때 유용하다.

한 줄의 expression
단일 줄의 경우 중괄호{}와 return지시자를 생략하고 단일의 expression을 반환 한다.

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

a+b를 반환

두 줄 이상의 expression
두 줄 이상의 expression을 작성할 경우 일반 함수처럼 중괄호{}와 return지시자를 사용해 준다.

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

지역변수 c를 반환

매개변수의 갯수에 따라

매개변수 2개 이상

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

매개변수 1개
매개변수가 한개인 경우 매개변수 자리의 괄호를 생략한다.

let double = n => n*2;
// let double = function(n) { return n*2 } 과 상동

매개변수 0개
매개변수가 없는 경우 괄호 안에 아무것도 넣지 않는다.
이 경우 매개변수의 괄호와 expression의 중괄호는 생략할 수 없다.

let sayHi = () => {console.log("하위염");}
sayHi();

일반 함수와의 내재적 차이점

this의 정적/동적 바인딩 : 정적
생성자로서 사용 가능 여부 : 불가능
arguments 변수 사용 가능 여부 : 불가능
(4). 스코프 지정 메소드 (call, apply, bind) 사용 가능 여부 : 불가능
(5). new.target 키워드 존재 여부 : 부재
(6). 함수 내부에서 yield 사용 가능 여부 : 불가능

( 상기 목록에서 괄호된 인덱스는 추가적으로 다루지 않습니다. )

1. this

화살표 함수와 일반 함수는
함수 내에 할당되는 this 객체의 바인딩 방식에서 차이가 있다.(정적/동적)

일반함수 : this 동적 바인딩 : 자신이 종속된 객체

일반함수

자바스크립트에서 모든 함수는 실행될 때마다 함수 내부에 this라는 객체가 추가된다.
아래는 일반 함수에서 주어진 상황에 따라 this가 바인딩 되는 방식이다.
.
(1)함수 실행시에 this는 전역(window) 객체를 가리킨다.
(2)메소드 실행시에 this는 메소드를 소유하고 있는 객체를 가리킨다.
(3)생성자 실행시에 this는 새롭게 만들어진 객체를 가리킨다.
.

일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고,
함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

화살표 함수 : this 정적 바인딩 (Lexical this) : 자신이 종속된 인스턴스

화살표 함수

화살표 함수는 일반함수의 this 바인딩의 동적 결정과는 다르게
함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.

화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다.(Lexical this)
또한 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

( Lexical scope : https://velog.io/@he1256/JS%EC%9D%98-Lexcal-scoping-%EA%B3%BC-%ED%81%B4%EB%A1%9C%EC%A0%80Closure )

EX)

//일반함수
function fun() {
  this.name = "하이";
  return {
    name: "바이",
    speak: function () {
      console.log(this.name); // 일반함수의 this는 동적함수 바인딩 규칙을 따라, 전역객체의 this를 가리켜 "바이"를 잡는다.
    },
  };
}

//화살표함수
function arrFun() {
  this.name = "하이";
  return {
    name: "바이",
    speak: () => {
      console.log(this.name); // 화살표 함수의 this는 정적 바인딩 규칙을 따라, Lexical this를 가리켜 "하이"를 잡는다.
    },
  };
}

const fun1 = new fun();
fun1.speak(); // 바이

const fun2 = new arrFun();
fun2.speak(); // 하이

일반함수는 자신이 종속된 객체(전역)을 this로 가리켜 "바이"가 콘솔에 출력되고,
화살표 함수는 자신이 종속된 인스턴스(Lexical 함수 환경)를 가리키므로 "하이"가 출력된다.

2. 생성자 함수로 사용 가능 여부

일반함수와 화살표 함수는 생성자 함수로 사용 가능한지 여부에도 차이가 있다.

일반 함수는 생성자 함수로 사용할 수 있다.
화살표 함수는 생성자 함수로 사용할 수 없다. prototype 프로퍼티를 가지고 있지 않기 때문이다.

일반 함수

생성자 함수로 사용 가능

function fun() {
  this.num = 1234;
}
const funA = new fun();
console.log(funA.num); // 1234
위와 같이 생성자로 사용시 정상적으로 동작한다.