Javascript 정리

• 이벤트 로드 시점

요소가 로드되기 이전에 이벤트를 먼저 호출할 경우 이벤트가 적용되지 않는 문제가 있다.

이런 경우, 기본적인 요소는 html에 구성해놓은 후에 원하는 작업을 진행해야한다.

• 객체

서버와의 통신 방식이 JSON 객체 방식이라면, 데이터 요청과 응답 시 객체{}를 이용해야한다.

• 기능에 따른 분리
  • 요소의 속성을 다루거나 event listener
  • 상태 관련 객체, 같은 서비스 수준으로 기능(함수)들을 묶은 객체
  • 요소 검증 관련 함수
  •  Ajax 등 서버와의 통신

• es6 문법
  1. 객체 = { name: "name" }
     키와 값 이름 값을 시 하나로만 제공해도 됨
     객체 = { name }
     
     
  2. const { id, name } = 객체;
     객체 속성을 사용할 때 일일히 객체에서 꺼내쓰는 것이 아닌 변수에 할당하여 사용 가능
     const { id, name: studentName } = 객체;
     이런 식으로 새로운 속성 이름으로 매핑도 가능하다.
     배열 또한 매번 인덱스를 활용하여 꺼내쓰는 것이 아닌 변수에 할당하여 사용 가능하다.
     
     
  3. 복사
     const arrayCopy = [...array];
     [...array, { key: 'value'}] -> 새로운 요소도 추가 가능
     { ...obj } -> 객체도 같은 방식으로 복사 가능
     
     서로 다른 객체, 배열을 병합하는 것도 가능
     배열 병합 -> [...array1, array2]
     객체의 경우에는 키 값이 같으면 마지막 객체의 값으로 덮어씌워진다.
     
     
  4. default parameter
     function printMessage(message = "defaultMessage"){}
     보통은 값을 확인하는 if문이 제공되지만 default parameter로 제공되었기 때문에
     항상 값이 있으며, 바로 값을 활용하는 코드로 들어가면 됨
     
     
  5. Ternary Operator - 삼항 조건 연산자
     조건문 ? 값1 : 값2
     조건이 참일 경우 값1, 거짓일 경우 값2 사용
     
     
  6. Template Literals
     ``문자열 속에서 ${}를 활용하여 변수 사용 가능

• es11
  1. optional chaining
     없는 속성을 호출할 경우 오류가 난다. 이 경우 optional chaining 활용
     person.job?.manager?.name
     person의 job이 있을 경우 그리고 manager가 있을 경우 manager의 name 가져오게 됨
     null일 수 있는 중첩된 객체를 불러올 때 복잡하지 않은 형태로 호출 가능하다.
     
     
  2. nullish coalescing operator
     false는 '' 0 null undefined에 해당한다.
     즉, || 연산자 사용 시 0과 ''은 값으로 처리하려면 ?? 연산자로 대체하여 사용해야한다.