TIL38: Array-Like Object / Event Object

Object 중에서 Array.isArray() 메소드를 적용해 보면 분명 배열이 아니면서 length 속성을 가지거나 반복문 적용이 가능한 객체들을 Array-Like Object 또는 Pseudo Array(유사 배열)이라고 합니다.

이러한 객체들은 Array.from() 메소드를 이용하여 Shallow Copy를 실행함으로써 Array.isArray() 메소드를 적용했을 때 배열 타입임을 명확히 할 수 있습니다.

Array.from('foo');    // ["f", "o", "o"]
Array.from({0: 1, 1: 2, length: 2}) // [1, 2]

이런 과정을 거쳐 생성된 배열은 원래의 배열 메소드를 사용할 수 있게 됩니다.

키보드나 마우스 등 컴퓨터 주변장치와 연동된 DOM 조작과 관련되어 수 많은 Type의 Event Object 들이 존재합니다. 그리고 이 이벤트에 함수를 할당하여 Event Handler로 이용함으로써 대상 객체를 간접적으로 제어할 수 있습니다.

대표적인 이벤트 객체들과 이들을 이용해 Event Handler를 생성하는 예시는 아래와 같습니다.

onclick
onsubmit
ondbclick
onkeydown
   :

object.onclick = function() {
  // 실행 코드 또는 함수
};
object.onsubmit = function() {
  // 실행 코드 또는 함수
};

또는

objcect.addEventListener('click', function() {
  // 실행 코드 또는 함수
});
objcect.addEventListener('submit', function() {
  // 실행 코드 또는 함수
});