(2023/07/17) 공부 일지!

seumomo_TAEILKIM·2023년 7월 17일
0

공부일지

목록 보기
62/87
post-custom-banner

JavaScript

반복문

for-of

[[prototype]]symbol.iterator를 가지고 있어야 사용이 가능하다.


자료형

typeof

Object.prototype.toString.call()
=> typeof보다 더 정확하게 어떤 자료형인지 확인할 수 있다.
=> [object 자료형]와 같이 반환된다.


Array Methods

원형 파괴

  • .push()
  • .pop()
  • .unshift()
  • .shift()
  • .reverse()
    => 배열을 뒤집어준다.
  • .splice(index, 제거될개수, itemN)
    => index부터 개수만큼 제거하고 item을 추가해준다.
  • .sort(a-b)
    => a-b의 결과가 0보다 작으면 a가 b보다 앞에 위치한다.
    => a-b의 결과가 0이면 a와 b의 위치를 바꾸지 않는다.
    => a-b의 결과가 0보다 크면 a가 b보다 뒤에 위치한다.

새로운 배열 반환(원형 비파괴)

  • .concat(배열n)
    => 배열1배열2를 합쳐서 새로운 배열을 반환한다.
  • .slice()
  • .toSorted()
    => .sort()와 동일하게 동작한다.
  • .toReversed()
    => .reverse()와 동일하게 동작한다.
  • .toSpliced()
    => .splice()와 동일하게 동작한다.
  • .map()
    => .forEach()와 동일하게 동작하며, 값을 반환한다.

요소 찾기

  • .find()
    => 해당하는 요소 1개를 반환한다.
  • .filter()
    => 해당하는 요소들을 배열로 반환한다.

요소별 reducer 실행

  • .reduce()
    => 초깃값을 올바르게 설정해 주어야 원하는 값을 얻을 수 있다.

string과 array의 변환

  • .split()
    => 문자열에서 인수를 기준으로 구분하여 배열로 반환한다.
  • .join()
    => 배열에서 인수를 기준으로 합쳐서 문자열로 반환한다.

try-catch(예외 처리)

Error가 발생한 지점 이후의 모든 코드가 실행되지 않는 것을 방지하기 위해 사용한다.
=> 서버와 연결할 때에는 필수이다.

try {
}
catch() {
}
finally {
}

=> error가 발생할 경우에는 try의 코드를 중단하고 catch의 코드를 실행한다.
=> finallyerror가 발생해도 작동하는 코드이다.

Errornamemessage, stack으로 구분된다.
=> stack = name + message


BOM

(Browser Object Model)

Location 객체

http://localhost:5500/index.html?type=listing&page=2#title
  • http://
    => protocol(프로토콜)
  • localhost:5500
    => port(포트 넘버)
  • /index.html
    => pathname(경로명)
  • ?type=listing&page=2
    => search(검색)
  • #title
    => hash(해시)
  • platform
    => 브라우저가 실행되는 플랫폼 정보를 반환한다.
  • userAgent
    => 브라우저와 운영체제 정보를 반환한다.
  • language
    => 브라우저에서 사용되는 언어를 반환한다.
  • onLine
    => 브라우저가 온라인인지의 여부를 반환한다.

Screen 객체

  • height
    => 모니터 사이즈
  • availHeight
    => 브라우저의 높이
  • innerHeight
    => 브라우저의 내부 높이

History 객체

  • back
    => 뒤로 가기
  • forward
    => 앞으로 가기

DOM

(Document Object Model)

문서 대상 찾기

  • .closest(선택자)
    => 자기 자신을 포함하여 선택자와 일치하는 가장 가까운 부모 요소를 찾아준다.

문서 대상 확인

  • .matches()
    => 요소에 인수의 값이 존재하는지 확인한다.
  • .contains()
    => 요소의 자식들 중에 해당하는 요소가 있는지 확인한다.
profile
어제의 나보다 1% 발전하기💪
post-custom-banner

1개의 댓글

comment-user-thumbnail
2023년 7월 18일

좋은 글 잘 읽었습니다, 감사합니다.

답글 달기