[TIL] JavaScript - 화살표 함수

서론

오늘은 파이썬 기초 강의를 들으면서 map, filter, lambda 식을 배웠습니다. 그런데 JavaScript에도 lambda식이 존재했으며, 면접 준비할 때 급하게 공부했던 화살표 함수가 생각나서 따로 찾아서 공부하게 되었습니다.

 

화살표 함수( Arrow function )

흔히 람다식이라고도 불리는 화살표 함수는 ES6에서 도입되었습니다. 화살표 함수는 기본 함수 식보다 단순하고 간결한 문법으로 함수를 만들 수 있으며 화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌습니다.  화살표 함수는 this, arguments, super 또는 new를 바인딩 하지 않으며, 항상 익명입니다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합하여, 생성자로서 사용할 수 없습니다.

1. 화살표 함수 기본 문법

//일반 함수
let add = function(num1, num2) {
  return num1 + num2;
}

console.log(add(1, 2));

//람다 함수
let add = (num1, num2) => (
  num1 + num2 
);
  
console.log(add(1, 2));

 

화살표 함수에서는 일반 함수와 달리 function 대신에 fat arrow   =>  를 사용합니다. 화살표 함수는 return 명령어 없이도 함수의 실행을 종료시키고 값을 반환합니다. 

 

// 매개변수 지정 방법
() => {  
	...    // 매개변수가 없을 경우
}

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

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

// 함수 body 지정 방법
x => {
	return x * x    // body가 return함수 한 줄일 경우
}

x => x * x    // 중괄호와 return을 생략할 수 있다.

() => {
	let x = 3;
    return x * x;    //body가 여러 줄일 경우  생략 불가!
}

 

화살표 함수에서 매개변수의 개수에 따라 또는 함수 body의 줄 개수에 따라 쓰이는 문법이 다릅니다.

 

2. 화살표 함수 this

JavaScript에서 일반 함수의 this는 함수 호출 방식에 의해 this에 바인딩할 객체가 동적으로 결정되는 반면, 화살표 함수에는 this를 가지지 않고, argument를 지원하지 않기 때문에 화살표 함수의 this는 화살표 함수가 호출되는 시점과는 무관하게 선언되는 시점에서 결정이 되며, 언제나 상위 스코프의 this를 가리킵니다.

 

let object = {
	sayHi : 'Hi',
    logHi : function(){
    	console.log(this.sayHi);
    }
};

object.logHi();
>>>'HI'
//callback 함수로 일반 함수 표현방식을 사용하면 this는 object의 객체가 됩니다.

 

하지만 화살표 함수로 바꿔서 표현할 시, this는 달라집니다.

 

let object = {
	sayHi : 'Hi',
    logHi : () => {
    	console.log(this.sayHi);
    }
};

object.logHi();
>>>undefined
//callback 함수로 화살표 함수를 사용할 경우 this는 상위 스코프인 전역 스코프 or window의 객체가 됩니다.
//하지만 현재 상위 스코프에는 변수가 존재하지 않으므로 undefined를 반환하게 됩니다.

 

Reference

• https://poiemaweb.com/es6-block-scope
• https://velog.io/@grinding_hannah/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C%ED%95%A8%EC%88%98arrow-function-%EC%95%8C%EA%B8%B0