Arrow Function
기존의 함수 선언 방식을 보다 간결하게 만들어 주는 문법이다. Arrow Function은 이름이 없는 익명 함수이기 때문에 일반적으로 어떤 이름을 가진 변수에 할당하거나 혹은 다른 함수의 아규먼트를 선언할 때 주로 활용됩니다.
const getTwice = function(number) {
return number * 2;
};
console.log(getTwice(5));
const myBtn = document.querySelector('#myBtn');
myBtn.addEventListener('click', function() {
console.log('button is clicked');
});이 함수를 Arrow Function으로 바꾸어보면
const getTwice = (number) => {
return number * 2;
};
console.log(getTwice(5));
const myBtn = document.querySelector('#myBtn');
myBtn.addEventListener('click', () => {
console.log('button is clicked');
});Arrow Function은 기존의 function 키워드를 사용하던 방식을 좀 더 간결하게 표현하고자 등장했기 때문에 상황에 따라서는 이것보다 훨씬 더 짧게 표현될 수 있다. getTwice 함수를 이렇게 줄일 수도 있다.
const getTwice = number => number * 2;
console.log(getTwice(6));*함수표현식
const getTwice = function(number) {
return number * 2;
};*함수 선언
function getTwice(number) {
return number * 2;
};*ArrowFunction
const getTwice = number => number * 2;그러나 모든 함수들을 Arrow Function으로 표현할 수는 없고 특정한 상황에서 좀 더 간결하게 표현한 규칙들이 있다.
-
파라미터가 하나인 Arrow Function은 파라미터를 감싸는 소괄호 부분을 생략할 수 있다. 그런데 만약 파라미터가 두 개 이상 있거나 없을 경우에는 소괄호를 반드시 작성해 줘야 한다. 사실 몇몇 스타일가이드에서는 가독성의 문제로 파라미터가 하나라도 소괄호를 생략하지 말고 파라미터라는 것을 명확하게 알려주는 것이 좋다는 의견도 있다.
-
내부의 동작 부분이 return문 하나로만 이루어져 있다면 중괄호와 함께 return 키워드도 생략할 수가 있다. 하지만 함수 내부에서 조건문이나 반복문, 아니면 변수의 값을 할당하는 것과 같이 return문 외에 다른 표현들이 더 필요하다면 중괄호와 return 키워드는 생략할 수 없다.
-
함수 내부에 동작이 return문 하나밖에 없긴 하지만 return 값이 객체인 경우 중괄호와 return 키워드를 생략하게 되면 에러가 발생한다.
const getHyunji = () => {
return {name: 'Cindy'};
};왜냐하면 컴퓨터가 해석할 때 우리는 객체라고 작성했던 중괄호를 함수의 동작 부분을 구분하는 이 중괄호로 해석해 버리기 때문이다.
const getHyunji = () => ({name: 'Cindy'});그럴 때는 이렇게 중괄호 바깥을 소괄호로 감싸주면 해결할 수 있으니 잘 기억해두면 좋다.
주의사항
Arrow Function에는 arguments 객체가 없다. 때문에 arguments 객체를 사용하는 함수라면 Arrow Function으로 대체하기는 어렵다.
this
자바스크립트에서 this 라는 키워드는 조금 특별한 동작을 하는데, 일단 그냥 콘솔에 this를 한 번 출력해보면 전역객체인 window 객체가 출력된다. this는 함수 내부에서 주로 사용된다. 특히 객체의 method를 만들 때 중요한 역할을 한다.
function getFullName() {
return `${this.firstName} ${this.lastName}`;
const user = {
firstName: 'Tess',
lastName: 'Jang',
getFullName: getFullName,
};
const admin = {
firstName: 'Alex',
lastName: 'Kim',
getFullName: getFullName,
};
console.log(user.getFullName());
console.log(admin.getFullName());자바스크립트에서 이 this는 함수를 호출한 객체를 가리키는 키워드이다. 그래서 코드를 작성할 때 값이 미리 결정되는 게 아니라 함수가 호출될 때 어떤 객체가 그 함수를 호출했는지에 따라 상대적으로 값이 변하게 된다는 것이 특징이다.
console.log(this);
function printThis() {
console.log(this);
}
printThis();이렇게 그냥 this를 사용하거나 함수를 선언하고서 선언된 함수를 그냥 호출하게 되면 this는 기본값인 Window 객체를 가리키게 된다.
console.log(this);
const printThis() {
console.log(this);
};
const myObj = {
content: 'myObj',
printThis: printThis,
};
const otherObj = {
content: 'otherObj',
printThis: printThis,
};
myObj.printThis();그런데 어떤 객체의 메소드로 호출이 되는 경우에는 함수를 호출하는 객체가 this에 담기기 때문에 똑같은 함수를 호출했지만 콘솔에는 각각 다른 객체가 출력되는 모습을 확인할 수가 있다.
주의사항
일반 함수와 Arrow Function의 가장 중요한 차이는 바로 this 키워드이다. 이 두 함수는 this 키워드를 다룰 때 조금 다르다.
console.log(this);
const printThis = () => {
console.log(this);
};
const myObj = {
content: 'myObj',
printThis: printThis,
};
const otherObj = {
content: 'otherObj',
printThis: printThis,
};
myObj.printThis();이렇게 printThis 함수를 arrow function으로 바꿨을 때 모든 결과가 window 객체인 것을 확인할 수 있다. arrow function에서 this 값은 일반 함수처럼 호출한 대상에 따라 상대적으로 변하는 게 아니라 arrow function이 선언되기 직전에 그때 유효한 this 값과 똑같은 값을 가지고 동작하게 된다.
이 코드에서 Arrow Function이 선언되기 직전의 this는 Window 객체이다. 그래서 코드를 실행했을 때 window 객체로 출력되게 된 것이다.
이런 특징 때문에 특별히 객체에 메소드를 만들 때는 Arrow Function보다는 일반 함수가 좀 더 권장된다.
