객체 World

객체 지향 언어인 JavaScript를 2년째 쓰면서 정작 객체의 종류나 특성에 대해서는 알고 있지 못하다는 생각이 들어 포스트를 적게 되었다.

객체란 Key, value 를 짝으로 가지고 있는 구조로 여러개의 속성을 하나의 변수에 저장 할 수 있다.

이번에 항플 프론트엔드 2주차 과제를 진행하면서 알게 된 점을 적어보자.

원시 래퍼 객체

const a = '1'
const b = new String(1)
const c = 1
const d = new Number(1)
const e = true
const f = new Boolean(true)

console.log(a===b) //false
console.log(a==b) //true
console.log(c===d) //false
console.log(e===f) //false

여기서 a와 b, c와 d, e와 f 가 다른 이유는 뭘까? 이유는 new String,new Number,new Boolean 으로 만든 값은 원시값인 '1', 1 , true와는 다른 객체이기 때문이다. 찾아본 바에 따르면 원시 타입 값과 래퍼 객체는 서로 다르게 동작 할 수 있으므로 직접 래퍼 객체를 생성하는것은 권장되지 않는다고 합니다.

NodeList

document.body.innerHTML = `<div id="test"><span>1</span><span>2</span></div>`;
const spans = document.querySelectorAll('#test span');
console.log(spans); //NodeList(2) [span, span]

NodeList는 DOM API로 생성된 객체로 배열과 유사하지만 Array.isArray 에서는 false로 도출된다. 그렇기 때문에 만약 array 조건에서 걸릴것이라고 생각하면 안된다. NodeList 의 경우에는 target instanceof NodeList 조건을 사용해서 걸러줘야한다.! (array처럼 array의 동작을 하기는 한다)