1.5.2 화살표 함수

약 6분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

1.5.2 화살표 함수

화살표 함수(Arrow Function)는 ES6에서 추가된 간결한 함수 작성 방법입니다. 기존의 함수 표현식보다 더 짧고 읽기 쉽게 코드를 작성할 수 있습니다. 특히, this 바인딩이 Lexical Scoping에 따라 더 예측 가능하게 동작하기 때문에, 객체의 메서드로 사용될 때 특히 유용합니다.

기본적인 화살표 함수의 문법은 다음과 같습니다:

const 함수이름 = (매개변수) => {
    // 실행할 코드
};

단일 매개변수를 사용할 경우 괄호를 생략할 수 있습니다:

const 제곱 = x => x * x;

이 경우, 한 줄의 코드만 있을 때는 중괄호와 return 키워드를 생략해도 됩니다.

다음은 화살표 함수를 사용한 예제입니다. 이 예제는 HTML 버튼을 클릭하면 두 숫자의 합계를 계산하여 보여주는 웹 페이지입니다.

코드 html

html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>화살표 함수 예제</title>
</head>
<body>
    <input type="number" id="num1" placeholder="첫 번째 숫자">
    <input type="number" id="num2" placeholder="두 번째 숫자">
    <button id="calculate">더하기</button>
    <p id="result"></p>
    <script src="script.js"></script>
</body>
</html>

코드 javascript

javascript
// script.js
const num1Input = document.getElementById('num1');
const num2Input = document.getElementById('num2');
const resultDisplay = document.getElementById('result');
const calculateButton = document.getElementById('calculate');

const calculateSum = () => {
    const num1 = parseFloat(num1Input.value);
    const num2 = parseFloat(num2Input.value);
    const sum = num1 + num2;
    resultDisplay.textContent = `결과: ${sum}`;
};

calculateButton.addEventListener('click', calculateSum);

위 예제에서는 두 개의 입력 필드를 통해 숫자를 입력받고, 버튼 클릭 시 화살표 함수 calculateSum이 호출되어 합계를 계산합니다. resultDisplay에 결과를 출력하는 방식으로 구성되어 있습니다.

이제 여러분이 직접 화살표 함수를 사용하여 화살표 함수로 여러 다른 기능을 구현해보는 실습을 진행해 보세요. 예를 들어, 입력한 숫자들의 차, 곱, 나누기 기능 등을 추가해보면 좋습니다.

마지막으로, 화살표 함수 사용 시의 주의점도 있습니다. 화살표 함수는 this가 정적으로 결정되기 때문에, 메서드로 사용할 경우 주의해야 합니다. 예를 들어, 아래와 같은 경우에는 문제가 발생할 수 있습니다:

const obj = {
    value: 42,
    getValue: () => {
        console.log(this.value);
    }
};
obj.getValue(); // undefined

이처럼, 화살표 함수 내의 this는 객체를 향하지 않고 전역 스코프를 참조하게 됩니다. 따라서 메서드로서 활용하고자 할 경우에는 전통적인 함수 표현식을 고려해야 합니다.

정리하자면, 화살표 함수는 간결하게 코드를 작성하고 this 바인딩에 있어 예측 가능한 이점을 가지고 있지만, 사용 시 꼭 맞는 상황에 활용하는 것이 중요합니다.

실습 과제

화살표 함수를 이용하여 간단한 계산기 기능(더하기, 빼기, 곱하기, 나누기)을 만들어 보세요.
추가로, 두 숫자가 입력되면 결과가 나오는 버튼 외에, 입력값이 변경될 때마다 결과가 업데이트되도록 만들어 보세요.

응용 문제

화살표 함수와 DOM 조작을 활용하여 클릭시 배경색이 변경되는 기능을 구현해 보세요.
화살표 함수를 사용하여 배열 내의 모든 항목을 두 배로 증가시키는 함수를 작성해보세요.

1.5.2 화살표 함수

1.5.2 화살표 함수

실습 과제

응용 문제

댓글 0