화살표 함수와 일반 함수 차이
JAVASCRIPT
해당 포스팅에서는 자바스크립트의 화살표 함수와 일반 함수 차이 에 대해 다룹니다.
JAVASCRIPT
- 자바스크립트 장단점
- 데이터 타입
- 데이터 형 변환
- 불변성을 유지하려면 어떻게..
- 프로토타입
- var, let, const 차이
- 호이스팅(Hoisting)
- es6 문법 특징과 차이
- this
- 제이쿼리 메서드 중 attr(), prop() 차이
- 화살표 함수와 일반 함수 차이 ✔️
- 스코프(scope)
- 객체 지향
- 클로저(closure)
- 타입스크립트
- 프로세스
- 스레드, 싱글 스레드
- 콜백 함수 / 재귀 함수 차이
- 콜백 지옥, 콜백 지옥을 해결하는 방법
- promise / 콜백 지옥
- ajax
- 함수 선언식/ 표현식 차이
- 이벤트 버블링 / 이벤트 캡처 예시
- 이벤트 위임 (Event Delegation)
- 렉시컬 환경
- 프로퍼티
- stack이 코드 실행할 때 queue에 미뤄두는 것
- 얕은 복사 / 깊은 복사
- 동기 / 비동기
화살표 함수와 일반 함수 차이
해당 포스팅에서는 화살표 함수와 일반 함수 차이 에 대해 다룹니다.
함수의 기본 개념
화살표 함수 (Arrow Function)
화살표 함수는 ES6에서 도입된 새로운 함수 선언 방식 입니다. 함수 표현식의 간결한 문법으로, 특히 익명 함수 및 콜백 함수로 자주 사용 됩니다. 화살표 함수는 function 키워드를 사용하지 않고, 화살표(=>)를 사용하여 정의 합니다.
일반 함수 (Regular Function)
일반 함수는 기존의 함수 선언 방식 으로, function 키워드를 사용하여 정의 됩니다. 전통적으로 사용되며, 다양한 함수 선언 방식이 존재 합니다.
함수의 문법 차이
화살표 함수 (Arrow Function)
1
2
3
4
5
6
const add = (a, b) => {
return a + b;
};
// 더 간결하게
const add = (a, b) => a + b;
일반 함수
1
2
3
4
5
6
7
8
function add(a, b) {
return a + b;
}
// 함수 표현식으로 선언할 때
const add = function(a, b) {
return a + b;
};
this 바인딩 차이
화살표 함수
화살표 함수는 자신만의 this 바인딩을 가지지 않습니다. 대신, 화살표 함수 내부의 this는 자신이 정의된 환경(상위 스코프)의 this를 상속 받습니다. 아래 예제에서, regularFunction은 호출된 객체 obj를 this로 참조 합니다. 반면, arrowFunction은 자신이 정의된 환경인 전역 스코프의 this를 참조하여 undefined를 출력 합니다.
1
2
3
4
5
6
7
8
9
10
11
12
const obj = {
value: 42,
regularFunction: function() {
console.log(this.value); // 42
},
arrowFunction: () => {
console.log(this.value); // undefined
}
};
obj.regularFunction(); // 42
obj.arrowFunction(); // undefined
일반 함수
일반 함수는 호출 방식에 따라 this 바인딩이 동적으로 결정 됩니다. 즉, 함수가 어떻게 호출되었느냐에 따라 this가 달라집니다.아래 예제에서, obj.regularFunction은 obj의 컨텍스트에서 호출되므로 this는 obj를 참조 합니다. 하지만 func로 할당된 후에는 전역 컨텍스트에서 호출되므로 this는 전역 객체(window 또는 global)를 참조 하게 됩니다.
1
2
3
4
5
6
7
8
9
10
11
const obj = {
value: 42,
regularFunction: function() {
console.log(this.value);
}
};
obj.regularFunction(); // 42
const func = obj.regularFunction;
func(); // undefined
arguments 객체
화살표 함수
화살표 함수는 arguments 객체를 자체적으로 가질 수 없습니다. 대신, 상위 스코프의 arguments 객체를 참조 합니다.
1
2
3
4
5
6
7
8
9
10
11
12
const arrowFunction = () => {
console.log(arguments); // ReferenceError
};
function regularFunction() {
const arrowFunctionInside = () => {
console.log(arguments); // regularFunction의 arguments
};
arrowFunctionInside(1, 2, 3);
}
regularFunction(1, 2, 3);
일반 함수
일반 함수는 호출된 함수의 인자를 담고 있는 arguments 객체를 가집니다.
1
2
3
4
5
function regularFunction() {
console.log(arguments); // [Arguments] { '0': 1, '1': 2, '2': 3 }
}
regularFunction(1, 2, 3);
생성자 함수로 사용 가능 여부
화살표 함수
화살표 함수는 new 키워드를 사용한 생성자 함수로 사용할 수 없습니다. 생성자 함수는 this를 인스턴스 객체에 바인딩 하지만, 화살표 함수는 자신만의 this 바인딩을 가지지 않기 때문입니다.
1
2
3
4
5
const Person = (name) => {
this.name = name;
};
const person = new Person('Alice'); // TypeError: Person is not a constructor
일반 함수
일반 함수는 new 키워드를 사용하여 생성자 함수로 사용할 수 있습니다. 생성자 함수로 호출될 때, this는 새로 생성된 인스턴스를 참조 합니다.
1
2
3
4
5
6
function Person(name) {
this.name = name;
}
const person = new Person('Alice');
console.log(person.name); // Alice
마무리
화살표 함수와 일반 함수는 this바인딩, arguments객체, 생성자 함수로의 사용 여부 등에서 중요한 차이점 이 있습니다. 화살표 함수는 더 간결한 문법을 제공하고 상위 스코프의 this를 사용하기 때문에 콜백 함수나 메서드 내부 함수로 자주 사용 됩니다. 반면, 일반 함수는 더 유연한 this 바인딩과 arguments객체를 가지고 있어 다양한 상황에서 사용 될 수 있습니다. 화살표 함수와 일반 함수의 차이점을 이해하고 적절히 사용하는 것은 자바스크립트 코드를 더 효과적이고 오류 없이 작성하는 데 매우 중요합니다.