10월 둘째 주 TWIL

sgyoon·2019년 10월 12일
0

TWIL

목록 보기
12/29
post-thumbnail

JavaScript

1. this

this의 값은 실행 컨텍스트가 생성될 때(대부분의 경우 함수를 호출할 때) 정해진다.

객체 안에 있는 함수, 즉 메서드라도 객체의 메서드로 호출하지 않는 경우에는(일반 함수로 호출) this 값이 전역이다.

call()을 이용하여 this(아래 예시에서는 obj) 값을 지정하고 호출하면 this 값은 지정한 값이다.

bind() 역시 이용할 수 있다.

화살표 함수의 this

화살표 함수는 실행 컨텍스트를 생성할 때 this 값이 무엇인지 정하는 - this 값을 바인딩하는 과정이 없어서, 실행 시 자바스크립트 엔진이 스코프 체인 상에서 찾을 수 있는 가장 가까운 this 값을 사용한다.

setTimeout의 this

[ WindowTimers.setTimeout() this 문제 | MDN ]
'...setTimeout()에 의해 실행된 코드는 별도의 실행 컨텍스트에서 setTimeout이 호출된 함수로 호출됩니다. 호출된 함수에 대해서는 this 키워드를 설정하는 일반적인 규칙이 적용되며, this를 설정 혹은 할당하지 않은 경우, non-strict 모드에서 전역(혹은 window) 객체, strict모드에서 undefined를 기본 값으로 합니다. ..'

setTimeout()은 기본 this 값이 전역이다. 원하는 this 값을 지정하려면 함수를 함수로 감싸거나, bind()를 이용한다.

배열 프로토타입 메서드의 this

여러 배열 프로토타입 메서드는 this 값을 지정할 수 있다. Array.prototype.map()this 값을 지정하여 이용해 보았다.

하지만 이때 callback을 화살표 함수로 표기하면 this 값을 전달해도 인식하지 않는다.

2. 유사 배열

[ Array-Like Objects and Generic Methods | Dr. Axel Rauschmayer ]
key가 0 또는 양의 정수인 프로퍼티가 존재하고 length 프로퍼티의 값이 0 또는 양의 정수인 객체를 유사 배열이라고 한다.

유사 배열을 배열로 바꾸는 대표적인 방법은 아래와 같다.
1. call()로 배열의 프로토타입 메서드 slice()를 사용하기
2. Array.from() 사용하기

3. EventTarget.addEventListener()

[ Overview of Events and Handlers | MDN ]
[ 이벤트 참조 | MDN ]
addEventListener()callback을 호출할 때 첫 번째 인자로 '이벤트 객체'를 전달한다.
이벤트 객체란, 특정 타입의 이벤트와 관련이 있는 객체로 type, target 등 여러 속성을 가지고 있다. 우선 속성을 자세히 들여다보기 위해 색이름을 텍스트로 표시한 리스트 엘리먼트를 만들고, 텍스트를 클릭했을 때 이벤트 객체가 무엇인지 확인하는 코드를 작성했다.

위 코드를, 텍스트를 클릭했을 때 'your choice is (색이름)'라는 문장이 콘솔창에 뜨는 코드로 변경했다. 이때 색이름을 콘솔창에 띄우는 함수 noticeChoiceforEach()메서드의 바깥에 따로 작성하고 callback으로 사용하면, 인자로 이벤트 객체가 전달되며 'your choice is [object MouseEvent]'가 출력된다.

코드를 어떻게 바꾸면 'your choic is red'가 출력될까? 함수 noticeChoice에 내부함수를 만들고, 내부함수에 원하는 코드를 넣어 클로저로 이용하면 해결할 수 있다.

변경한 코드는 사용자가 엘리먼트를 클릭 시 아래 순서로 동작한다.
1. 이벤트 객체가 noticeChoice(color)의 첫번째 인자로 전달된다.
2. addEventListener()noticeChoice(color)(이벤트 객체) 를 실행한다.
3. noticeChoice의 내부함수에서 전달된 이벤트 객체를 받지만, 인자를 이용하는 코드가 없기에 별도 동작도 없다.
4. 외부함수에 전달된 인자인 color를 내부 함수가 이용해 'your choice is ${color}'를 출력한다.

profile
프런트엔드 개발자를 목표로 공부중입니다.

0개의 댓글