화살표 함수

1. 화살표 함수란?

//기존 함수
function doubles(a) {
  return 2 * a;
};

//화살표 함수를 사용한 경우
let doubles = (a) => {return 2 * a};

2. 함수 선언 방법

가. 매개변수에 따른 차이

1) 매개변수가 없는 경우

let myfunction = () => {...};

2) 매개변수가 하나인 경우

let myfunction = a => {...};

3) 매개변수가 다수인 경우

let myfunction = (a, b) => {...};

나. 함수 길이에 따른 차이

1) 함수가 하나의 문장인 경우

let myfunction = a => 2 * a;

2) 함수가 여러 문장인 경우

let myfunction = a => {return 2 * a};

3. 일반 함수와 화살표 함수에서의 this

일반 함수에서 사용되는 this는 함수가 어떻게 호출되었는지에 따라 값이 달라진다. 아래의 예시를 보자. 객체 내에서 호출된 this는 객체 자기 자신을 가리킨다.

window.param = "global param";

function printParam() {
	console.log(this.param);
};

let object = {
	param: "object param",
	func: printParam
};
let object2 = {
	param: "object2 param",
	func: printParam
};

object.func(); //"object param"
object2.func(); //"object2 param"

반면에 화살표 함수에서 사용되는 this는 호출 시점과는 관련없이 선언되는 시점에 결정되며, 언제나 상위 스코프의 this를 가리킨다.

window.param = "global param";

let printParam = () => {
	console.log(this.param);
};

let object = {
	param: "object param",
	func: printParam
};
let object2 = {
	param: "object2 param",
	func: printParam
};

object.func(); //"global param"
object2.func(); //"global param"

아래는 또 다른 예시.

//일반 함수인 경우
let object = {
	myName: "Barbie",
	logName: function() {
    	console.log(this.myName);
    }
};
object.logName(); //"Barbie"

//화살표 함수의 경우
let object = {
	myName: "Barbie",
	logName: () => {
    	console.log(this.myName);
    }
};
object.logName(); //undefined

//밖에서 myName에 값을 미리 할당해준 경우
window.myName = "Molang";
let object = {
	myName: "Barbie",
	logName: () => {
    	console.log(this.myName);
    }
};
object.logName(); //"Molang"

예시 출처: https://codedot.co.kr/9, https://velog.io/@grinding_hannah/JavaScript-화살표함수arrow-function-알기