📌nodeType

text, comment, span 같은 것들을 노드라고 하는데 노드는 가장 작은 단위이다.
노드는 타입이 존재 하는데 그 타입은 다음과 같다.
* html태그를 엘리먼트라고 한다 / 코드의 길이를 줄이기 위해 보통 이름을 사용하기 보단 숫자를 많이 사용한다!

• ⭐ ELEMENT_NODE (1):
  HTML 요소(태그)를 나타내는 노드입니다.
  예를 들어 <div>, <p>, <a> 등의 HTML 요소는 ELEMENT_NODE입니다.
• ⭐ ATTRIBUTE_NODE (2):
  HTML 요소의 속성을 나타내는 노드입니다.
  예를 들어 class, id, src 등의 속성은 ATTRIBUTE_NODE입니다.
• ⭐ TEXT_NODE (3):
  HTML 요소의 텍스트 내용을 나타내는 노드입니다.
  예를 들어 <p>Hello, World!</p>에서 "Hello, World!" 부분은 TEXT_NODE입니다.
• ⭐ COMMENT_NODE (8):
  HTML 주석을 나타내는 노드입니다. 예를 들어 <!-- 주석입니다 -->는 COMMENT_NODE입니다.

---

• DOCUMENT_NODE (9): 전체 문서(document)를 나타내는 노드입니다. 즉, 문서 전체를 포함하는 최상위 노드입니다.
• DOCUMENT_TYPE_NODE (10): 문서의 타입(DOCTYPE)을 나타내는 노드입니다.
• DOCUMENT_FRAGMENT_NODE (11): 문서의 일부분을 나타내는 노드입니다. 예를 들어 <template> 요소의 내용은 DOCUMENT_FRAGMENT_NODE입니다.

for문

 for (let i = l - 1; i >= 0; i--) {
  let value = frontEndDev[i];
  console.log(value);
} 
//^ 6~0 까지 나오길 원함 
for (let i = l; i > 0; ) {
  let value = frontEndDev[--i]; //frontEndDev에서 바로 선감소를 시키면 조건을 간단하게 할 수 있다. 
  console.log(value);
}

---

📌for in문

for...in 문을 사용하여 javaScript 객체가 가진 값을 조회 하려고 했지만 for in문에는 프로토타입 체이닝에 의해 조상 객체까지 찾아지는 치명적인 단점이 있다.
그래서 자신이 가진 값만 나올 수 있는 hasOwnProperty를 사용하면 된다.

⚠️ for...in은 방문 순서가 중요한 배열보다는 객체에 사용하는 것이 좋다!
for...in은 순서를 보장하지 않습니다. 배열의 인덱스는 순서에 의미를 갖기 때문에, 순서를 보장하지 않는 for...in을 사용하여 배열을 순회하면 예기치 않은 결과를 얻을 수 있습니다. 대신에 for...of 루프나 배열의 forEach 메소드를 사용하여 배열을 순회하는 것이 좋습니다.

📌hasOwnProperty

하지만 eslint가 경고를 해준다. 그 이유는 위와 같이 기존의 기능을 덮어 쓰여질 가능성이있기 때문에 경고 해주는 것이다

✅ 해결방법
call을 사용하여 진짜 객체에게 능력을 빌려야 한다. call이라는 기능은 다른 타입에 있는 기능을 빌리고 싶을 때도 call을 사용하면 능력을 빌릴 수 있다.
Object.prototype.hasOwnProperty.call(javaScript, key);을 사용해야 온전히 자신의 객체만 조회할 수 있다..

위의 예시와 같이 기존 기능이 오염될 일이 없는대도 사용해야 하는 이유개발자가 임의로 조상 객체에 새로운 프로퍼티를 추가하여 프로토타입을 오염 시켰을 때에 자신이 만든 객체 javaScript의 key 값을 조회하면 조상객체에 만든 프로퍼티의 값까지 모두 조회가 되기 때문에 반드시 Object.prototype.hasOwnProperty.call(javaScript, key); 사용해주는 게 좋다.

Object.prototype ➡️ {} 나 ({}) 로 대체 가능하다

📌for...of

// iterable(반복이 가능한) = String, Array, Array-like
//! for...of는 이터러블한 아이들만 사용가능
const arryLike = {
  0: 'body',
  1: 'head',
  2: 'div',
  length: 3,
}; //% 배열처럼 인덱스와 길이가 존재하지만 배열은 아님 (완전한 유사배열은 아님)/ 객체는 이터러블하지 않음

for (let value of languages) {
  const name = value.name;

  // if (name === 'Java') break;
  if (name.includes('Java') && name.length < 5) break; //! JavaScript도 Java를 포함하고 있기 때문에 출력되지 않는다.

  console.log(name);
}

📌함수

function plus(a, b){ // a, b 는 매개변수(parameter), 인자
    return a + b;
}
let result = plus(1, 2); // 1, 2 는 인수(argument)

함수 이름짓기

함수는 어떤 동작을 수행하기 위한 코드를 모아놓은 것이기 때문에 함수의 이름은 대개 동사이다.

• 간결하고 명확해야 한다.
• 함수가 어떤 동작을 하는지 설명할 수 있어야 한다.
• 코드를 읽는 사람이 함수 이름만 보고도 함수가 어떤 기능을 하는지 힌트를 얻을 수 있어야 한다.

get… : 값을 반환함
calc… : 무언가를 계산함
create… : 무언가를 생성함
check… :무언가를 확인하고 불린값을 반환함

---

⭐❌💯 함수는 동작 하나만 담당해야 한다.

독립적인 두 개의 동작은 독립된 함수 두 개에서 나눠서 수행할 수 있게 해야 합니다. 한 장소에서 두 동작을 동시에 필요로 하는 경우라도 말이죠(이 경우는 제3의 함수를 만들어 그곳에서 두 함수를 호출합니다).

😥개발자들이 빈번히 하는 실수
getAge 함수는 나이를 얻어오는 동작만 수행 해야한 다.
alert 창에 나이를 출력해 주는 동작은 이 함수에 들어가지 않는 것이 좋다.
createForm 함수는 form을 만들고 이를 반환하는 동작만 해야 한다.
form을 문서에 추가하는 동작이 해당 함수에 들어가 있으면 좋지 않습니다.