[JavaScript] Arrow function

➡️화살표 함수(Arrow function)의 개념

화살표 함수란?

화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있습니다.

화살표 함수 기본 문법

const functionName = (parameter1, parameter2, ...) => {
  // 함수의 로직
  // 함수의 실행문들...
  return returnValue; // 반환 값 (optional)
};

• functionName: 함수의 이름을 정의하지 않고, 변수에 할당하여 사용합니다.
• parameter1, parameter2, ... : 함수에 전달할 매개변수들을 정의합니다.
• =>: 화살표(=>)를 사용하여 함수를 선언합니다.
• {}: 중괄호({})로 함수의 본문을 감싸고, 함수의 로직을 작성합니다.
• return returnValue;: 함수가 값을 반환할 때 사용합니다. return 키워드를 이용하여 반환하고자 하는 값(반환 값)을 지정합니다. 이 부분은 필요에 따라 생략 가능합니다. 만약 생략하면 함수는 암묵적으로 undefined를 반환합니다.

화살표 함수의 특징

1. 간결한 문법
   : 화살표 함수는 단순한 함수를 더 짧고 간결하게 표현할 수 있습니다. 단일 표현식의 결과를 자동으로 반환하며, {}와 return 키워드를 생략할 수 있습니다.

2. 생성자로 사용 불가
   : 화살표 함수는 생성자로 사용할 수 없습니다. new 키워드와 함께 호출할 경우 에러가 발생합니다.

3. 익명 함수
   : 화살표 함수는 익명 함수로서, 변수에 할당하여 사용하는 것이 일반적입니다. 함수 이름을 생략할 수 있습니다.

4. arguments 객체
   : 화살표 함수는 자체적인 arguments 객체를 가지지 않으며, 주변 스코프의 arguments를 사용합니다.

5. this 바인딩
   : 화살표 함수는 자체적인 this를 생성하지 않고, 주변 스코프의 this를 상속받습니다. 일반 함수의 this 동작과 다르게, this가 고정되어 해당 함수를 감싸고 있는 객체의 this와 동일하게 동작합니다.
   (밑에서 자세하게 설명합니다...)
   
   arguments: 함수 내에서 사용 가능한 특별한 객체로, 함수가 호출될 때 전달된 모든 인자들을 담고 있습니다.
   
   

일반 함수와 화살표 함수 생김새 비교

예시와 같은 짧은 코드는 화살표 함수를 사용하는 것이 유리하다.

• 일반 함수

function add(a, b) {
  return a + b;
}

• 화살표 함수

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

---

🌼JavaScript의 this 바인딩

1. 일반 함수에서의 this 바인딩

함수가 호출될 때 어떤 객체에 묶이는지를 가리키는 특수한 값

---

1. 함수를 일반적으로 호출할 때

function showThis() {
  console.log(this);
}

showThis();
// 출력: window (브라우저 환경에서)
// 출력: global (Node.js 환경에서)

: 일반적인 방법으로 함수를 호출하면, this는 전역 객체를 가리킵니다. 예를 들면 브라우저 환경에서는 전역 객체가 window이고, Node.js 환경에서는 전역 객체가 global입니다.


2. 메서드로서 호출할 때

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

person.greet(); // 출력: Yejin

: 함수가 객체의 메서드로서 호출되면, this는 해당 메서드를 호출한 객체를 가리킵니다.


3. 함수를 객체에서 분리하여 호출할 때

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

const greetFunc = person.greet;
greetFunc(); // 출력: undefined

// bind() 메서드를 사용하여 this 바인딩 설정
const boundGreetFunc = person.greet.bind(person);
boundGreetFunc(); // 출력: Yejin

: 함수를 객체에서 분리하여 호출하면 this는 전역 객체를 가리킵니다. 이를 방지하기 위해 bind() 메서드를 사용하여 this를 명시적으로 바인딩할 수 있습니다.

2. 화살표 함수에서의 this 바인딩

