오류를 줄여주는 helper.js 구문 해석

 

연산자와 조건 처리 구문 응용

 

---

 

 

🎈helper.js 가 필요한 이유

 

el('figure') 를 입력하면 값을 잘 찾아옴

el() ➡ null

el('') 아무 값도 주지 않으면 에러가생김

 

사용자가 어떻게 쓸지 모르는 상태를 모두 방어적으로 대응하려면 내부적으로 문제가 생기는 코드들을 문제가 생기지 않게 만들어주기 위함.

 

el('body', 'html'); ➡  에러

 

helper.js 첨부 후,

 

el() ➡ null

el('') ➡ null

el('  ') ➡ null

el(document) ➡ null

el('body', 'html') ➡ 잘 찹음!

 

 

🎈문장 해석하기

 

function els(selector, context) {
  // selector 유형이 문자가 아니거나, selector 공백을 제거한 길이가 0일 경우 결과 값 null 반환
  if (typeof selector !== 'string' || selector.trim().length === 0) { return null; }
  // context 값이 존재하고, 노드 유형이 요소 노드(1)가 아니라면... context 변수에 el() 함수를 통해 문서 객체 참조.
  if (context && context.nodeType !== document.ELEMENT_NODE) { context = el(String(context)); }
  // context 값이 undefined, null 일 경우, context는 document 값을 참조.
  if (!context) { context = document; }
  return context.querySelectorAll(selector);
}

function el(selector, context) {
  if (typeof selector !== 'string' || selector.trim().length === 0) { return null; }
  if (context && context.nodeType !== document.ELEMENT_NODE) { context = el(String(context)); }
  if (!context) { context = document; }
  return context.querySelector(selector);
}

 

1️⃣

 

|| ( 논리 연산자 , or ) 양 쪽의 조건 둘 중 하나가 참이면 { return null ; } 코드가 실행 됨

 

selector 의 타입이 string ( 문자 ) 가 아니거나

왼쪽, 오른쪽의 공백을 제거한 값의 길이가 0일 때, 비어있는 값일 때

아무것도 아니니까 null 을 반환해라

 

2️⃣

 

context 가 존재하고 , ( 아무것도 전달하지 않은 상태가 아니고 무언가를 전달한 상태 ) 이거나,

노드타입이 document 의 ELEMENT_NODE 가 아니라면 ( 요소 노드가 아니라면 )

context 에 context 된 값을 문자화 시킨 다음에 element 함수를 통해서 결과가 나오게 되면 context 에 담아줘라

 

3️⃣

 

context 가 없다면 (!) , context 는 document 이다

사용자가 아무것도 전달하지 않으면 document 내에서 전달받은 selector 로 대상을 찾아오게 된다

 

 

프로그래밍 코드를 작성하는 것이 어렵다면, 언어를 읽는 것과 한글로 작성 후 코드로 작성하는 연습 해보기

 

 

+

 

문서 ( DOM ) 은 Node type element 들이 구성한다.

 

document.DOCUMENT_NODE	9
document.ELEMENT_NODE	1

2️⃣에서 document.ELEMENT_NODE 대신에 1을 넣어서 사용하기도 함.

 

---

솔직히 무슨 말인지 이게 왜 필요한지 아직 사용을 안해봐서 잘 모르겠지만 하다보면 언젠간 이 문장들을 이해할 날이 올거라 확신한다.!!!!!