1.2 화살표함수에서의 this

티스토리 뷰

javascript/모던 자바스크립트

1.2 화살표함수에서의 this

댕댕이발🐾 2018. 11. 29. 16:37

이전에는 화살표 함수의 기본적인 선언방법에 대해 알아보았습니다. 이번엔 화살표 함수의 또하나의 특징인 this에 대해서 알아보겠습니다.

기본적으로 this라 하면 다른 프로그래밍 언어를 했던 경험이 있다면 굉장히 많이 들어봤을 키워드입니다.

public class Book {
    private String title;
    private String author;
    private int price;
    private String publisher;
    
    public Book(String title, String author, int price, String publisher) {
        this.title = title;
        this.author = author;
        this.price = price;
        this.publisher = publisher;
    }
}

대표적으로 자바에서는 생성자를 정의할 때 클래스에서 사용한 변수명과 생성자의 매개변수가 동일할 때 위와 같이 this를 사용하여 내가 초기화 하려는 변수가 클래스에서 선언한 변수라는 것을 명확하게 해주는 것이죠. 그런 의미에서 this를 '자기자신' 이런식으로 번역하기도 하는 것 같습니다.

일단 화살표 함수에서 this가 어떻다고 하는 것을 논하기 전에 this라는 것이 javascript에서는 어떻게 정의되고 쓰이고 있는지 간단하게 정의를 알아보겠습니다.

여기서 중요한 핵심은 노랑색을 칠한 부분입니다. 저게 무슨말인지 코드와 보면서 알아보겠습니다.

(이 부분은 코드종 님의 영상강의를 토대로 진행하였습니다.)

this 의 값이 무엇인지를 알아보기 위해 코드를 작성해보겠습니다.

var one = {
    num : 1,
    number : function() {
        console.log(this)
    }
};
one.number();

이와 같이 코드를 작성하고 크롬 개발자도구에서 콘솔을 확인해보면

저는 this를 콘솔로 찍었고 그 값은 객채형태로 num이 1이라는 것과 number라는 함수가 있다고 볼 수 있겠습니다. javascript의 this 정의에서 this의 값은 함수를 호출한 방법이 결정한다고 하였습니다. 여기서는 함수호출을 one이라는 객체가 한 것이며 거기서 this를 찍으니 one의 객체정보가 나온 것임을 알 수 있습니다.

다음은 함수 호출 방법을 달리 해보겠습니다.

var one = {
    num : 1,
    number : function() {
        console.log(this);
    }
};
var two = one.number;
two();

개발자도구로 결과를 보면

two 라는 변수에 one 객체에 있는 number함수를 넣었더니 this가 이전 결과와는 달라졌습니다. 여기서 window라는 것은 쉽게 말하면 브라우저 상에서 모든 객체의 조상이라고도 하고 전역객체(글로벌객체) 라고도 합니다.

즉, 호출을 window에서 하고있다는 것입니다.

첫번째는 one 이라는 객체에서 함수 호출을 했다면, two는 함수 호출을 전역객체에서 하고있기 때문에 this 라는 콘솔을 찍게되면 전역객체인 window의 모든 정보들이 찍히게 되는 것이죠. 이러면 원래 기대했던 one에서의 num값이나 number라는 함수를 사용할 수가 없습니다.

★ 호출한 객체 === This

this를 window로 가져버리면 사용자가 기껏 만들었던 객체정보를 이용할 수가 없기 때문에 ES5에서 사용하는 것이 bind라는 함수입니다. 개발자도구 콘솔을 확인해보면

bind라는 함수를 사용해서 this를 무조건 one으로 사용하겠다 라고 정해주는 것입니다. 그러면 위의 결과처럼 window가 아닌 처음에 의도했던대로 one의 객체 값들을 this로 갖게 됩니다.

this에 대한 설명이 좀 길어지긴 했는데 그럼 도대체 화살표함수에서 this가 어쨋다는건지를 살펴봐야겠죠?

MDN에서 이런 내용이 있었습니다.

ECMAScript 2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했습니다.

이번엔 html폼에 버튼을 하나 만들어서 확인을 해보도록 하겠습니다.

arrow.html

<!DOCTYPE html>
<html>
 
<head>
    <title>Something</title>
    <meta charset="utf-8" />
</head>
<body>
    <button id='btn' type='button'> 버튼
    <script src='arrow.js'></script>
</body>
 
</html>

arrow.js

1
2
3
4
5
6
7
8
9
10
11
12
13

const btn = document.getElementById('btn')
 
var obj = {
    count : 0,
    setCounter : function() {
        console.log(this.count);
        btn.addEventListener('click',function(){
            console.log(this)
        })
    }
};
 
obj.setCounter();

cs

버튼을 눌렀을 때 this 의 정보를 콘솔로 찍는 것인데 콘솔로 찍히는 것을 확인해보면

obj 의 객체정보가 찍히는 것이 아니라 button의 정보가 this로 찍히는 것을 볼 수 있습니다. this 를 호출한 객체가 button이기 때문에 this는 button의 정보가 찍힐 수 밖에 없죠. obj의 객체정보를 사용하기 위해서는 기존의 bind 함수를 이용했을 때에는

arrow.js

1
2
3
4
5
6
7
8
9
10
11
12
13

const btn = document.getElementById('btn')
 
var obj = {
    count : 0,
    setCounter : (function() {
        console.log(this.count);
        btn.addEventListener('click',function(){
            console.log(this)
        }).bind(this));
    }
};
 
obj.setCounter();

cs

setCounter의 function 부분을 bind 함수를 이용하여 강제적으로 obj를 this 로 만들어주어야 했었습니다.

그럼 이렇게 객체정보를 this로 사용할 수 있게 되었죠

★ 화살표 함수에는 this 가 없다!

const btn = document.getElementById('btn')

var obj = {
count : 0,
setCounter : function() {
console.log(this.count);
btn.addEventListener('click', function() {
console.log(this)
}.bind(this))
}
};

obj.setCounter();

화살표함수는 this를 가지고 있지 않기 때문에 화살표 함수 내에서 this가 사용되었다면 그 this가 무엇인지를 찾으러 올라갑니다.

즉 setCounter이라는 함수가 실행될 때의 this가 화살표 함수 내에서의 this가 되는 것이죠. 그래서 button 내에서 bind 없이 this를 사용해도 button의 정보가 아닌 obj 객체의 정보를 받을 수 있게 되는 것입니다.

처음엔 화살표 함수에는 this 가 없다고 하길래 없는데 쓰면 오류나야하는게 아닌가 하는 1차원적인 생각을 했었는데 화살표 함수 내에서 가지고 있는 this 정보가 없으니 없다고 말할 수도 있겠다 생각이 드네요 ㅋㅋ

저작자표시

'javascript > 모던 자바스크립트' 카테고리의 다른 글

2.2 class의 기본 선언 (0)	2018.12.05
2.1 classes 이전 prototype (0)	2018.12.03
1.3 화살표 함수에서의 arguments (0)	2018.12.03
1.1 화살표함수의 기본 선언 (0)	2018.11.28
ECMAScript 6 튜토리얼 소개 (0)	2018.11.28

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

T3ch

티스토리 뷰

1.2 화살표함수에서의 this

'javascript > 모던 자바스크립트' 카테고리의 다른 글

티스토리툴바