JavaScript 화살표 함수

 

화살표 함수( => )

: function 키워드보다 간결한 표현으로 함수 생성 O

 

 

 

1. 화살표 함수 선언

a. 매개변수 지정하기

    () => { ... }	//매개변수 없을 경우
     x => { ... }	//매개변수 한 개인 경우. 소괄호 생략 O
(x, y) => { ... }	//매개변수 여러 개인 경우. 소괄호 생략 X

 

b. 함수 몸체 지정하기

x => {return x * x }	//single line block
x => x * x		//함수 몸체가 한 줄의 구문이면 중괄호 생략 O. 위 표현과 동일

() => { return { a: 1 }; }
() => ({a: 1})		//위 표현과 동일. 객체 반환시 소괄호 사용

() => {			//multi line block
    const x = 10;
    return x * x;
};

 

 

2. 화살표 함수 호출

화살표 함수는 익명 함수로만 사용 가능

☞ 화살표 함수를 호출하기 위해서는 함수 표현식 사용

const pow = x => x * x;
console.log(pow(10));	//100

 

콜백 함수로 사용

const arr = [1, 2, 3];
const pow = arr.map(x => x * x);

console.log(pow);	//[1, 4, 9]

 

 

3. 화살표 함수 this

a. 일반 함수

일반 함수에서 this가 바인딩 되는 과정

1. 함수 실행시 ≫ 전역(window) 객체 가리킴

2. 메소드 실행시 ≫ 메소드를 소유하고 있는 객체 가리킴

3. 생성자 실행시 ≫ 새롭게 만들어진 객체 가리킴

 

☞ 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정됨

 

b. 화살표 함수

함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정됨

화살표 함수의 this는 언제나 상위 스코프의 this를 가리킴

call, apply, bind 메소드를 사용하여 this 변경 X

 

//일반 함수
function fun() {
    this.name = "Hi";
    return {
    	name = "Bye",
        speak: function() {
            console.log(this.name);
        },
    };
}

//화살표 함수
function arrFun() {
    this.name = "Hi";
    return {
    	name = "Bye",
        speak: () => {
            console.log(this.name);
        },
    };
}

//호출
const fun1 = new fun();
fun1.speak();	//Bye

const fun2 = new arrFun();
fun2.speak();	//Hi

 

 

 

 

 

 

 

 

※ 출처

1) https://poiemaweb.com/es6-arrow-function

Arrow function | PoiemaWeb

2) https://hhyemi.github.io/2021/06/09/arrow.html

JavaScript - 화살표 함수와 일반 함수의 차이 - CODE:H