자바스크립트 화살표 함수(Arrow Function) 사용법
자바스크립트에서 화살표 함수를 처음 보면 저게 무엇인가 하고 혼동스러운 시간이 있습니다. 그런데 기호라는 것이 그렇듯이 시간이 지나고 익숙해 지면 가독성이 더 좋아지는 효과가 있습니다. 그러기 까지 어느 정도 시간이 걸리겠지만 숙련자가 되기 위한 과정입니다.
HTML 페이지를 하나 만들어 놓고 DOM으로 자바스크립트 화살표 함수에 대해 알아보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./arrowfunction.js" defer></script>
<title>Document</title>
</head>
<body>
<h1>arrow function ex</h1>
<div id="container">
</div>
</body>
</html>
기본함수에서 화살표함수, 그리고 축약형 문법은 아래와 같습니다. 첫번째는 function 키워드를 사용했으니 알아보기 쉽습니다. 두번째는 function 키워드가 없어지고 => 가 뒤에 붙는 것으로 바뀌었습니다. () 괄호안은 매개변수입니다. 마지막 축약형은 return 문을 => 화살표 함수표시의 뒤에 둠으로써 완성됩니다. let sumArrow1 처럼 변수에 함수를 저장한다는 개념은 다른 언어에도 있는데요. 정확히는 함수 코드가 시작되는 주소를 저장하는 겁니다.
// 기본 함수
function sum(a, b) {
return a + b;
}
// 화살표 함수
let sumArrow1 = (a, b) => {
return a + b;
}
// 축약형
let sumArrow2 = (a, b) => a + b;
DOM 객체를 사용해서 페이지에 표시해봅니다. innerText에 넣는데 어떻게 함수를 호출하는지 보면, 평범하게 호출합니다. 화살표 함수는 변수의 이름이 곧 함수의 이름이 되는 거지요.
const dc = document;
const myContainer = dc.getElementById('container');
const p1 = dc.createElement('p');
p1.innerText = 'Basic Function: ' + sum(3, 4);
myContainer.appendChild(p1);
const p2 = dc.createElement('p');
p2.innerText = 'Arrow Function-A: ' + sumArrow1(3, 4);
myContainer.appendChild(p2);
const p3 = dc.createElement('p');
p3.innerText = 'Arrow Function-B: ' + sumArrow2(3, 4);
myContainer.appendChild(p3);
매개변수가 하나인 경우 더 간소한 표현이 가능합니다.
function square (x) {
return x*x;
}
let squareA = x => x * x;
마찬가지로 함수를 호출하는 건 별다를게 없습니다.
const p4 = dc.createElement('p');
p4.innerText = 'square : ' + square(5);
myContainer.appendChild(p4);
const p5 = dc.createElement('p');
p5.innerText = 'square : ' + squareA(5);
myContainer.appendChild(p5);
매개변수가 없는 경우입니다.
function randomNumber() {
return Math.random();
}
let randomNum = () => {
return Math.random();
}
const p6 = dc.createElement('p');
p6.innerText = 'random : ' + randomNumber();
myContainer.appendChild(p6);
const p7 = dc.createElement('p');
p7.innerText = 'random : ' + randomNum();
myContainer.appendChild(p7);
이벤트 리스너에 넣은 익명함수, 버튼 클릭에 많이 사용하지요.
dc.addEventListener('click', () => console.log('clicked! ArrowFunction'));
마지막으로 인스턴스 함수로 사용하는 화살표 함수입니다. 아래 클래스에서 setTimeout의 인수로 사용된 함수 중에 function 이라고 쓴 익명함수는 글로벌 속성입니다. 화살표 함수는 인스턴스의 함수입니다.
class MyClass {
constructor(name) {
this.name = name;
}
// 글로벌 함수로 사용
printName(){
setTimeout(function() {
console.log('function: ' + this.name);
}, 300);
}
// 인스턴스 함수로 사용
printNameArrowFunction(){
setTimeout(() => {
console.log('function: ' + this.name);
}, 500);
}
}
let myc = new MyClass('Neokay');
myc.printName();
myc.printNameArrowFunction();
콘솔창에서 실행해보면 아래와 같이 글로벌 함수는 인스턴스의 속성에 접근이 불가능합니다. 화살표 함수를 사용하면 인스턴스의 속성에 접근할 수 있습니다. (this.name)
