tech.junha.kr

노트/JavaScript

Tips

작성

Early return, Early exit

  • 조건이 맞지 않은 경우, 빨리 리턴해 가독성 높이는 방법
function upgradeUser(use) {
  if(user.point > 10){
    // heavy code... ❌
    }
   ...
}
function upgradeUser() {
    if(user.point <= 10){
        return;  // ✅
    }
    // heavy logic...
}
  • 타입이 맞지 않은 경우에도 많이 사용한다.
if (typeof callback !== 'function') {
      return;
}

화살표 함수에서 객체를 반환하는 경우

const func = (value) => {id:value}     // ❌`
const func = (value) => ({id:value})   // ✅
  • 객체를 반환하는 경우, ( { } ) 중괄호를 감싼다.

디버거 사용

  1. 브레이크포인트 누른다음에 리프레시하기
  2. 변수에 WATCH 눌러서 현황판에 등록하기
  3. 함수 내부에 들어가는 버튼과 다음 함수를 누르는 버튼이 있음, 내부함수를 도중에 나가는 버튼, 정지 없이 쭉 실행되는 버튼도 있음
  4. VScode에서도 브라우저와 연동해서 디벙깅 할 수 있다.

타입

  • object instanceof constructor: true or false
date instanceof Date
typeof date

if you want to import javasciprt in javasciprt in brower, you have to use type="module" in script tag, module을 사용하는 스크립트임을 명시

setInterval안에 clearInterval 선언할 수 있다. const itv = setInterval(() => { if(idx === s2.value.length){ clearInterval(itv) } mes.textContent += s2.value.charAt(idx) idx ++ }, 333);

일급객체

함수는 일급객체: 함수도 가능하다. 매개변수, 반환,할당

유사배열객체

유사배열객체는 readonly length 프로퍼티를 지닌다.

console.log

console.log("%c hi", "color:red") 빨강색 글자의 컨솔창