12.자바스크립트[this와 화살표 함수]

1.this 와 화살표 함수

화살표 함수와 일반함수의 차이점은 함수 내부의 this 가 가리키는 값이 다르다는 것임

 

this는 함수가 어떻게 호출 되었는가에 따라 바인딩(binding) 하는 값이 달라지는 키워드임

웹개발에서 바인딩 (Binding)이란, 데이터를 특정 위치에 동적으로 연결하는 것을 의미한다.

 

화살표 함수 내부의 this 가 어떠한 값을 갖는지 알아보기

콜백함수를 사용하는 예제

• 생성한 count 변수를 0 으로 초기화
• 내장함수인 setInterval 메서드를 사용함
• setInterval 메서드는 매개 변수 변수로 콜백함수와 딜레이 타임을 전달받는 메서드임 
• 콜백 함수로는 function 키워드를 사용해서 count변수의 값을 1씩 증가시켜주고 증가된 카운트의 값을 출력해주는 코드를 콜백함수의 내부에 작성해줌
• setInterval 함수에 전달된 콜백함수인 this 는 생성자 함수를 통해 새로운 카운터 객체를 가리키지 않고 전역객체인 window 객체를 가리키기 때문에 숫자가 1씩 증가되어 출력이 아니라 NaN이라는 값이 2초마다 출력됨

콜백함수를 화살표 함수로 변경해 코드를 작성하는 방법

• 콜백함수를 화살표 함수로 변경했을 뿐인데 코드가 알맞게 동작함 ex) 1 2 3 4 5 / 2초마다 1씩증가
• this 는 함수가 호출된 방법에 따라 가리키는 값이 달라짐
• 화살표 함수의 this 는 함수의 호출 방식이 아닌 함수가 정의 된 시점에서 상위 스코프의 this 를 참조 한다는 특징이 있음
• 자바스키립트가 식별자의 스코프를 결정하는 방법인 Lexical Scope (렉시컬 스코프) 와 유사

 

Lexical Scope 

함수의 호출 방법이 아니라 함수가 선언된 위치에 따라 스코프가 결정되는 방법 

 

일반함수로 호출이 되었으므로 웹 브라우저의 전역 객체인 윈도우 객체가 this 에 바인딩 된것임

 

• 콜백함수를 화살표 함수로 작성한다면 이 화살표 함수 내부의 this 는 함수가 어디에 선언되었는가에따라 바인딩 되는 값이 달라지기 때문에 콜백 함수가 선언된 위치인 setInterval 메서드 내부를 기준으로 창의 스코프를 참조함

※ 함수가 어디에 선언되었는가 ?

함수 선언 위치에 의해 스코프 결정 -> Lexical Scope (렉시컬 스코프)

• 화살표 함수는 함수의 선언 위치에 따라 스코프를 결정하는 방법인 Lexical Scope (렉시컬 스코프)를 따라 상위 스코프의 this 를 참조하기 때문에 함수의 호출위치와 상관없이 항상 고정된 this 의 값을 가짐
• 콜백함수의 내부에서 this 키워드가 자신이 포함된 객체가 아니라 전역객체를 가리킨다는 문제점을 해결하기 위한 대안으로 사용

 

 

this의 값에 윈도우 객체가 바인딩되어 출력됨

화살표 함수의 this는 자신을  포함하고 있는 함수가 선언된 위치의 상위 스코프를 참조하기 때문에

프린트 메서드가 선언된 위치인 cafe객체의 상위 스코프인 전역객체가 출력

-> 자바스크립트에서 객체의 메서드를 작성할 때에는 화살표 함수를 사용하지 않고 일반함수를 사용함