JavaScript에서 모든 함수는 Function 객체입니다. 이는 함수가 다른 모든 객체처럼 속성과 메서드를 가질 수 있다는 것을 의미하며, 이러한 특징 때문에 함수를 일급 객체로 분류할 수 있습니다.
코드의 간결함
JavaScript ES6에서 도입된 화살표 함수는 코드를 더 간결하게 만들어줍니다.
1. 코드의 양
- 화살표 함수는 function이라는 키워드 없이도 함수로 정의할 수 있습니다.
- 소괄호와 중괄호의 생략이 가능합니다.
// 일반 함수
function add(x, y) {
return x + y;
};
// 화살표 함수
let add = (x, y) => x + y;
let sqrt = x => x * x;2. 암시적 반환
- 화살표 함수는 return 키워드 없이도 값을 반환할 수 있습니다.
내부 차이점
this의 값
- ES6에서 도입된 화살표 함수에서 this는 Lexical this입니다.
arguments 바인딩
- 일반 함수는 가장 가까운 부모 함수의 arguments 객체에 접근할 수 있습니다.
- 화살표 함수에는 arguments 바인딩이 없습니다.
일반 함수
- 일반 함수 내에서 this의 값은 동적으로 결정됩니다. 이는 함수가 호출되는 방식에 따라 달라집니다.
const object = {
method() {
console.log(this);
},
showArg(){
console.log(arguments);
}
};
const outB = {
b: 12,
show: function show() {
console.log(this.b)
}
};
object.method(); // object 출력
object.showArg(1,2,3,4); // 1,2,3,4 출력
outB.show(); // 12 출력
화살표 함수
- 화살표 함수는 자체 실행 컨텍스트를 정의하지 않으므로, this 값은 항상 상위 스코프의 this를 가리킵니다 (Lexical this).
const object = {
method(items) {
console.log(this); // object 출력
const callback = () => {
console.log(this); // object 출력
};
},
showArg: () => {
console.log(...arguments);
}
};
const outB = {
b: 12,
show: () => console.log(this.b)
};
object.showArg(1,2,3); // error: arguments not defined
outB.show(); // undefined 출력
Constructor
- 화살표 함수는 prototype 속성이 없으므로 생성자 함수로 사용할 수 없습니다.
일반 함수
- 일반 함수를 사용하면 객체(instance)를 쉽게 생성할 수 있습니다.
function Animal(name) {
this.name = name;
}
const Dog = new Animal('dog');
Dog instanceof Animal; // true
화살표 함수
const Animal = name => this.name = name;
const Dog = new Animal('dog');
Dog instanceof Animal; // error: Animal is not a constructor
Hoisting
- 함수 선언문은 어디서든 호출 가능합니다.
- 함수 표현식은 함수를 초기화한 코드 아래에서만 호출 가능합니다.
기명 함수
- 함수 선언문은 호이스팅이 가능합니다.
add(1,2); // 3
function add(a, b) {
return a + b;
}
익명 함수, 화살표 함수
- 함수 표현식은 호이스팅이 불가능합니다.
add(1,2); // error: add not defined
const add = function (a, b) {
return a + b;
}
plus(1,2); // error: plus not defined
const plus = (a, b) => a + b;
Closure
클로저는 특정 함수가 자신이 정의된 스코프 외부의 변수를 참조하는 경우, 그 변수를 포함하는 "가방"과 같은 역할을 합니다. 화살표 함수를 사용하면 클로저를 더 간단하게 선언하고 사용할 수 있습니다.
일반 함수를 사용한 클로저
function a(x) {
let y = x + 1;
return function b() {
return x + y;
}
}
a(1)(); // 3
화살표 함수를 사용한 클로저
const add = x => {
let y = x + 1;
return () => x + y;
}
add(1)(); // 3
이처럼 화살표 함수와 일반 함수는 JavaScript에서 중요한 역할을 수행하며, 각각의 특징과 차이점을 이해하는 것은 효율적이고 간결한 코드 작성에 매우 중요합니다.
화살표 함수는 간결하고 직관적인 문법으로 많은 개발자에게 사랑받고 있지만, this의 바인딩 방식, arguments 객체의 사용, 생성자 함수로의 사용 불가, 호이스팅의 차이 등을 고려하여 상황에 맞게 적절한 함수 형태를 선택하는 것이 중요합니다.
이러한 차이점들을 이해하고 올바르게 활용한다면, JavaScript의 기능을 보다 효과적으로 사용하여 더욱 풍부하고 다양한 애플리케이션을 개발할 수 있을 것입니다.
참고 자료:
- Differences between arrow and regular functions
- Difference Between Regular Functions and Arrow Functions
- Understanding JavaScript Function
이 글을 통해 화살표 함수와 일반 함수의 차이점에 대해 명확하게 이해할 수 있기를 바랍니다.