[JavaScript]화살표 함수를 왜? 사용할까

자바스크립트에서 함수를 사용하는 여러가지 방법이 있다.그중 모던 자바스크립트 함수에서 가장 핵심적인 화살표 함수에 대해서 알아보자.

 

일반 함수와 무엇이 다른가

1.가독성 향상

// 기존 함수선언
function add(a, b) {
	return a + b;
}

// 화살표 함수선언
const add = (a, b) => a + b;

const pritn = msg => console.log(msg);

기존 함수 선언보다 훨씬 간결한것을 확인할수있다. 코드가 한줄이면 return 문까지 생략할수있고 매개변수가 한개라면 매개변수 괄호도 생략 가능하다.

 

2.this가 존재하지 않는다.

일반함수에서 this는 코드가 실행시점 컨텍스트에 의해 결정되지만 화살표 함수는 선언시점 컨텍스트에 따라 결정된다.

화살표 함수는 선언시점 상위 스코프의 this를 캡쳐하게 된다.

// 화살표 함수는 선언시점 상위스코프의 this를 가지기때문에 title에 접근이 가능하다.
const group = {
	title : "안녕",
    list : [1, 2, 3 ,4],
    
    showList() {
    	this.list.forEach((num) => {
        	this.title
        })
    }
}

// 일반함수는 title에 접근이 불가능하다.
// !! undefined
const group2 = {
	title : "안녕",
    list : [1, 2, 3 ,4],
    
    showList() {
    	this.list.forEach(function(num) {
            console.log(this.title)
        })
    }
}