자바스크립트 화살표함수 특징

화살표 함수의 주요 특징

화살표 함수는 ES6에서 도입된 함수 표현식으로, 더 간결한 문법과 특별한 동작 방식을 가지고 있습니다.

---

1. 간결한 문법

• 함수 선언을 더 짧게 작성할 수 있습니다.
• 중괄호와 return 키워드를 생략 가능 (단, 표현식이 한 줄일 때만).

javascript 코드

 

// 일반 함수

const add = function (a, b) {

     return a + b;

};

 

// 화살표 함수

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

// `return`과 중괄호 생략

---

2. this 바인딩

• 화살표 함수는 this를 상위 스코프의 this로 결정합니다.
• 일반 함수와 달리, 호출 위치가 아닌 선언 위치에 따라 this가 고정됩니다.

javascript

const obj = {

   value: 42,

   method: function () {

       const arrow = () => this.value; // `this`는 `method`의 `this`를 상속

       return arrow();

    },

}; console.log(obj.method()); // 42

예외: 전역 스코프에서 사용하면 this는 전역 객체를 참조

• 브라우저 환경: window
• Node.js 환경: global

javascript

const arrow = () => this;

console.log(arrow()); // window (브라우저) 또는 global (Node.js)

---

3. arguments 객체 없음

• 화살표 함수는 arguments 객체를 사용할 수 없습니다.
• 대신, **스프레드 연산자(...args)**를 사용해야 합니다.

javascript

const normalFunc = function () {

    console.log(arguments); // 유사 배열 객체

};

   const arrowFunc = (...args) => { console.log(args); // 배열

};

   

normalFunc(1, 2, 3); // [1, 2, 3] arrowFunc(1, 2, 3); // [1, 2, 3]

---

4. new 키워드 사용 불가

• 화살표 함수는 생성자 함수로 사용할 수 없습니다.
• prototype 속성이 없기 때문에 new를 사용할 경우 오류가 발생합니다.

javascript

const Person = (name) => { this.name = name; }; // 오류: 화살표 함수는 생성자로 사용할 수 없음 const p = new Person("John"); // TypeError

---

5. 메서드로 적합하지 않음

• 객체 메서드 정의에는 적합하지 않습니다.
• 이유: this가 객체를 참조하지 않고 상위 스코프의 this로 고정됩니다.

javascript

const obj = { name: "Alice", getName: () => this.name, // `this`는 전역 객체를 참조 };

console.log(obj.getName()); // undefined

---

6. 코드 블록에서 명시적 return 필요

• 중괄호 {}를 사용하면 명시적으로 return을 작성해야 합니다.

javascript

// 중괄호 사용 시 const square = (x) => { return x * x; }; // 중괄호 생략 시 const square = (x) => x * x;

---

7. 익명 함수만 가능

• 화살표 함수는 항상 익명 함수로만 동작합니다. 이름을 가질 수 없습니다.

javascript

const func = () => console.log("Hello"); // 익명 함수

---

화살표 함수의 사용 시기

• 콜백 함수 (예: map, filter, reduce 등).
• this를 상위 스코프에서 고정해야 하는 경우.
• 간결한 함수 표현이 필요한 경우.

일반 함수와 화살표 함수 비교:

특징일반 함수화살표 함수

this 바인딩	호출 위치에서 결정	선언된 스코프에서 상속
arguments 사용	가능	사용 불가 (...args로 대체)
new 사용	가능 (생성자 함수로 사용 가능)	불가능
코드 문법	더 길고 명확	더 간결