📝 TIL

[TIL] JS 함수, 객체, 이벤트

오늘 ONEUL 2022. 4. 2. 03:01

✍ Today I Learned

  • 항상 능동적으로 공부할 것!
  • 함수를 사용하면 효율성이 올라간다.
  • arrow function을 이용하면 함수 코드의 양을 줄이면서 변수화 할 수 있다.
  • 그러나 return이 없는 함수라면 굳이 쓰는 의미가 없다.
  • 객체란?
    1. 개념적으로 인지 가능해야 함
    2. 고유적인 이름으로 구분해야 함
    3. 시작과 끝이 반드시 존재해야 함
  • 값이 바뀌어도 객체 자체의 주소값은 바뀌지 않기 때문에 객체는 const로 선언한다.
  • 객체 안에 arrow function을 사용할 수도 있지만 정보가 많아 가독성이 중요하기 때문에 잘 사용하지 않는다.
  • this 키워드는 내가 소속된 객체를 가리킨다.
  • JSON (JavaScript Object Notation)은 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷이다.
  • 실무에서 데이터를 전송하는 기능에 onclick은 사용하지 않는다. (alert 띄울 때 정도?)
  • a 태그에 이벤트 리스너를 등록할 때 href 속성에 의해 자체 이동(동기화 방식)이 되기 때문에 별도의 이동 속성을 막는 코드가 필요하다.
  • html 태그는 html element, 속성은 attribute, 일반 텍스트는 textNode 라고 한다.
    • innerHTML - html로 출력
    • innerText - text로 출력
    • getElementById('idName') - id값으로 html element 가져오기
    • querySelector('selector') - css 선택자로 html element 가져오기
  • form 태그의 데이터는 value 속성의 값으로 매핑되어 있으므로 value 속성을 호출하면 된다. (value 속성의 데이터는 모두 string으로 처리됨)
  • 디버깅 하는 법
    1. 디버깅 원하는 위치에 debugger; 코드 삽입
    2. 문서를 실행하면 개발자 도구와 함께 디버거 실행
    3. 다음 debugger의 위치로 가려면 F8
  • innerHTML 구문에서 \n 이용해서 줄 바꿈 가능하지만 추천하지 않는다. HTML로 레이아웃 잡을 것!
  • 바닐라 자바스크립트는 객체 이름과 html id 값이 같으면 자동으로 매핑한다.
  • 메서드나 함수는 대문자로 시작하지 않는다.
저작자표시