JavaScript8 [JavaScript] ??(널 병합)연산자와 ?.(옵셔널 체이닝)연산자 ES2020에서 추가된 ??(널 병합)연산자와 ?.(옵셔널 체이닝)연산자에 대해 공부해보자! 널 병합 연산자 ( ?? ) 널 병합 연산자는 주로 || 연산자 대용으로 사용되며, falsy 값 (0, '', false, NaN, null, undefined) 중 null 과 undefined만 따로 구분한다. const a = 0; const b = a || 3; // ||연산자는 falsy 값이면 뒤로 넘어감 console.log(b); // 3 const c = 0; const d = c ?? 3; // ??연산자는 null 과 undefined 일때만 뒤로 넘어감 console.log(d); // 0 const e = null; const f = e ?? 3; console.log(f); // 3 c.. 2023. 11. 9. [JavaScript] WeakMap/WeakSet 이전 게시물에 올린 Map/Set 에 이어서 WeakMap/WeakSet 를 공부해봅시다. WeakMap() 쉽게 말하면 WeakMap() 은 키값을 null로 바꾸면 map까지 삭제시켜줍니다. (가비지 컬렉션이 된다.) const wm = new WeakMap(); const obj = {}; wm.set(obj, '123'); obj = null; // WeakMap() 은 가비지 컬렉팅이 되서 wm이 제거된다. const m = new Map(); const obj2 = {}; m.set(obj2, '123'); obj2 = null; // 하지만 Map() 은 가비지 컬렉팅이 안되서 m이 남아있다. Map/Set 의 개념을 잘 모르시는 분은 아래 링크에서 훑어보세요 🍀 https://tradeve.. 2023. 11. 8. [JavaScript] Map/Set Map 과 Set 은 ES2015에서 새롭게 추가된 자료구조들이다. Map 은 객체와 유사하고 Set 은 배열과 유사하다고 생각하면 된다. const m = new Map(); m.set('a','b'); // set(키,값)으로 Map에 속성 추가 m.set(3,'c'); // 문자열이 아닌 값을 키로 사용 가능 const d = {}; m.set(d,'e'); // 객체도 가능 m.get(d); //get(키) 로 속성값 조호; console.log(m.get(d)); // e m.size; // size로 속성 개수 조회 console.log(m.size); // 3 for (const[k,v] of m) { //반복문에 바로 넣어 사용 가능 console.log(k,v); // 'a', 'b', .. 2023. 11. 8. [JavaScript] onClick, addEventListener 이벤트 비교 이벤트 리스너는 이벤트가 발생했을때 처리를 담당하는 함수로, 이벤트 핸들러(event handler)라고도 불립니다. 특정 element에서 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킵니다. 가장 보편적으로 많이 사용되는 click 이벤트로 예시를 들어보겠습니다. 1. HTML에서 이벤트 등록 HTML 태그안에서 onclick을 입력하여 클릭이벤트를 등록하는 방법 버튼 2. JavaScript를 이용해서 onclick 이벤트 등록 스크립트에서 onclick 속성을 추가해서 이벤트를 등록하는 방법 하나의 이벤트 리스너만 등록이 가능합니다. 3. addEventListener() 메서드 스크립트에서 click 동작으로 이벤트를 등록하는 방법 addEventListener() .. 2023. 9. 30. 이전 1 2 다음