화살표 함수는 자체적인 this 바인딩을 갖지 않고, 주변 스코프(화살표 함수가 감싸고 있는 함수 또는 블록 스코프)의 this를 상속

---

const obj = {
  name: 'Alice',
  sayHelloArrow: () => {
    console.log(`안녕하세요, 저는 ${this.name}입니다.`);
  }
};

obj.sayHelloArrow(); // 출력: 안녕하세요, 저는 undefined입니다.

: obj.sayHelloArrow()를 호출하면 화살표 함수 내에서 this는 obj 객체의 this가 아닌 주변 스코프인 전역 객체의 this를 상속합니다. 따라서 this.name은 전역 객체에 name이 없으므로 undefined를 출력합니다.

🌴화살표 함수를 사용하는 이유

주로 코드의 간결성과 this 바인딩의 편리함을 위해 화살표 함수를 사용합니다. 하지만 특히 메서드로 사용되는 경우와 this가 중요한 상황에서는 적절한 유형의 함수를 선택하여 사용하는 것이 중요합니다.

1. 간결한 문법
   : 화살표 함수는 단일 표현식을 자동으로 반환하고, {}와 return 키워드를 생략할 수 있습니다. 이로 인해 코드가 더 간결해지고 가독성이 좋아집니다.

2. 상위 스코프의 this 사용
   : 화살표 함수는 자체적인 this 바인딩이 없으며, 주변 스코프(화살표 함수를 감싸고 있는 함수 또는 블록 스코프)의 this를 상속합니다. 이로 인해 this를 명시적으로 바인딩하지 않아도 부모 함수의 this를 쉽게 사용할 수 있습니다.

3. arguments 객체 사용 대체
   : 화살표 함수는 자체적인 arguments 객체를 가지지 않으며, 대신 전개 연산자 ...args를 사용하여 인자들을 처리합니다. 이를 통해 화살표 함수 내에서 인자들을 더 직관적으로 다룰 수 있습니다.

4. 콜백 함수 사용 시 편의성
   : 콜백 함수로 많이 사용되는 함수들이 화살표 함수로 간결하게 표현될 수 있습니다. 특히 배열 메서드(map(), filter(), reduce() 등)와 같이 반복 작업을 수행할 때 화살표 함수를 사용하면 코드가 간결해지고 가독성이 높아집니다.

5. 전역 객체의 this 문제 회피
   : 일반 함수는 호출 방법에 따라 전역 객체를 가리키는 this 바인딩 문제가 발생할 수 있습니다. 하지만 화살표 함수는 자체적인 this 바인딩이 없어서 이러한 문제를 회피할 수 있습니다.

6. 함수 리터럴로 사용할 때 편의성
   : 객체의 메서드나 프로퍼티로 함수를 할당할 때, 화살표 함수를 사용하면 보다 간결한 코드를 작성할 수 있습니다.

⭐화살표 함수와 this 바인딩 요약

• 화살표 함수는 간결한 문법과 자체적인 this 바인딩이 없어서 주변 스코프(함수를 감싸고 있는 스코프)의 this를 상속합니다.

• 일반 함수는 호출 방법에 따라 동적으로 this가 결정되지만, 화살표 함수는 자체적인 this가 없어서 전역 객체의 this 바인딩 문제를 회피할 수 있습니다.

• 객체의 메서드로 사용할 때, 화살표 함수는 부모 객체의 this를 간편하게 사용할 수 있어서 코드를 더 간결하게 만듭니다.

• 화살표 함수는 arguments 객체를 가지지 않으며, 전개 연산자(...)를 사용하여 인자들을 처리합니다.

• 주로 간결한 콜백 함수나 반복 작업에 활용되며, this 바인딩과 this를 명시적으로 설정하는 번거로움을 줄여줍니다. 단, 메서드에서 this를 중요하게 사용하는 경우에는 일반 함수를 고려해야 합니다.