처음 배우는 JavaScript 강의. 2주차: 함수와 배열 (1) 함수의 정의와 호출 (심화. 함수 사용 예제)

함수 표현식과 화살표 함수는 JavaScript에서 함수를 정의하는 두 가지 중요한 방법입니다. 각각의 특징을 이해하고 활용하는 예제를 통해 더 자세히 설명드리겠습니다.

 

함수 표현식 (Function Expression)

함수 표현식은 변수에 함수를 할당하여 사용합니다. 이 방식은 특히 익명 함수를 생성할 때 유용하며, 이벤트 핸들러나 콜백 함수로도 자주 사용됩니다.

기본 예제

const square = function(number) {
    return number * number;
};

console.log(square(4));  // 출력: 16

 

이 예제에서 square라는 이름의 변수에 함수를 할당하고 있습니다. 이 함수는 하나의 매개변수 number를 받아 그 제곱을 반환합니다.

 

콜백 함수로서의 사용

const numbers = [1, 2, 3, 4];
const squares = numbers.map(function(num) {
    return num * num;
});

console.log(squares);  // 출력: [1, 4, 9, 16]

 

map() 함수는 배열의 각 요소에 대해 주어진 함수를 실행하고, 결과를 새 배열로 반환합니다. 여기서 함수 표현식은 map()의 인자로 전달되었습니다.

 

화살표 함수 (Arrow Function)

ES6에서 도입된 화살표 함수는 더 짧은 문법을 사용하여 함수를 정의할 수 있게 해 줍니다. this의 바인딩 방식도 다르므로, 주로 콜백 함수에 사용될 때 this 관련 문제를 해결하는 데 도움이 됩니다.

기본 예제

const square = (number) => {
    return number * number;
};

console.log(square(5));  // 출력: 25

 

화살표 함수는 괄호 안에 매개변수를 정의하고, 화살표(=>)를 사용하여 함수 본체를 나타냅니다.

간결한 표현

화살표 함수는 더 간결하게 표현할 수 있습니다. 함수 본체가 한 줄의 표현식인 경우, 중괄호와 return 문을 생략할 수 있습니다.

const square = number => number * number;

console.log(square(6));  // 출력: 36

 

화살표 함수와 this

화살표 함수는 자신의 this를 가지지 않고, 자신을 감싸는 (lexical) 상위 컨텍스트의 this를 사용합니다. 이는 특히 객체의 메소드 안에서 콜백 함수로 사용될 때 유용합니다.

function Timer() {
    this.seconds = 0;
    setInterval(() => {
        this.seconds++;
        console.log(this.seconds);
    }, 1000);
}

new Timer();

 

이 예에서 setInterval의 콜백 함수로 화살표 함수를 사용하면, this는 Timer 인스턴스를 참조하게 됩니다. 전통적인 함수 표현식을 사용했다면 this가 setInterval을 호출하는 글로벌 객체(브라우저에서는 window)를 참조했을 것입니다.

 

이러한 예제들은 함수 표현식과 화살표 함수의 기본적인 사용 방법과 그들의 활용법을 보여 줍니다. JavaScript에서 함수를 효율적으로 사용하는 방법을 잘 이해하고 연습하는 것이 중요합니다.