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

✍ 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 값이 같으면 자동으로 매핑한다.
• 메서드나 함수는 대문자로 시작하지 않는다.