Post

JAVASCRIPT) 화살표 함수 vs 일반 함수_ 차이점 완벽 가이드

Posted
Preview Image
By parksohyunnn 8 min read

안녕하세요, 코딩을 사랑하는 여러분! 오늘은 JavaScript에서 자주 사용하는 두 가지 함수 표현식인 화살표 함수(Arrow Function)와 일반 함수(Regular Function)에 대해 깊이 있게 알아보겠습니다. 이 글을 통해 각 함수의 정의, 사용 방법, 기본값, 주요 차이점, 그리고 언제 사용하면 좋은지에 대해 자세히 설명드릴게요. 끝까지 함께 해주세요!

정의 및 기본 개념

일반 함수 (Regular Function)

일반 함수는 JavaScript에서 가장 기본적인 함수 정의 방법입니다. function 키워드를 사용하여 정의하며, 함수 선언식(Function Declaration)과 함수 표현식(Function Expression) 두 가지 방식이 있습니다.

함수 선언식 예제:

1
2
3
4
5

function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet('Alice')); // "Hello, Alice!"

함수 표현식 예제:

1
2
3
4
5

const greet = function(name) {
    return `Hello, ${name}!`;
};

console.log(greet('Bob')); // "Hello, Bob!"

화살표 함수 (Arrow Function)

화살표 함수는 ES6(ECMAScript 2015)에서 도입된 새로운 함수 정의 방법입니다. 더 짧고 간결한 문법을 제공하며, 특히 콜백 함수와 같은 간단한 함수 표현식에 유용합니다.

화살표 함수 예제:

1
2
3
4
5

const greet = (name) => {
    return `Hello, ${name}!`;
};

console.log(greet('Charlie')); // "Hello, Charlie!"

더 간결하게 작성할 수도 있습니다:

1
2
3

const greet = name => `Hello, ${name}!`;

console.log(greet('Dave')); // "Hello, Dave!"

주요 차이점

1. 문법 (Syntax)

화살표 함수는 function 키워드 대신 화살표(=>)를 사용하여 정의합니다. 이는 함수의 문법을 더 간결하게 만들어줍니다.

  • 일반 함수:
1
2
3

function sum(a, b) {
    return a + b;
}
  • 화살표 함수:
1

const sum = (a, b) => a + b;

2. this 바인딩 (This Binding)

화살표 함수와 일반 함수의 가장 큰 차이점 중 하나는 this 바인딩 방식입니다.

일반 함수는 호출될 때마다 this 값을 동적으로 바인딩합니다. 즉, 호출 문맥(context)에 따라 this가 달라집니다.

화살표 함수는 자신만의 this 바인딩을 가지지 않습니다. 대신, 화살표 함수는 주변(lexical) 스코프의 this 값을 사용합니다.

  • 일반 함수의 this 예제:
1
2
3
4
5
6
7
8

const person = {
    name: 'Alice',
    greet: function() {
        console.log(this.name);
    }
};

person.greet(); // "Alice"
  • 화살표 함수의 this 예제:
1
2
3
4
5
6
7
8

const person = {
    name: 'Alice',
    greet: () => {
        console.log(this.name);
    }
};

person.greet(); // undefined (화살표 함수는 `person` 객체의 `this`를 사용하지 않음)

3. arguments 객체

일반 함수는 arguments 객체를 통해 함수에 전달된 모든 인수를 배열 형태로 접근할 수 있습니다. 반면, 화살표 함수는 arguments 객체를 지원하지 않습니다.

  • 일반 함수의 arguments 예제:
1
2
3
4
5

function showArgs() {
    console.log(arguments);
}

showArgs(1, 2, 3); // [1, 2, 3]
  • 화살표 함수의 arguments 예제:
1
2
3
4
5

const showArgs = () => {
    console.log(arguments);
};

showArgs(1, 2, 3); // Uncaught ReferenceError: arguments is not defined

화살표 함수에서 arguments 객체를 사용하려면, 나머지 매개변수(Rest Parameters)를 사용할 수 있습니다:

1
2
3
4
5

const showArgs = (...args) => {
    console.log(args);
};

showArgs(1, 2, 3); // [1, 2, 3]

언제 많이 쓰이는가?

일반 함수

  • 메소드 정의: 객체의 메소드로 정의된 일반 함수는 해당 객체의 this를 참조할 수 있습니다.
  • 동적 this 바인딩이 필요한 경우: 특정 문맥에 따라 this가 달라져야 하는 경우 유용합니다.
  • arguments 객체가 필요한 경우: 모든 인수를 배열 형태로 접근해야 하는 경우.

화살표 함수

  • 콜백 함수: 더 짧고 간결한 문법으로 콜백 함수를 작성할 때 유용합니다.
  • 렉시컬 this 바인딩이 필요한 경우: 함수가 정의된 위치의 this를 사용해야 하는 경우.
  • 간결한 함수 표현: 간단한 한 줄짜리 함수 표현에 적합합니다.

실전 예제: 다양한 상황에서의 화살표 함수와 일반 함수

  • 이벤트 핸들러 이벤트 핸들러에서는 this가 이벤트가 발생한 요소를 참조해야 하므로, 일반 함수가 더 적합할 수 있습니다.

일반 함수 예제:

1
2
3
4
5
6
7

<button id="myButton">Click me</button>

<script>
document.getElementById('myButton').addEventListener('click', function() {
    console.log(this); // 클릭된 버튼 요소를 참조
});
</script>

콜백 함수

콜백 함수에서는 화살표 함수가 더 간결하고 사용하기 좋습니다.

  • 화살표 함수 예제:
1
2
3

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

마무리

오늘은 JavaScript에서 화살표 함수와 일반 함수의 차이점에 대해 자세히 알아보았습니다. 각 함수는 고유의 특성과 사용 사례가 있으며, 이를 적절히 활용하면 더욱 효율적이고 읽기 쉬운 코드를 작성할 수 있습니다.

이 포스팅이 여러분의 JavaScript 이해에 도움이 되었기를 바랍니다. 궁금한 점이 있거나 더 알고 싶은 내용이 있다면 댓글로 남겨주세요. 즐거운 코딩 되세요! 😊

다음 시간에는 더 흥미로운 주제로 찾아뵙겠습니다. 감사합니다!

ChatGPT는 실수를 할 수 있습니다. 중요한 정보를 확인하세요.

JAVASCRIPT
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github