[JavaScript] ES6 - 화살표 함수

Letmegooutside·2022년 1월 3일

JavaScript

목록 보기

3/25

Arrow Function

function 이라는 키워드 없이 =>(fat arrow)를 이용해 함수를 생성하는 ES6 문법

사용 예

const sum = (a, b) => a+b;
// 위의 화살표 함수는 아래 함수와 동일하다.
const sum = function(a,b) {
	return a + b;
};

선언

매개변수 지정

// 매개변수가 없을 경우
() => {}

// 매개변수가 한 개인 경우, 소괄호 생략 가능
x => {}

// 매개변수가 여러개인 경우, 소괄호 생략 불가
(x, y) => {}

함수 몸체 지정

// 함수 몸체 지정 방법
x => {return x*x}
// 함수 몸체가 한 줄의 구문이라면 중괄호를 생략할 수 있으며
// 암묵적으로 return 된다. 아래는 위의 표현과 동일하다.
x => x*x;

() => {return {a:1}};
// 아래는 위의 표현과 동일하다. 객체 반환시 소괄호를 사용한다.
() => ({a:1});

// 함수의 몸체가 여러 줄인 경우 중괄호를 생략하지 않고 명시적으로 return해준다.
() => {
	const x = 10;
    return x*x;
}
// return이 없는 경우
(x) => {
	console.log(x);	
}

호출

화살표 함수는 익명함수로만 사용할 수 있으므로 함수 표현식을 사용하여 호출한다.
콜백 함수로 사용 가능하다.

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]

✨ map

배열의 모든 요소를 반복하며 인자로 넘긴 콜백함수를 호출한 결과 값을 모아 새로운 배열에 담아 반환해준다.

this

일반 함수와 화살표 함수에서 this는 다른 의미를 가진다.

1. 일반 함수에서의 this

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

함수 실행시에는 전역 객체를 가리킨다. (window)
메소드 실행시에는 메소드를 소유하고 있는 객체를 가리킨다.
생성자 실행시에는 새롭게 만들어진 객체를 가리킨다.

function Person(name, yearCount) {
	this.name;
	this.age = 0; // (A)
	var incrAge = function() {
		this.age++; // (B) 함수 실행 (내부 함수)
	}
	for(let i=1; i<=yearCount; i++) {
		incrAge();
	}
}
var p1 = new Person("hey",20); // 생성자 실행

const obj = {
	a: 1,
	b: 2,
	sum: function() {
		return this.a + this.b; // (C)	메소드 실행
	}
}
const res = obj.sum();

(A) 지점에서의 this 는 생성자 함수 Person의 인스턴스인 p1 객체이다.
(B) 지점에서의 this 는 전역객체인 windows를 가리킨다. 생성자 함수와 객체의 메소드를 제외한 모든 함수(내부함수, 콜백함수 포함)내부의 this는 전역객체를 가리키기 때문이다.
(C) 지점에서의 this는 메소드를 소유하고 호출하고 있는 객체인 obj를 가리킨다.

2. 화살표 함수에서의 this

this에 바인딩할 객체가 선언되는 시점에 정적으로 결정된다. 언제나 자기 자신과 가까운 상위 스코프의 this를 가리킨다.

화살표 함수는 자신의 this를 가질 수 없기 때문에 자신의 상위의 렉시컬 범위에서 this를 검색해서 사용한다. 즉 화살표 함수에는 this가 없으므로 화살표 함수 내에서 this가 사용되었다면 그 this가 무엇인지 찾으러 올라간다.

* 렉시컬 스코프(lexical scope) : 함수를 어디서 선언했는지에 따라 상위 스코프를 결정하는 것.

function Person(name, yearCount) {
	this.name;
	this.age = 0; // (A) 
	var incrAge = () => {
		this.age++; // (B) 
	}
	for(let i=1; i<=yearCount; i++) {
		incrAge();
	}
}
var p1 = new Person("hey",20); // 1)
Person(); // 2)