Javascript 정리
이벤트 로드 시점 요소가 로드되기 이전에 이벤트를 먼저 호출할 경우 이벤트가 적용되지 않는 문제가 있다. 이런 경우, 기본적인 요소는 html에 구성해놓은 후에 원하는 작업을 진행해야한다. 객체 서버와의 통신 방식이 JSON 객체 방식이라면, 데이터 요청과 응답 시 객체{}를 이용해야한다. 기능에 따른 분리 요소의 속성을 다루거나 event listener 상태 관련 객체, 같은 서비스 수준으로 기능(함수)들을 묶은 객체 요소 검증 관련 함수 Ajax 등 서버와의 통신 es6 문법 객체 = { name: "name" }키와 값 이름 값을 시 하나로만 제공해도 됨객체 = { name } const { id, name } = 객체;객체 속성을 사용할 때 일일히 객체에서 꺼내쓰는 것이 아닌 변수에 할당하여 사용 가능const { id, name: studentName } = 객체; 이런 식으로 새로운 속성 이름으로 매핑도 가능하다.배열 또한 매번 인덱스를 활용하여 꺼내쓰는 것이 아닌 변수에 할당하여 사용 가능하다. 복사const arrayCopy = [...array];[...array, { key: 'value'}] -> 새로운 요소도 추가 가능{ ...obj } -> 객체도 같은 방식으로 복사 가능서로 다른 객체, 배열을 병합하는 것도 가능배열 병합 -> [...array1, array2]객체의 경우에는 키 값이 같으면 마지막 객체의 값으로 덮어씌워진다. default parameterfunction printMessage(message = "defaultMessage"){}보통은 값을 확인하는 if문이 제공되지만 default parameter로 제공되었기 때문에항상 값이 있으며, 바로 값을 활용하는 코드로 들어가면 됨 Ternary Operator - 삼항 조건 연산자조건문 ? 값1 : 값2조건이 참일 경우 값1, 거짓일 경우 값2 사용 Template Literals``문자열 속에서 ${}를 활용하여 변수 사용 가능 es11 optional chaining없는 속성을 호출할 경우 오류가 난다. 이 경우 optional chaining 활용person.job?.manager?.nameperson의 job이 있을 경우 그리고 manager가 있을 경우 manager의 name 가져오게 됨null일 수 있는 중첩된 객체를 불러올 때 복잡하지 않은 형태로 호출 가능하다. nullish coalescing operatorfalse는 '' 0 null undefined에 해당한다.즉, || 연산자 사용 시 0과 ''은 값으로 처리하려면 ?? 연산자로 대체하여 사용해야한다.
