[ES6] 03. ArrowFunction은 function을 대체하는 신문법이 아니다

fe.syhan·2023년 10월 31일

JS 기초

목록 보기
32/52
post-thumbnail

( ) ⇒ { }


// (1)
function 함수() {
	// 실행문
}

// (2)
var 함수 = function() {
	실행문
}

일반적으로 함수를 만들 때 (1) 또는 (2)처럼 만들고

함수(); 라는 키워드로 함수를 실행한다.

ES6 부터는 신문법을 사용하여 함수를 만들 수 있다.

var 함수 = () => {
	// 실행문
}

왜 쓰는가?

1. 함수 본연의 기능을 아주 잘 표현하는 문법이다.

함수는 본래 ,

⑴ 여러 기능을 하는 코드를 한 단어로 묶고 싶을 때

⑵ 입출력기능을 만들 때

사용한다.

화살표함수는 함수 본연의 입출력기능을 직관적으로 표현해 준다.

var 두배만들기 = (x) => { return x * 2 }

console.log( 두배만들기(4) ); // 8
console.log( 두배만들기(8) ); // 16

2. 소괄호 생략이 가능하다.

파라미터가 하나라면 소괄호를 생략 가능하다.

var 두배만들기 = x => { return x * 2 }

console.log( 두배만들기(4) ); // 8
console.log( 두배만들기(8) ); // 16

3. 중괄호 생략이 가능하다.

중괄호 안에 return 한 줄 뿐이라면 중괄호와 return 키워드도 생략 가능하다.

var 두배만들기 = x => x * 2;

console.log( 두배만들기(4) ); // 8
console.log( 두배만들기(8) ); // 16

생략을 하니 x가 어떻게 변하는 함수인지 입출력기능이 직관적이다.

⭐4. this

함수가 쓰인 위치에 따라 내부의 this 값이 변한다.

근데 화살표함수는 어디서 쓰든 내부의 this 값을 변화시키지 않는다.

var 오브젝트1 = {
	함수: function() { console.log(this); }
};

오브젝트1.함수(); // {함수: f}

반면에,

var 오브젝트2 = {
	함수: () => { console.log(this); }
};

오브젝트2.함수(); // window {}

화살표함수는 외부에 있던 this를 그대로 내부로 가져와 사용한다.

0개의 댓글