[TIL] 240424 (콜백 함수와 동기/비동기 처리 학습, 화살표 함수의 this 문제)

솔·2024년 4월 24일

목록 보기

21/268

🥞 오늘 한 일

JavaScript 문법 종합반
- 4주차 완료 (콜백 함수와 동기/비동기 처리)
알고리즘 코드카타
- 11 - 짝수와 홀수 (1-10까지는 기존에 푼 문제)
JavaScript 개인 과제 가이드 영상 수강
알고리즘 특강 수강 (09:00, 강창민 튜터님)
학습법 특강 수강 (14:00, 유현승 PM님)
튜터 전수면담 (20:00, 윤기쁨 튜터님)
캠프 대여 맥북 세팅

이것저것 특강 및 면담 등 할 게 많아 내 개인적인 공부 시간이 조금은 부족한 하루였다.
하지만 최소한의 목표였던 JavaScript 문법 종합반 4주차 강의는 다 들어서 다행이다. (비록 이 강의도 n회독 해야할 것 같긴 하다...

🍽️ 문제 해결

화살표 함수의 this

문제

아래 코드를 출력하고, 출력한 결과의 이유를 상세히 설명하는 문제였다.
해당 문제는 JavaScript 문법 종합반 3주차의 숙제였다.

var fullname = 'Ciryl Gane'

var fighter = {
    fullname: 'John Jones',
    opponent: {
        fullname: 'Francis Ngannou',
        getFullname: function () {
            return this.fullname;
        }
    },

    getName: function() {
        return this.fullname;
    },

    getFirstName: () => {
        return this.fullname.split(' ')[0];
    },

    getLastName: (function() {
        return this.fullname.split(' ')[1];
    })()

}

console.log('Not', fighter.opponent.getFullname(), 'VS', fighter.getName());
console.log('It is', fighter.getName(), 'VS', fighter.getFirstName(), fighter.getLastName);

문제점 및 가설

다른 부분들은 이해가 갔는데, 화살표 함수가 사용된 fighter.getFirstName()이 잘 이해가 안 됐다.
화살표 함수 내의 this는 없다고 해서, 해당 this는 상위 스코프의 this가 된다고 하는데, 그럼 상위 스코프라면 fighter가 아닐까? 하는 가설을 세워보았지만, 결과는 fighter의 바깥인 window가 this였다.
또한 화살표 함수 this의 예시로 봤던 게, 바로 아래같은 코드였다.

var obj = {
	outer: function() {
		console.log(this); // (1) obj
		var innerFunc = () => {
			console.log(this); // (2) obj
		};
		innerFunc();
	}
}

obj.outer();

이 경우도 화살표 함수가 내부에 있는데 this가 obj이라면, 왜 문제의 코드는 this가 window일까?
구조가 조금 다르긴 한데...

해결

결국에는 mdn 문서를 통해 명확히 알 수 있었다. 역시 공식 문서가 최고다. 은은하게 혹시나하고 생각하던 것이 맞아 떨어졌다.
문제의 화살표 함수와 예시로 든 화살표 함수는 당연히 다를 수밖에 없다. 예시의 화살표 함수는 outer라는 함수 내부에 있는 화살표 함수이기 때문에, 이미 outer 내부에 this가 가져와져 있는 것이다. 화살표 함수 내에서는 this가 없으므로 상위 스코프인 outer의 this, 즉 'obj'를 가져오게 된다.
그러나 문제의 화살표 함수는 그런 상위 스코프 없이 바로 value 값이 화살표 함수이다. 즉 해당 함수의 상위 스코프는 window인 것이다. 상위 스코프에 대한 개념이 좀 덜 잡혔기에 그런 것 같아서, 해당 부분에 대한 학습이 필요할 것 같다.

🍪 새로 배운 것

콜백 함수 (기본 개념, 제어권, this 바인딩, 객체의 메서드 전달 시 this, 내부 this에 다른 값 바인딩, 콜백지옥과 동기 비동기의 개념, promise, promise 리팩토링, 제너레이터 및 async await)
Math.round() : 반올림 메서드

🍴 느낀 점

오늘 학습법 특강 및 튜터 전수면담을 통해, 그저 기술적인 부분이 아닌 다른 부분들에 대해 많은 것들을 배웠다. 어떠한 생각과 태도를 가져야할지에 대해 고민이 많았는데 오늘로 좀 더 명확해진 것 같다. 배우는 지금은 당연하지만, 취업 후에도 절대 고이지 않고 계속 동료 및 회사와 함께 성장하는, "같이 일하고 싶고 밥 먹고 싶은" 개발자가 되는 것. 그리고 그걸 계속 유지하는 것. 오늘은 그런 걸 많이 배운 날이었다.
강의가 많이 어렵다. 문제도 어렵다. 집중력도 떨어진다. 해결책이 필요하다. 때문에 내일 있을 마지막 5주차 강의나 n회독 시 필기를 하면서 들을까 한다. 개념을 제대로 내 말로 정리도 하고, 지루함도 이겨낼 수 있는 방법이 아닐까 싶다. 사전캠프 때 CS 강의도 이 방식이 도움이 되었다.