1. 화살표 함수(arrow function expression)
JavaScript의 화살표 함수 표현식은 자바 외 다른 프로그래밍 언어의 세계관의 람다식과 같습니다.
람다식은 함수(function)를 하나의 식으로 표현한 것이며, 함수를 람다식으로 표현하면 메서드의 이름이 필요 없기 때문에, 이름이 없다는 말 뜻 자체로 익명 함수의 한 종류라고 볼 수 있습니다.
(타입 매개변수, ...) => { ... 실행문; };
익명 함수는 함수의 이름이 없는 함수로, 익명 함수들은 모두 일급 객체로 취급합니다.
일급 객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 예를 들어, string, number, boolean, array, object 것들이 모두 일급 객체로 다뤄진다.
잠깐 일급 객체로 삼천포로 빠졌지만, 람다식은 메서드의 매개변수로 전달될 수 있으며, 메서드의 결과로 반환될 수 있고, 메서드를 변수처럼 다루는 것이 가능합니다.
이런 화살표 함수 또는 람다식이 등장하게 된 이유는 코드의 가독성과 불필요한 코드를 줄이고, 인터페이스가 가지고 있는 메서드를 간편하게 또는 즉흥적으로 구현해서 사용하는 것이 목적 아래 등장하게 되었습니다.
2. 다양한 JavaScript 함수 표기법
가. 기본 방식
function 메서드명(매개변수, ....) {
실행문
}
나. 즉시 실행 함수
// 함수선언문은 아무것도 반환하지 않는다(혹은 undefined)
function() {}
// 아래 표현식은 !undefined는 true를 반환한다. 그리고 바로 실행하기도 한다.
!function() {}()
// 함수 실행의 결과로 실제 반환된다.
(function(){})();
// 익명 즉시실행함수(더글러스 클락포드 권장표기법)
(function() {}());다. 화살표 함수 선언
// 매개변수 지정 방법
() => { ... } // 매개변수가 없을 경우
x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략
// 함수 몸체 지정 방법
x => { return x * x } // single line block
x => x * x // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return 된다.
() => { return { a: 1 }; }
() => ({ a: 1 }) // 위 표현과 동일하다. 객체 반환시 소괄호를 사용
() => { // multi line block.
const x = 10;
return x * x;
};
라. 화살표 함수 호출
// ES5
var pow = function (x) { return x * x; };
console.log(pow(10));
// ES6
const pow = x => x * x;
console.log(pow(10));
3. this에서의 함수 선언식과 함수 표현식의 화살표 함수 차이
일반 함수(함수 선언식)는 함수를 선언할 때 this. 에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this. 에 바인딩할 객체가 동적으로 결정됩니다.
화살표 함수는 함수를 선언할 때 this. 에 바인딩할 객체가 정적으로 결정되고, 동적으로 결정되는 함수 선언식과 달리 화살표 함수의 this. 는 언제나 상위 스코프의 this. 를 가리킵니다.
이런 this 바인딩 객체 결정 방식은 함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프와 유사합니다.
가. 함수 선언식 this.
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
printParam 함수 안에서 사용하고 있는 this.param 값은 호출하고 있는 object, object2 내에서 지정한 값을 출력하고 있다. this. 값은 호출한 곳에서 저장한 값이 출력된다.
나. 함수 표현식 this.
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
화살표 함수로 선언한 printParam 함수는 선언된 시점에서는 this.param 에 전역 변수인 global param이라는 문자열이 저장된 변수 param 값을 확보해둔 상태가 되므로 확보한 값은 고정으로 설정되어 변경되지 않는다.
댓글