오늘 공부
알고리즘 문제 풀기(프로그래머스)
https://github.com/hoinlee-moi/Algorithm
JS기본문법 다시 공부
https://github.com/hoinlee-moi/ModernJS
React 강의 듣기
https://github.com/hoinlee-moi/React_prac
오늘까지 공부를 무사히 했지만 주말부터 다음 주 화요일 까진 가게 일을 도와줘야 해서 진도를 많이 빼지 못할 것 같다.
뭐 그래도 매일 최소 스스로에게 약속한 코딩 시간은 지킬 예정이고 실제로 지금까지 꾸준히 지키고 있다. 한달정도 됐는데 그러다보니 그냥 눈 뜨고 컴퓨터에 앉게 되면 코딩부터 풀어보는 습관이 생긴 느낌이다.
뇌에서 하고싶다라고 느끼는 것 같다.. 아무튼 드디어 매니저 일을 쉬는 주말이 왔는데 가게 일이 눈 앞에 와서 힘들긴 하겠지만 어쩔 수 없는 일이고 화이팅 하자
꼭 화살표 함수를 써야할까?(arrow function)
어제 공부를 하며 화살표 함수에 대해 조금 더 깊이 공부하긴 했다.
그런데 공부를 하다보니 일반 함수를 쓸 때 유용하게 사용했던 this에 대해서 화살표함수는 없다는 것을 발견하고 매우 놀랐다.
화살표 함수는 자신의 this, arguments을 바인딩 하지 않음
const cat = {
name: 'meow',
foo1: function() {
const foo2 = function() {
console.log(this.name);
}
foo2();
}
};
cat.foo1(); // undefined함수를 호출했을 때 그 함수 내부의 this는 지정되지 않는다.
그리고 this가 지정되지 않은 경우, this는 자동으로 전역 객체를 바라보기 때문에 함수를 호출하면 함수 내부에서의 this는 전역객체가 된다고 정리할 수 있다.
위의 예시로 보자면
cat.foo1()메소드 호출 시 내부 함수foo2가 실행- 함수가 호출됐으므로
foo2내부의 this는 지정되지 않아서 곧 전역객체를 가리킨다 - 전역 객체에
name이란 속성은 존재하지 않으므로undefined가 뜸
이게 당연시 this.name은 cat객체의 내부에서 지정한 'meow'일 줄 알았는데 undefined가 뜬다..
const cat = {
name: 'meow',
foo1: function() {
const foo2 = () => {
console.log(this.name);
}
foo2();
}
};
cat.foo1(); // meow하지만 화살표 함수를 이용할 시 찍힌다
즉, 화살표 함수에는 this가 아예 없기 때문이다
JavaScript에서는 어떤 식별자(변수)를 찾을 때 현재 환경에서 그 변수가 없으면 바로 상위 환경을 검색한다.
그렇게 점점 상위 환경으로 타고 타고 올라가다가 변수를 찾거나 가장 상위 환경에 도달하면 그만두게 되는 것!
화살표 함수에서의 this 바인딩 방식도 이와 유사하다.
화살표 함수에는 this라는 변수 자체가 존재하지 않기 때문에 그 상위 환경에서의 this를 참조하게 되는 것이다.
쓰지 말아야 할 때
1. 메소드
const cat = {
name: 'meow';
callName: () => console.log(this.name);
}
cat.callName(); // undefinedcallname 메소드의 this는 자신을 호출한 객체 cat이 아니라 함수 선언 시점의 상위 스코프인 전역객체를 가리키게 된다.
어차피 일반 함수를 사용해도 메소드로 호출하면 자신을 호출한 객체를 가리키기 때문에 메소드에서 화살표 함수를 쓸 일은 없다.
2.생성자 함수
const Foo = () => {};
const foo = new Foo() // TypeError: Foo is not a constructor화살표 함수를 생성자 함수로 사용하면 에러가 생긴다. 생성자 함수로는 사용할 수 없게 만들어짐!
3. addEventListener()의 콜백 함수
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
console.log(this); // Window
this.innerHTML = 'clicked';
});
button.addEventListener('click', function() {
console.log(this); // button 엘리먼트
this.innerHTML = 'clicked';
});원래 addEventListener의 콜백 함수에서는 this에 해당 이벤트 리스너가 호출된 엘리먼트가 바인딩 되도록 정의되어 있다.
이처럼 이미 this의 값이 정해져 있는 콜백함수의 경우, 화살표 함수를 사용하면 기존 바인딩 값이 사라지고 상위 스코프(이 경우엔 전역 객체)가 바인딩 되기 때문에 의도했던대로 동작하지 않을 수 있다.
물론 상위 스코프의 속성들을 쓰려고 의도한 경우라면 사용할 수 있음!
Reference
추가적으로 도움 될 화살표 함수의 유용한 활용법
