자바스크립트 공부하기 - 화살표 함수 💭

 

매번 등장할 때 마다, 조금 헷갈려서 이번 기회에 열심히 공부 해보자. 화살표 함수 !

---

1. 간단한 화살표 함수 예제

// 전통적인 함수 표현식
const add = function(a, b) {
  return a + b;
};

// 화살표 함수 표현식
const addArrow = (a, b) => a + b;

console.log(add(3, 4)); // 7
console.log(addArrow(3, 4)); // 7

위 예제에서 addArrow는 전통적인 함수 add와 동일한 역할을 합니다. 하지만 화살표 함수를 사용하면 코드가 더 간결해지죠.

 

2. 매개변수가 하나일 때

// 매개변수가 하나일 때 괄호를 생략할 수 있어요.
const square = x => x * x;

console.log(square(5)); // 25

3. this와 화살표 함수

화살표 함수는 자기 자신만의 this를 가지지 않아요. 대신, 화살표 함수 내부의 this는 함수가 정의된 위치에서의 this 값을 그대로 사용합니다.

// 전통적인 함수
function Person(name) {
  this.name = name;
  setTimeout(function() {
    console.log(this.name); // undefined (setTimeout의 this는 글로벌 객체)
  }, 1000);
}

// 화살표 함수
function PersonArrow(name) {
  this.name = name;
  setTimeout(() => {
    console.log(this.name); // "John" (화살표 함수는 부모 scope의 this를 그대로 사용)
  }, 1000);
}

const person1 = new Person("John");
const person2 = new PersonArrow("John");

---

 

 

..? 무슨 소리 일까나요..

쉽게 공부해보자..

 

---

this에 대한 개념을 비유와 함께 더 쉽게 설명해 볼게요.

1. 일반 함수에서 this (동적 바인딩)

비유: this를 **"주인"**이라고 생각해 보세요.

• 일반 함수에서는 누가 함수를 부르는지에 따라 주인이 바뀌어요.
• 예를 들어, "가게 주인"이 함수를 부르면 그 주인이 누구냐에 따라 다른 사람이 될 수 있어요.

예시: "가게 주인"이 부를 때 this가 바뀌는 경우

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

// 가게 주인이 부를 때
person.greet();  // 출력: "John"

여기서 this는 "가게 주인"인 person을 가리킵니다.

예시: 다른 사람이 부를 때 this가 바뀌는 경우

const greetFunction = person.greet;  // 'greet' 함수를 다른 곳에 할당
greetFunction();  // 출력: undefined

이때 greetFunction을 호출하면 this는 주인인 person이 아니라 다른 곳을 가리키게 돼요. 그래서 undefined가 나오는 거죠.

결론: 일반 함수에서는 this가 누가 호출하느냐에 따라 동적으로 결정돼요. 주인이 누구냐에 따라 다르게 행동해요.

 

Q : ㅡ여기서 주인이 바뀐 이유가 함수를 다른 곳에 할당을 해서 그런거야 ?

A : 네, 맞아요! 정확히 말하자면, greetFunction을 다른 변수에 할당하는 순간 함수 호출의 문맥(즉, 어떤 객체가 그 함수를 호출하느냐)이 달라지기 때문에 this가 바뀌게 되는 거예요.

왜 this가 바뀌는지?

• 원래 greet 함수는 person 객체 안에 정의되어 있어서 this가 person을 가리킵니다.
• 그런데 greet 함수 자체를 변수에 할당하게 되면, 그 함수는 이제 person 객체와 연결되지 않게 돼요. 그래서 함수가 어떻게 호출되느냐에 따라 this가 달라집니다.

 

 

2. 정적 (Static) this - 화살표 함수에서

반면, 화살표 함수는 this가 정적으로 결정됩니다. 즉, 화살표 함수는 정의된 시점에 this를 고정시킵니다. 이때의 this는 **함수가 정의될 때의 this**를 그대로 사용해요.

 

비유: 화살표 함수는 "주인"이 항상 고정돼요.

• 화살표 함수는 누가 부르든, 항상 자신이 처음에 설정된 주인을 그대로 따르기로 결심한 함수예요.
• 즉, 주인이 바뀌지 않아요. 처음에 정해진 대로 계속 그 주인을 따릅니다.

예시: 정적 this (화살표 함수)

const person = {
  name: "John",
  greet: () => {
    console.log(this.name);
  }
};

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

왜 undefined가 출력될까요?

1. 화살표 함수의 this:
   • 화살표 함수는 자기 자신이 정의된 시점의 this를 기억해요. 즉, 화살표 함수가 어디서 정의되었냐에 따라 this가 결정됩니다.
2. 여기서 greet 함수는 person 객체 내에 정의되어 있지만, 화살표 함수는 객체 내에서 정의되었기 때문에 그 this는 **person을 가리키는 것이 아니라, greet 함수가 정의된 바깥(즉, 전역 객체)을 가리키게 돼요.
   • **브라우저 환경에서는 전역 객체가 window이고, 노드 환경에서는 global**이기 때문에 this가 전역 객체를 가리키게 됩니다.
3. 전역 객체에는 name이라는 속성이 없기 때문에 this.name은 **undefined**가 됩니다.