JS 지식_2. 화살표 함수와 this, new

Derek·2021년 6월 3일
11

JS_knowledge

목록 보기
2/4
post-thumbnail

this 게시물의 2번째 외전을 다뤄봅니다.


this 에 대한 정의를 다시 정리하자면,

  1. 일반 함수 내부 / 메소드 내부에서 쓰였을 때

    • this 값: 현재 위치에 있는 함수를 호출한 객체

      • 일반 함수: this는 window
      • 메소드: this는 메소드를 포함하는 객체
  2. 생성자 내부에서 쓰였을 때

    • this 값: new 로 만들어진 새로운 변수

이렇게 정리할 수 있습니다.

이는 화살표 함수 형태가 아닐때 적용됩니다.


화살표 함수와 this

결론부터 말하자면,

화살표 함수 내부에는 고유한 this 가 존재하지 않습니다.

다만, 화살표 함수 안에서 this 를 사용한다면 외부 함수에서 this 를 가져옵니다.

여러가지 예시를 준비했어요.

사용 예시 1.

let user = {
  firstName: "석기",
  sayHi() {
    let arrow = () => console.log(this);
    arrow();
  }
};

user.sayHi() 

이를 실행하면, 다음과 같이 출력됩니다.

  1. 상단 코드에서 arrow 함수가 화살표 함수입니다.

  2. 그 내부에서 this 를 호출했으니, 외부함수에서 그 값을 찾습니다.

  3. 외부함수인 user.sayHithis 값인, user 객체가 당첨!

🎈 user.sayHi 는 메소드이므로, 그 메소드를 포함하는 객체가 this 죠! 여기를 참고하면 이해가 쉽습니다.


🤪 정말 그 외부함수의 this를 가르키는지 확인해봅시다.

let tmp = null;

let user = {
  firstName: "석기",
  sayHi() {
    let arrow = () => tmp = this;
    arrow();
  }
};

user.sayHi();

console.log(tmp === user)

위 사진을 봅시다.

  1. user.sayHi() 실행.

  2. arrow() 를 실행.

  3. 화살표 함수 내부에서 전역변수 tmpthis 를 할당.

  4. console.log(tmp === user) 로 확인, -> true 반환.


이렇게, 다음과 같은 사실은 확실해졌습니다.

화살표 함수 내부에서 this외부함수의 this이다.


이걸 왜 쓸까?

❗ 결론충 다시 등장! 결론은,

외부 컨텍스트에 있는 this를 이용하고 싶은 경우 유용합니다.

??

예시.. 예시가 편해..

사용 예제 2.

let group = {
  title: "1모둠",
  students: ["석기", "준영", "현주", "이나"],

  showList() {
    this.students.forEach(
      student => console.log(this.title + ': ' + student);
    );
  }
};

group.showList();

이 결과는, 아래 화면과 같다.

  1. 화살표 내부에서 this 를 호출했고, 그 thistitle 를 사용합니다.

  2. 화살표 내부의 this === 외부함수의 this 이므로, 결국 group 객체가 그 값 당첨.

  3. this.studentsgroup.students , this.titlegroup.title 이 된다!


이걸 화살표함수를 쓰지 않는다면, 다음과 같이 처참해진다.

let group = {
  title: "1모둠",
  students: ["석기", "준영", "현주", "이나"],
  
  showList() {
    this.students.forEach(function(student) {
      console.log(this)
    });
  }
};
group.showList()

forEach 내부에서 쓰인 함수는 화살표가 아니라, 일반함수로 선언되었다!

-> 전역객체를 가르킨다! 즉, Window 객체가 튀어나온다.

그러니까, 자연스럽게 외부 this 를 쓰고 싶으면 화살표 함수쓰면서 this 쓰면 되겠다.


사용 예제 3.

그렇다면 다음 예제에서는 뭐가 나올까??

let user = {
  name: "Samantha Quinn",
  speak: () => {
    console.log(this);
  },
};

user.speak();

user 객체가 나온다 생각했다면,

내가 그렇게 생각했음.

왜 아닐까? 차근차근 살펴보자.

  1. user 는 객체다.

  2. username 프로퍼티와, 메소드가 아닌 화살표 함수 speak 가 있다.

메소드가 아니라 화살표 함수이므로, user 객체 내부의 thisspeakthis 다.

즉, Window 가 찍힌다.


newthis

자, 천천히 생각해보자. 여기를 참고하면서, 천천히.

1. 어떤 전역변수, box 가 있다고 하자.

let box = null;

2. 어떤 함수 A 가 있다고 하자.

function A() {
	box = this;
}
  • A 함수를 수행시키면, 전역변수 box 값을 this 로 조정한다.

3. 그냥 A() 를 실행하면, box 에는 Window 객체가 들어간다.

  • 일반함수로 선언했고, 이는 window.A() 랑 같으니까.

4. 2번의 A 함수를 생성자로 불러보고, box 에 뭐가 들어가는지 보자.

let parcel = new A();

console.log(box === parcel)

box 에는, new 로 만들어진 객체가 들어간다.

즉, A() 를 생성자로 호출할때, A 함수 내부 thisparcel 객체를 할당한다.

🎆 어떤 함수가 생성자로 호출되면, 그 함수 내부 this 에는 만들어진 객체를 할당한다.

결론: 화살표 함수는 new 와 쓰일 수 없다.

왜?

  • 화살표 함수에는 this 가 없음.

  • 생성자로 쓸라면 그 함수 내부에 thisnew 로 만들어진 객체를 집어넣어야함.

  • 집어넣을 공간이 없음.

따라서, 화살표 함수는 new 와 쓰일 수 없습니다.


글이 좀 길어져서, bindapply , call 은 다음 게시물에서 다루겠습니다.

잘못된 내용이 있다면 댓글로 알려주세요 :)

profile
Whereof one cannot speak, thereof one must be silent.

2개의 댓글

comment-user-thumbnail
2021년 6월 7일

명쾌한 해설 감사합니다~
this 정말 처음 배우면 헷갈리더라고요 ㅠㅠ

1개의 답글