[Javascript] New Javascript 2장 - 화살표 함수

✅ 1. 화살표 함수란?

Javascript의 화살표 함수(Arrow Function)은 ES6(ECMAScript 2015)에 도입된 간결한 함수 표현식 문법으로 function 키워드 대신 => (화살표)를 사용하여 함수를 작성합니다. 주로 익명 함수, 콜백 함수 작성 시 더 짧고 간결하게 쓰기 위해 사용합니다.

• 특징
  
  • function 키워드 없이 작성 가능 -> 코드의 간결함
  • 함수 내부 this가 상위 스코프의 this를 그대로 사용
  • 익명 함수가 주로 쓰임 -> 이벤트 핸들러, 콜백에 적합
  • arguments 객체가 없음 (필요시 나머지 매개변수 사용)

---

✅ 2. 기본 문법

화살표 함수는 기본적으로 function 대신 => 기호를 사용해 함수를 정의합니다. 함수 몸체가 한 줄이라면 중괄호( { } )와 return 키워드를 생략할 수 있습니다.

// 일반 함수 선언 방식
function sum(a, b) {
  return a + b;
}

// 화살

// 화살표 함수 선언 방식
const sum = (a, b) => {
  return a + b;
};

// 더욱 간결하게 (한 줄일 때는 return과 중괄호 생략가능함)
const sum = (a, b) => a + b;

console.log(sum(1, 2));

• 화살표 함수는 function 대신 => 를 사용해 함수 정의
• 함수 몸체가 한 줄이면 중괄호 {}와 return 키워드 생략 가능

---

✅ 3.this 바인딩 차이

일반 함수는 호출될 때 this가 다를 수 있으나 화살표 함수에서는 선언 시 위치의 this를 고정시켜 사용하며 객체 메서드에 화살표 함수를 쓰면 this의 의도가 다를 수 있습니다.

const obj = {
  value: 20,
  normalFunc: function () {
    console.log(this.value); // 20
  },
  arrowFunc: () => {
    console.log(this.value);
  },
};

obj.normalFunc(); // 20
obj.arrowFunc(); // undefined

---

✅ 4. 매개변수와 반환 값

• 매개변수가 하나일 때

// 매개변수가 하나일 때 - 괄호 생략 가능
const x = 2;
const double = x => x * 2;
console.log(double(x)); // 4

• 매개변수가 없을때

// 매개변수가 없을 경우 - 빈 괄호 ( ) 필수
const sayRun = () => console.log("Run");
sayRun();

• 여러 매개변수

// 여러 매개변수 - 괄호 필수
const sum = (a, b) => a + b;
console.log(sum(15, 2));

• 객체 바로 반환하기

// 객체 바로 반환 - 객체 리터럴 반환 시 소괄호로 감싸야 함
const getObj = () => ({ key: "value" });

console.log(String(getObj().key));

---

✅ 화살표 함수의 장단점

• 장점
  
  • 간결하고 읽기 쉬움
  • this 바인딩이 일관적이며 콜백 함수에 유용
  • 익명 함수 작성 시 코드량 절약
• 단점
  • 자신만의 this가 없어 일반 함수처럼 동작하지 않을 때도 있음
  • 생성자 함수(constructor)로 사용할 수 없음(new 연산자 불가능)
  • arguments 객체 없음 (필요시 별도로 처리)

---

 

GitHub - javascript-only/newJSRoom: https://thinky.tistory.com/category/Front-End/JavaScript