✨ 화살표 함수🏹 와 일반 함수 👍는 뭐가 다를까?

1. 문법 : 함수 선언 방식

일반 함수

function sayHello() {
  return "Hello, world!";
}

function + 함수명 으로 시작한다.

---

화살표 함수

const sayHello = () => "Hello, world!";

function 대신 함수명과 => 기호를 써서 쓴다. 일반적으로 한 줄 정도라면 {} 나 return은 생략 가능 OK

2. this 키워드 차이

여기 별표 다섯개 🌟⭐🌟⭐⭐🌞🌞🌟⭐

const person = {
    name: "철수",
    //일반 함수
    sayHi: function() {
        console.log(`${this.name}가 인사합니다!`);
    },
    //화살표 함수
    sayHiArrow: () => {
        console.log(`${this.name}가 인사합니다!`);
    }
};

person.sayHi();        // 출력: "철수가 인사합니다!"
person.sayHiArrow();   // 출력: "undefined가 인사합니다!"

this 는 좀 재밌는 친구다.
일반 함수에서의 this는 약간 상식선에서 행동한다고 생각하면 좋다. 대충... 되겠지? 될 것 같은데? 하고, 상단의 코드를 보면 대충 철수가 나올 것 같다 싶을 때 철수가 나온다. 이거는 안 나오려나..? 하면 보통 undefined가 출력된다.

일반 함수에서의 this는 함수가 호출되는 시점에서 정의된다. 상황에 따르게 다르게 동작한다.

화살표 함수에서는 예외없이 함수의 상위 스코프를 가리킨다. (*상단 예시에서 또한 window.name or global.name 이어서 대부분 undefined 출력)

2-1. 클래스와 this

class Superhero {
    constructor(name) {
        this.name = name;
    }

    // 일반 함수를 메서드로 사용
    introduceSelf() {
        console.log(`안녕하세요, 저는 ${this.name}입니다!`);
    }

    // 화살표 함수를 클래스 필드로 사용
    flyAway = () => {
        console.log(`${this.name}이 날아갑니다!`);
    }
}

const superman = new Superhero("슈퍼맨");
superman.introduceSelf();  // 출력: "안녕하세요, 저는 슈퍼맨입니다!"
superman.flyAway();        // 출력: "슈퍼맨이 날아갑니다!"

const introduce = superman.introduceSelf;
const fly = superman.flyAway;

introduce();  // 출력: "안녕하세요, 저는 undefined입니다!"
fly();        // 출력: "슈퍼맨이 날아갑니다!"

따로 빼내서 호출하면 일반 함수의 경우 this가 undefined가 되는 모습을 확인할 수 있다. 화살표 함수는 멀쩡하다.
(물론 화살표 함수의 경우에도 프로토 타입 매서드로 직접 정의하면 undefined가 나올 수도 있다고 한다.)

...2편에 계속 👀