JavaScript

DOM

javascript에서 html 문서에 접근하는 방법

document.querySelector('요소')

.nextSibling(previousSibling)으로 다음(이전) 요소를 찾을 수 있다.

• nodeType
  => element = 1, attribute = 2, text = 3, comment = 8
  => 한 문서 페이지의 단위를 node라고 한다

반복문

continue 지시자 아래의 구문을 실행하지 않고, 다시 조건으로 돌아간다.

for

for (시작값; 조건; 갱신) {
실행될 구문
}

for-in(객체)

for(let 변수이름 in 객체이름) {}
=> 객체에서 순환하며 key를 찾을 때 사용한다.

객체가 가진 key를 조회하는 방법(in)

• Object.prototype.hasOwnProperty.call(객체이름, 'key')
  => Object.prototype은 {}로 대체할 수 있다.

  .call() 메소드를 사용하면 다른 자료형의 기능을 수행할 수 있다.
  => 기능을가지는자료형.prototype.기능이름.call()
  => 객체가 가지는 고유의 기능(Instance Method)이 있고,
  공통적으로 사용할 수 있는 기능(Static Method)이 있다.

for-of(배열)

for (let 변수이름 of 배열이름) {}

객체는 for-of를 사용할 수 없기 때문에 배열로 바꾸고 사용한다.

• Object.keys(객체이름)
  => 모든 key를 배열로 반환한다.
• Object.values(객체이름)
  => 모든 value를 배열로 반환한다.
• Object.entries(객체이름)
  => key와 value를 각각 쌍으로 하는 배열로 반환한다.

함수

매개변수에 매개변수 = 기본값으로 기본값을 정의할 수 있다.
함수는 하나의 동작만 담당해야 한다.

throw new Error('에러메세지')
에러 메세지를 출력한다.

.split('')
=> ''안의 문자를 기준으로, 각 텍스트를 가지는 배열로 반환한다.
.includes('값')
=> 값을 포함하는지 여부를 반환한다.

함수 이름 짓기

• show~ => 무언가를 보여줄 때
• get~ => 값을 반환함
• calc~ => 무언가를 계산할 때
• create~ => 무언가를 생성할 때
• check~ => 무언가를 확인하고 불린값을 반환할 때