SameValueZero
Codestates의 underbar 과제를 하다가 uniq의 풀이법이 많아보이는 것 같았다. 그래서 아예 lodash의 uniq를 찾아보려고 가니 documentation에서 equality comparison으로 SameValueZero 를 사용해줬다는 대목이 나와서 찾아봤다.
ECMAScript에서는 같은지 아닌지 비교할때 여러가지 방법을 마련해뒀는데, 그 중에서 SameValueZero를 차용했다는 뜻으로 보인다. Javascript에서 쓰는 ===와 비교하면
NaN을 비교했을 때, true로 나온다는 점만 빼고는 같다.
- NaN 비교 결과
- +0, -0 비교 결과
여튼 ECMAScript에는 위 두가지에 따라서 총 3가지 비교 방식이 있다.(SameValue, SameValueZero, Strict Equality Comparison. '==' 처럼 type이 달라도 일단 false를 반환하지 않는 비교방식은 제외하고, 3가지 인 것이다.) 현재 Javascript에서 사용하는 것은 Strict Equality Comparison 방식이다.
ECMAScript
ECMAScript는 scripting-language의 기술 표준(Spectification)이라고 하고, Javascript는 ECMAScript의 subset(부분집합)이라고 한다. scripting-language가 무엇인지도 짚고 넘어가야할 것 같지만 대충 느낌은 오고 읽어봐도 잘 모르겠어서 패스했다. 여튼 ECMAScript는 근본적인 표준인 것 같고, Javascript외에도 ActionScript, JScript, V8 등이 ECMAScript를 이용해서 만들었다고 한다.
용어를 헷갈리지 않기 위해서 ECMAScript의 역사를 보면, Brendan Eich가 JavaScript라고 명명한 언어를 만들었는데, 이걸 이후에 표준으로 받아들이면서 ECMAScript로 이름을 바꿨다고 한다. 즉 Javascript -> ECMAScript가 됐고, 이후에 ECMAScript에서 현재의 Javascript가 만들어진 것이다.
- 참고 링크 : https://stackoverflow.com/questions/4269150/what-is-ecmascript
- 참고 링크2 : https://en.wikipedia.org/wiki/ECMAScript
Enumerability
array에서 for ... in 을 사용할 때 주의할 점이 있다고 한다는 포스팅을 같은 코드스테이츠 33기인 건휘님이 올려주셨다. 전혀 몰랐어서 더 검색해보니 MDN 에 Enumerability 항목 문서가 있었다. (링크)
첫번째 문단에 Enumerable properties란 내부적인 enumerable flag가 true로 돼있는 properties를 뜻한다는 문장이 있다. 그리고 for ... in 은 object에서 enumarable property에 모두 접근하는데, 문제가 되는 상황은 prototype까지 따라 탐색한다는 것이다. 해결 방법은 같은 페이지 표에 Detection 항목에 있는 hasOwnProperty method를 이용하는 것이다. 이 method는 prototype의 property까지 detection하지는 못하므로 자동적으로 해당 object의 property들만 검사하게 되고, for ... in 은 enumerable만 접근하므로, 해당 object의 property + enumerable만 접근하게 된다.
- 이 외에도 in을 사용해서 property를 갖고 있는지 아닌지 검사하는 방법 또한 prototype까지 검사하므로 주의해야할 것 같다. hasOwnProperty나 상황에 따라서 propertyIsEnumerable method를 이용해줘야할 것 같다.
- 참고 링크 : https://velog.io/@geonhwi/%EC%BD%94%EB%93%9C%EC%8A%A4%ED%85%8C%EC%9D%B4%EC%B8%A0-7%EC%A3%BC%EC%B0%A8
- 참고 링크 2 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties
- 참고 링크 3 : https://stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript
event handler 요소 접근 (inline, property, addEventListener)
poiemaWeb에서 이벤트 핸들링을 등록하는 방법으로 3가지를 소개해줬다. 첫번째는 인라인 방식, 두번째는 이벤트 핸들러 프로퍼티 방식, 세번째는 addEventListener 메소드 방식이다. 이 때 이를테면 onclick에 이벤트 핸들러를 등록해주고 클릭한 요소에 접근하고자 하면 뒤 두가지 방법만 소개해주고 있다. 하지만 찾아보니 인라인 방식도 방법이 있다.
- inline
-
argument로 정확히 'event'를 넘겨주거나 (그럼 넘겨준 event를 이용해서 target property를 이용하는 등으로 요소에 접근가능하다.)
<p id="p"> -
argument로 this를 넘겨주는 방식
<p id="p">
- property
- 이벤트객체는 암묵적으로 넘어온다. 따라서 이벤트 핸들러에 parameter를 명시적으로 선언해야 이용할 수 있다.
- this를 이용해줄수도 있지만, 부모 요소에 이벤트를 바인드 해주고 자식요소로부터 이벤트를 발생시킬 경우는 this가 가리키는 것이 다르므로 주의해야한다.
- addEventListener
- 역시 핸들러에 parameter를 명시적으로 선언해야한다.
- 역시 this를 사용할 때 주의해야 한다.
- event 객체의 target, currentTarget은 다르다. target은 이벤트를 발생시킨 실제 요소를 가리키고, currentTarget은 이벤트에 바인딩 된 DOM 요소를 가리킨다. this와 currentTarget은 항상 같다.
- 예를들어 부모에 onclick 이벤트를 바인딩 시키고 자식 요소를 클릭했을 때, target은 자식 요소, this는 부모, currentTarget은 부모를 가리킨다. 목적에 따라 다르겠지만, target property가 가리키는 것이 거의 대부분이 목표로 했던 요소일 것이다.
- addEventListener에 인자를 전달하는 방법은 poiemaWeb에 있다.(https://poiemaweb.com/js-event#43-addeventlistener-%EB%A9%94%EC%86%8C%EB%93%9C-%EB%B0%A9%EC%8B%9D)
- 다른 얘기지만 setTimeout같은 경우도 addEventListener처럼 함수를 호출하는 것이 아니라 함수자체를 전달해주지만, 추가로 arguments를 넣어주면 자동으로 인자로 전달된다. ( https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout )
- 참고 링크 : https://poiemaweb.com/js-event#4-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%ED%95%B8%EB%93%A4%EB%9F%AC-%EB%93%B1%EB%A1%9D
- 참고 링크 2 : https://stackoverflow.com/questions/16404327/how-to-pass-event-as-argument-to-an-inline-event-handler-in-javascript
궁금한 점, 더 공부할 것들
- 오늘의 TIL은 옆길로 샌 것인데, lodash uniq를 보면서 내 underbar 풀이와 비교해보는 것이 도움이 될 것 같다. SameValueZero를 따른다는 것을 염두에 두자.
- stackoverflow링크를 보면, inline 이벤트 핸들러에 event 객체를 넘겨준 후에 경우에 따라 window.event 를 넣어주는데 참고해야할 것 같다.
