[JavaScript] this와 arrow function 연습

this를 사용해 '안녕 나는 지지'를 출력해보자

문제

var 사람 = {
    name: '지지',
}
사람.sayHi(); //안녕 나는 지지

 

나

var 사람 = {
    name: '지지',
    sayHi: function () {
        console.log('안녕 나는');
        return this.name
    }
}
사람.sayHi();

지지가 출력되지 않음

살펴보니 return을 쓴 게 문제였다.

return은 콘솔창에 출력되지 않고, 값을 대체해준다.

그렇다면 console.log 안에 this를 사용해야 하며, arrow function은 사용하면 안 된다.

var 사람 = {
    name: '지지',
    sayHi: function () {
        console.log('안녕 나는 ' + this.name);
    }
}
사람.sayHi();

 

 

return에 대해 더 써보자면

function 계산(x) {
    return x * x;
}
계산(3);

이렇게 쓰면 콘솔창에 아무 것도 찍히지 않는 반면

function 계산(x) {
    return x * x;
}
console.log(계산(3)); //9

이렇게 console.log로 감싸게 되면 콘솔창에 찍히게 된다.

 

---

this를 사용해 오브젝트 안의 데이터를 전부 더해보자

문제 (중괄호 내에 코드 작성X)

var obj = {
    data: [0,1,2,3,4]
};
obj.더하기();

 

중괄호 내에 코드를 작성하지 않으면서 obj의 배열을 가져와서 출력할 수 있어야하기 때문에

obj.더하기 = function () { }

이렇게 코드를 작성하고 기능을 개발해주면 된다.

이 코드는 중괄호 밖에서 함수를 작성해도 더하기라는 함수를 obj에 추가로 제작하여 포함되기 때문에 데이터를 받아올 수 있다.

(obj의 더하기 함수니까)

var obj = {
    data: [0, 1, 2, 3, 4]
};
obj.더하기 = function () {
    var 합 = 0;
    this.data.forEach(function (a) {
        합 = 합 + a;
    });
    console.log(합);;
}
obj.더하기();

출력값

 

---

setTimeout에서 this 사용

'버튼입니다'라는 버튼을 눌렀을 때 1초 뒤 콘솔창에 '버튼입니다'가 찍히게 해야한다.

 

document.getElementById('btn').addEventListener('click', function () {
    setTimeout(function () {
        console.log(this.innerHTML)
    }, 1000)
});

처음에 이렇게 코드를 쓰니 undefined가 나왔다.

 

출력값

undefined가 나오는 이유는 this는 가장 가까운 function의(setTimeout 뒤) this이고 이 function은 일반 함수이기 때문에 window가 된다.

그렇다면 window의 innerHTML은? => 아무것도 안 나옴!

 

document.getElementById('btn').addEventListener('click', function () {
	this.innerHTML
    setTimeout(function () {
        console.log(this.innerHTML)
    }, 1000);
});

2번째 줄의 this.innerHTML은 잘 출력이 됐었으니 이 this값을 setTimeout에서도 쓸 수 있게끔 만들어야 한다.

이 때 arrow function을 사용해주자.

document.getElementById('btn').addEventListener('click', function () {
    setTimeout( () => {
        console.log(this.innerHTML)
    }, 1000);
});

출력값

 

만약 arrow function이 아닌 기존 function 문법을 쓰고 싶다면 this값을 변수에다가 저장해주면 된다.

document.getElementById('btn').addEventListener('click', function () {
    var 버튼 = this;
    setTimeout(function () {
        console.log(버튼.innerHTML)
    }, 1000)
});